/* Landing-page sections below the showroom. Builds on hub.css tokens (--ink, --brand, --line ...). */
:root { --dark: rgba(16, 19, 24, .96); --dark-2: var(--obsidian-2); --tint: rgba(234, 240, 250, .55); --radius: 18px;
  --ok-bg: #DCFCE7; --dev-bg: rgba(22,119,255, .1); --plan-bg: #EBEFF6; color-scheme: light;
  /* form fields (dark values in theme.css): the border alone reaches 3:1 against the page and the field, so an empty
     field is findable before focus; placeholders 4.5:1 */
  --field-bg: #FFFFFF; --field-border: #7A8699; --field-border-hover: #4B5567; --placeholder: #5B6577; --field-error: #DC2626;
  --navy: #0F1A33; --navy-hi: #16264A; }  /* demo tabs and demo summary tiles (same value in both themes) */
.pf-select select, .field select, .field input, .field textarea, .sr-pair-ctl select { background: var(--field-bg); color: var(--ink); border: 1px solid var(--field-border); }
:is(.field, .pf-select, .sr-pair-ctl) :is(input, select, textarea):hover { border-color: var(--field-border-hover); }
:is(.field, .pf-select, .sr-pair-ctl) :is(input, select, textarea):focus-visible { border-color: var(--cobalt); outline: 2px solid var(--cobalt); outline-offset: 1px; }
:is(.field, .pf-select, .sr-pair-ctl) :is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
.field :is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--field-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-error) 25%, transparent); }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { overflow-x: hidden; }
h2, h3 { letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; color: var(--ink-2); }

/* ---------- top navigation ---------- */
.topnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); color: var(--ink); }
.topnav-inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.brandmark { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; }
.brand-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-size: 17px; }
.nav-links { margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center; gap: 4px; }
.nav-links a { display: block; padding: 8px 11px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); background: rgba(22,119,255,.08); }
.nav-links .nav-cta { background: var(--cobalt); color: var(--white); margin-left: 6px; }
.nav-links .nav-cta:hover { background: var(--cobalt-hi); color: var(--white); }
.nav-links .nav-cta[aria-current] { background: var(--cobalt); color: var(--white); }  /* the CTA stays a button when its section is in view */
.nav-toggle { display: none; margin-left: auto; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid rgba(22,119,255,.22); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
@media (max-width: 980px) {
  .nav-toggle { display: inline-block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--white); padding: 8px 16px 16px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(16,19,24,.08); }
  .nav-links.open { display: flex; }
  .nav-links .nav-cta { margin: 6px 0 0; text-align: center; }
}

/* ---------- hero additions ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: 12px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn-sm { padding: 8px 13px; font-size: 14px; }
.btn-light { background: var(--cobalt); color: var(--white); } .btn-light:hover { background: var(--cobalt-hi); }
.btn-ghost { background: rgba(255,255,255,.75); color: var(--ink); border-color: rgba(22,119,255,.3); } .btn-ghost:hover { background: var(--white); border-color: var(--cobalt-deep); }
.btn-dark { background: var(--cobalt); color: var(--white); } .btn-dark:hover { background: var(--cobalt-hi); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); } .btn-outline:hover { border-color: var(--blue-tint); }
.btn-disabled { background: #E6EBF3; color: var(--ink-3); cursor: not-allowed; }

/* ---------- showroom head ---------- */
.gallery { scroll-margin-top: 64px; }
.gallery-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.gallery-head h2 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 32px); }
.gallery-head .sub { margin: 0; color: var(--ink-2); max-width: 640px; }
.seg { display: inline-flex; background: #EDF1F8; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { font: inherit; font-size: 14px; font-weight: 700; border: 0; background: transparent; color: var(--ink-2); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--cobalt); color: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.loading-note { color: var(--ink-3); font-size: 14px; text-align: center; }
@media (max-width: 700px) { .chips:not(.tabgrid) { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; width: 100%; } .chip { white-space: nowrap; } }

/* ---------- generic section ---------- */
.sec { padding: 88px 0; scroll-margin-top: 56px; }
.sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sec-tint { background: var(--tint); }
.sec-dark { background: radial-gradient(900px 400px at 100% 0%, rgba(22,119,255,.22), transparent 60%), var(--dark); color: var(--ink-2); }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 12px; }
.sec-head .sub { color: var(--ink-2); font-size: 17px; margin: 0; }
.sec-dark .sub, .sec-dark p { color: var(--ink-2); }
.kicker { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt-deep); }
.sec-dark .kicker { color: var(--blue-tint); }

/* labels */
.lab { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.lab-ok { background: var(--ok-bg); color: #166534; } .lab-dev { background: var(--dev-bg); color: #0B5CD6; } .lab-sim { background: transparent; color: var(--cobalt-deep); box-shadow: inset 0 0 0 1px rgba(22,119,255,.45); }
.lab-plan { background: var(--plan-bg); color: var(--ink-2); }
.sec-dark .lab-ok { background: rgba(74,222,128,.14); color: #86EFAC; } .sec-dark .lab-sim { color: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(120,190,255,.55); } .sec-dark .lab-plan { background: rgba(255,255,255,.08); }

/* services */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.svc:hover { border-color: rgba(120,190,255,.45); box-shadow: 0 12px 30px rgba(22,119,255,.18); }
.svc .ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 20px; color: var(--cobalt-deep);
  background: var(--cobalt-soft); box-shadow: inset 0 0 0 1px rgba(120,190,255,.25); margin-bottom: 12px; }
.svc h3 { margin: 0 0 6px; font-size: 18px; } .svc p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* why */
.why-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.why { grid-column: span 2; background: var(--surface); border-radius: var(--radius); padding: 26px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.why:nth-child(4), .why:nth-child(5) { grid-column: span 3; }
.why::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--brand), var(--brand-2)); }
.why h3 { margin: 0 0 8px; font-size: 20px; } .why p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } .why, .why:nth-child(4), .why:nth-child(5) { grid-column: auto; } }

/* process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; counter-reset: st; position: relative; }
.step { counter-increment: st; position: relative; padding-top: 54px; }
.step::before { content: counter(st, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cobalt); color: var(--white); font-weight: 800; font-size: 14px; z-index: 1; }
.step::after { content: ""; position: absolute; top: 20px; left: 40px; right: -12px; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); }
.step:last-child::after { display: none; }
.step h3 { margin: 0 0 6px; font-size: 17px; } .step p { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 24px 58px; }
  .step::after { top: 40px; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--brand), transparent); }
  .step:last-child::after { display: none; }
}

/* platforms */
.plat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 28px; }
.plat { border: 1px solid var(--line); background: rgba(22,27,35,.6); border-radius: var(--radius); padding: 22px; }
.plat h3 { margin: 0 0 6px; font-size: 18px; } .plat p { margin: 0; font-size: 15px; }
.caps-table { border: 1px solid var(--line); background: rgba(16,19,24,.5); border-radius: var(--radius); overflow: hidden; }
.caps-table [role=row] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; }
.caps-table [role=row]:first-child { border-top: 0; }
.caps-table .ct-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.04); }
.caps-table [role=cell]:last-child { color: var(--ink-2); }

/* industries */
.legend { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-2); }
.legend .lab { margin-right: 6px; }
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ind { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ind h3 { margin: 0; font-size: 17px; } .ind p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ind-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-link { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--cobalt-deep); text-decoration: none; }
.ind-link:hover { text-decoration: underline; }

/* portfolio */
.pf-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.pf-select { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
select, input, textarea { font: inherit; }
.pf-select select, .field select, .field input, .field textarea { padding: 10px 12px; border-radius: 11px; max-width: 100%; }
.pf { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-list { display: flex; flex-direction: column; gap: 6px; max-height: 760px; overflow-y: auto; padding: 4px; border-radius: 16px; }
.pf-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 12px; cursor: pointer; color: var(--ink); }
/* demo tabs: the same tab language as .seg / .chip (navy when idle, brand blue when selected) in both themes;
   the selected state is also marked by aria-pressed, its ring and its glow, not by colour alone */
.pf-item:not([aria-pressed="true"]) { background: var(--navy); border-color: rgba(120,190,255,.32); }  /* outranks the blue-tile scope below */
.pf-item:not([aria-pressed="true"]):hover { background: var(--navy-hi); border-color: rgba(120,190,255,.6); }
/* selected: the brand bright blue, its top stop a shade deeper (#106CF2 vs #1677FF) so white 14px labels pass 4.5:1 */
.pf-item[aria-pressed="true"] { --ink-2: var(--white); --ink-3: var(--white); background: linear-gradient(180deg, #106CF2 0%, #0F66EC 55%, #0B5CD6 100%); border-color: rgba(170,198,255,.75); box-shadow: inset 0 0 0 1px rgba(170,198,255,.75), 0 0 12px rgba(22,119,255,.5); }
.pf-item[aria-pressed="true"] .pf-meta small { color: var(--white); }  /* 12px subtitle: 92% white falls under 4.5:1 on the blue */
.pf-item:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 2px; }
.pf-item img, .pf-mono { width: 34px; height: 34px; border-radius: 9px; }
.pf-mono { display: grid; place-items: center; background: var(--cobalt); color: var(--white); font-weight: 800; }
.pf-meta { display: grid; min-width: 0; } .pf-meta strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.pf-meta small { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-item .lab { font-size: 11px; }
.pf-detail { scroll-margin-top: 72px; }
.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,19,24,.1); }
.frame { background: #0B0E13; padding: 0 14px 0; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 0; color: #AEB8C8; font-size: 12px; }  /* the device frame stays dark in light mode */
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A3242; } .frame-bar i:first-child { background: var(--cobalt); } .frame-bar i:nth-child(2) { background: var(--blue-tint); } .frame-bar i:nth-child(3) { background: var(--cloud); }
.frame-bar span { margin-left: 10px; background: var(--obsidian-3); padding: 3px 12px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img, .frame-empty { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; }
.frame-empty { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; text-align: center; padding: 20px; }
.pf-body { padding: 22px 24px 24px; }
.pf-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pf-title h3 { margin: 0; font-size: 22px; }
.pf-ind { margin: 4px 0 10px; color: var(--ink-3); font-size: 14px; }
.pf-body p { color: var(--ink-2); }
.pf-body h4 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ticks, .sims, .dots { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 15px; color: var(--ink-2); }
.ticks li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 8px; }
.sims li::before { content: "◌"; color: var(--cobalt-deep); font-weight: 800; margin-right: 8px; }
.dots li::before { content: "→"; color: var(--cobalt-deep); font-weight: 800; margin-right: 8px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 860px) { .pf { grid-template-columns: 1fr; } .pf-list { max-height: 340px; border: 1px solid var(--line); background: var(--surface); } }

/* solution builder */
.sb { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }
.sb-col { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink-2); margin: 0; border: 0; padding: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: 8px; }
.field i { color: #FF8A8A; font-style: normal; }
.sb-caps { display: grid; gap: 6px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.check:has(input:checked) { border-color: var(--cobalt-deep); background: var(--cobalt-soft); }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.sb-out { min-height: 280px; background: var(--surface); border: 1px dashed rgba(120,190,255,.35); border-radius: 20px; padding: 26px; }
.sb-result h3 { margin: 0; font-size: 22px; }
.sb-rows { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.sb-rows li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.sb-rows li strong { color: var(--ink); }
.sb-rows li.have { border-left: 4px solid var(--ok); } .sb-rows li.build { border-left: 4px solid var(--cobalt); }
.sb-result a:not(.btn) { color: var(--cobalt-deep); font-weight: 700; }
@media (max-width: 860px) { .sb { grid-template-columns: 1fr; } }

/* customization */
.cz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: cz; }
.cz li { counter-increment: cz; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cz li::before { content: counter(cz); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 800; margin-bottom: 10px; }
/* numbered by position, not counter(): on phones the steps not shown are display:none and would not count */
.cz li:nth-child(1)::before { content: "1"; }
.cz li:nth-child(2)::before { content: "2"; }
.cz li:nth-child(3)::before { content: "3"; }
.cz li:nth-child(4)::before { content: "4"; }
.cz li:nth-child(5)::before { content: "5"; }
.cz h3 { margin: 0 0 6px; font-size: 17px; } .cz p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 1000px) { .cz { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* proof */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 4px; }
.proof strong { font-size: 44px; line-height: 1; letter-spacing: -.02em; background: linear-gradient(135deg, #0B5CD6, var(--cobalt) 55%, #0E9AD0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof span { color: var(--ink-2); font-size: 15px; }
.proof-note { margin: 22px 0 0; color: var(--ink-2); background: var(--surface); border-radius: 14px; padding: 16px 18px; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.quote blockquote { margin: 0 0 10px; font-size: 16px; } .quote figcaption { color: var(--ink-3); font-size: 14px; }
@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } .proof strong { font-size: 34px; } }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.contact-intro h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 12px; }
.contact-list, .foot-contact { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.contact-list li, .foot-contact li { display: grid; gap: 2px; }
.contact-list span, .foot-contact span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.contact-list a, .contact-list b, .foot-contact a, .foot-contact b { color: var(--white); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.inq { background: rgba(16,19,24,.72); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 14px; }
.inq .field { color: var(--ink-2); }
.inq .field input, .inq .field select, .inq .field textarea { width: 100%; }
.inq .field textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inq-err { margin: 0; color: #fca5a5; font-weight: 600; min-height: 0; } .inq-err:empty { display: none; }
.inq .inq-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.inq-sel { background: var(--cobalt-soft); border: 1px solid rgba(120,190,255,.3); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.linkbtn { font: inherit; background: none; border: 0; color: var(--blue-tint); text-decoration: underline; cursor: pointer; padding: 0; }
.inq button[type=submit] { justify-self: start; }
/* the prepared inquiry is a light Cloud panel: the one high-contrast "document" on the dark page */
.inq-result { background: var(--cloud); color: var(--obsidian); border-radius: 16px; padding: 20px; }
.inq-result h3 { color: var(--obsidian); margin: 0 0 6px; } .inq-result p { color: #3A4352; margin: 0 0 10px; }
.inq-result .btn-ghost { color: var(--obsidian); border-color: rgba(16,19,24,.18); background: var(--white); }
.inq-summary { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--white); border-radius: 10px; padding: 12px; font-size: 13px; max-height: 260px; overflow: auto; margin: 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: 20px; } .row2 { grid-template-columns: 1fr; } }

/* footer */
.site-foot { background: #0B0D11; border-top: 1px solid var(--line); color: var(--ink-3); padding: 56px 0 28px; font-size: 14px; }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-foot .brandmark { color: var(--white); }
.site-foot h2 { color: var(--white); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-foot nav a { color: var(--ink-2); text-decoration: none; } .site-foot nav a:hover { color: var(--white); text-decoration: underline; }
.foot-contact { margin-top: 0; }
.foot-demo, .foot-copy { max-width: 1180px; margin: 28px auto 0; padding: 0 20px; }
.foot-copy { margin-top: 10px; color: var(--ink-3); }
@media (max-width: 860px) { .foot-inner { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- scroll reveals: only hidden once site.js has confirmed it can reveal them ---------- */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print { .reveal-on .reveal { opacity: 1; transform: none; } .topnav { position: static; } }

@media (max-width: 560px) {
  .sec { padding: 60px 0; }
  .sec-inner, .topnav-inner, .foot-inner, .foot-demo, .foot-copy { padding-left: 16px; padding-right: 16px; }
  .sb-col, .sb-out, .inq { padding: 18px; }
  .pf-body { padding: 18px; }
}

/* ---------- portfolio at the top: intro + two featured demos + the rest ---------- */
.pf-top { padding: 48px 0 72px; background: radial-gradient(1000px 420px at 90% -10%, rgba(22,119,255,.16), transparent 60%), var(--tint); scroll-margin-top: 64px; }
.pf-head { max-width: 860px; margin-bottom: 28px; }
.pf-head .kicker { display: inline-flex; align-items: center; gap: 8px; }
.pf-head h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
.pf-head .sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); margin: 0 0 20px; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.pf-stats div { display: grid; } .pf-stats strong { font-size: 28px; line-height: 1.1; } .pf-stats span { color: var(--ink-3); font-size: 14px; }
.pf-pairbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pf-pair-h { margin: 0; font-size: 20px; } .pf-pair-h .muted { font-size: 15px; font-weight: 600; }
.pf-pair-nav { display: flex; gap: 8px; }
.pf-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pf-feat .pf-sum { margin: 0 0 10px; }
.frame-btn { display: block; width: 100%; border: 0; padding: 0 14px; font: inherit; text-align: left; cursor: zoom-in; }
.frame-btn:hover img { filter: brightness(1.06); }
.pf-more-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 36px 0 12px; }
.pf-more-head h2 { margin: 0; font-size: 20px; }
.pf-more-head .pf-filters { margin: 0; }
.pf-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.pf-catalog-link { margin: 18px 0 0; } .pf-catalog-link a { color: var(--cobalt-deep); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .pf-featured { grid-template-columns: 1fr; } }

/* ---------- larger preview dialog ---------- */
.pv { width: min(920px, calc(100% - 24px)); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-solid); color: var(--ink); overflow: auto; }
.pv::backdrop { background: rgba(8, 10, 13, .78); }
.pv .pf-card { border: 0; box-shadow: none; border-radius: 0; }
.pv-close-row { position: sticky; top: 0; height: 0; z-index: 2; display: flex; justify-content: flex-end; }
.pv-close { margin: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--cloud); color: var(--obsidian); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ---------- showroom catalog: two columns of wide, short landscape tiles ---------- */
#grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#grid .card { flex-direction: row; border-radius: 16px; min-height: 0; }
#grid .card.featured { grid-column: auto; }
#grid .card:hover { transform: translateY(-2px); }
#grid .thumb { flex: 0 0 42%; aspect-ratio: 16 / 10; align-self: stretch; min-height: 150px; }
#grid .thumb img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
#grid .thumb .flag, #grid .thumb .status { z-index: 2; pointer-events: none; font-size: 11px; }
#grid .thumb .status { top: auto; bottom: 8px; right: 8px; }
#grid .card.featured .featured-ribbon { top: 8px; left: 8px; transform: none; font-size: 11px; padding: 3px 8px; z-index: 3;
  max-width: calc(42% - 16px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#grid .card.featured .thumb .flag { top: 34px; }
.tile-open { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: zoom-in; }
.tile-open:focus-visible { outline-offset: -4px; }
#grid .body { padding: 12px 16px 14px; gap: 6px; min-width: 0; }
#grid .titlerow img { width: 28px; height: 28px; border-radius: 7px; }
#grid .titlerow h3 { font-size: 16px; }
#grid .titlerow .cat { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#grid .problem { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#grid .warn-note { display: none; }
#grid .actions { padding-top: 2px; }
#grid .launch { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.tile-preview { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.tile-preview:hover { border-color: var(--cobalt-deep); }
@media (max-width: 860px) { #grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  #grid .thumb { flex-basis: 36%; min-height: 120px; }
  #grid .body { padding: 10px 12px 12px; }
  #grid .problem { -webkit-line-clamp: 2; font-size: 13px; }
  #grid .launch, .tile-preview { padding: 7px 9px; font-size: 13px; }
  #grid .thumb .flag { display: none; }
  #grid .card.featured .featured-ribbon { max-width: calc(36% - 16px); }
}
.pf-more .pf-item { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; align-items: start; }
.pf-more .pf-item .lab { grid-column: 2; justify-self: start; }
.pf-more .pf-meta strong { font-size: 14px; }

/* ======== 2026-10-27 layout pass: portfolio list + one preview, showroom pair + 5-column catalog, shorter page ======== */
/* portfolio: thumbnail list on the left, one large preview */
.pf { grid-template-columns: 300px minmax(0, 1fr); }
.pf-list { max-height: 640px; }
.pf-list .pf-item { grid-template-columns: 76px minmax(0, 1fr); align-items: center; padding: 8px; }
.pf-list .pf-item img.pf-thumb { width: 76px; height: 48px; border-radius: 7px; object-fit: cover; object-position: top left; }
.pf-list .pf-item img:not(.pf-thumb), .pf-list .pf-mono { width: 48px; height: 48px; justify-self: center; }
.pf-list .pf-meta { gap: 2px; } .pf-list .pf-meta .lab { justify-self: start; font-size: 10.5px; padding: 1px 7px; }
.pf-detail .pf-card .frame img, .pf-detail .frame-empty { aspect-ratio: 16 / 8.5; }
@media (max-width: 860px) { .pf { grid-template-columns: 1fr; } .pf-list { max-height: 300px; } }

/* showroom: two featured demos, kept short */
.sr-pairbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.sr-pair-h, .sr-catalog-h { margin: 0; font-size: 18px; } .sr-pair-h .muted { font-size: 14px; font-weight: 600; }
.sr-pair-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sr-pair-ctl select { padding: 7px 10px; border-radius: 10px; max-width: 220px; font-size: 14px; }
.sr-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.sr-featured .pf-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); box-shadow: 0 10px 28px rgba(16,19,24,.08); }
.sr-featured .frame { padding: 0 10px; display: flex; flex-direction: column; }
.sr-featured .frame-bar { padding: 7px 0; }
.sr-featured .frame img, .sr-featured .frame-empty { aspect-ratio: auto; flex: 1; min-height: 150px; max-height: 210px; }
.sr-featured .pf-body { padding: 14px 16px; }
.sr-featured .pf-title h3 { font-size: 17px; }
.sr-featured .pf-ind { margin: 2px 0 6px; font-size: 12.5px; }
.sr-featured .pf-sum { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-featured .ticks, .sr-featured .warn-note, .sr-featured .pf-actions a.btn-outline { display: none; }
.sr-featured .pf-actions { margin-top: 10px; gap: 6px; }
.sr-featured .pf-actions .btn { padding: 7px 11px; font-size: 13px; }
.sr-catalog-h { margin: 0 0 10px; }
@media (max-width: 1100px) { .sr-featured { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sr-featured .pf-card { grid-template-columns: 1fr; } .sr-featured .frame img { max-height: 170px; } .sr-pair-ctl select { max-width: 100%; flex: 1 1 140px; } }

/* catalog: five columns of small landscape tiles (overrides the two-column pass above) */
#grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#grid .card { flex-direction: column; border-radius: 12px; }
#grid .thumb { flex: none; aspect-ratio: 16 / 7; min-height: 0; align-self: auto; }
#grid .thumb .flag { display: none; }
#grid .thumb .status { font-size: 10px; padding: 2px 7px; bottom: 6px; right: 6px; }
#grid .card.featured { border-width: 1px; }
#grid .card.featured .featured-ribbon { max-width: calc(100% - 16px); font-size: 10px; padding: 2px 7px; top: 6px; left: 6px; }
#grid .body { padding: 8px 10px 10px; gap: 5px; }
#grid .titlerow img, #grid .problem, #grid .warn-note { display: none; }
#grid .titlerow h3 { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#grid .titlerow .cat { font-size: 11.5px; }
#grid .actions { gap: 5px; padding-top: 0; }
#grid .launch, #grid .tile-preview { padding: 5px 7px; font-size: 12px; border-radius: 8px; }
#grid .running { font-size: 11px; }
@media (max-width: 1180px) { #grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { #grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 480px) {
  #grid .thumb { flex-basis: auto; min-height: 0; }
  #grid .body { padding: 7px 8px 8px; }
  #grid .card.featured .featured-ribbon { max-width: calc(100% - 12px); }
}

/* shorter page: tighter section rhythm and cards */
.sec { padding: 52px 0; }
.sec-head { margin-bottom: 22px; }
.sec-head h2, .contact-intro h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 8px; }
.sec-head .sub { font-size: 16px; }
.pf-top { padding: 30px 0 44px; }
.pf-head { margin-bottom: 18px; }
.pf-head h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 10px; }
.pf-head .sub { margin-bottom: 14px; }
.svc-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.svc { padding: 16px; } .svc .ico { width: 34px; height: 34px; font-size: 17px; margin-bottom: 8px; } .svc h3 { font-size: 16px; } .svc p { font-size: 14px; }
.why-grid { gap: 12px; } .why { padding: 18px; } .why h3 { font-size: 17px; } .why p { font-size: 15px; }
.step { padding-top: 48px; }
.plat-grid { gap: 12px; margin-bottom: 18px; } .plat { padding: 16px; }
.caps-table [role=row] { padding: 9px 16px; }
.ind-list { gap: 10px; } .ind { padding: 14px; gap: 6px; }
.cz { gap: 12px; } .cz li { padding: 16px; } .cz li::before { margin-bottom: 6px; }
.proof { padding: 18px; } .proof strong { font-size: 36px; } .proof-note { margin-top: 14px; }
.sb-col, .sb-out { padding: 18px; } .sb-out { min-height: 220px; }
.inq { padding: 22px; gap: 12px; }
.site-foot { padding: 40px 0 22px; }
.gallery { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 1000px) { .step { padding: 0 0 16px 58px; } }
@media (max-width: 560px) { .sec { padding: 38px 0; } .pf-top { padding: 22px 0 32px; } }
.sr-pair-ctl label { flex: 0 1 220px; min-width: 0; }
.sr-pair-ctl select { width: 100%; max-width: 100%; }
@media (max-width: 600px) { .sr-pair-ctl { width: 100%; } .sr-pair-ctl label { flex: 1 1 140px; } .sr-pair-ctl .btn { flex: 1 1 auto; } }
#grid .card { position: relative; }
#grid .running { position: absolute; z-index: 3; top: 6px; right: 6px; background: rgba(255,255,255,.94); padding: 1px 7px; border-radius: 999px; pointer-events: none; }
#grid .launch { white-space: nowrap; }
#grid .titlerow .cat { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { #grid .tile-preview { display: none; } #grid .launch { flex: 1; } }

/* 2026-10-28 hardening: reserve the portfolio's loaded height so the list arriving does not push the page down (CLS was 0.47). */
@media (min-width: 861px) { .pf { min-height: 600px; } .pf-list:has(> p.muted:only-child) { min-height: 560px; } }
/* WCAG AA: --ink-3 secondary text failed 4.5:1 (axe, e.g. the showroom pair label); use the darker secondary ink. */
.muted, .sr-pair-h .muted, .pf-pair-h .muted { color: var(--ink-2); }
/* AA contrast: result count (4.4:1 on #f5f6f8) and footer copyright (4.11:1 on the dark footer). */
#result-count { color: var(--ink-2); }
.foot-copy, .foot-copy * { color: var(--ink-3); }

/* ======== 2026-10-28 360 Apps brand pass: celestial background, logo, hero artwork, section figures ======== */
/* Living HUD background, light mode (Boss 2026-10-28). The HUD core is rebuilt from independent parts instead of one
   moving image: a fine grid with its own scroll parallax (hud-bg.js), a canvas where every circuit trace, node, data
   particle, axis light, moon, orbit comet and edge symbol runs on its own clock (hud-bg.js), and five SVG rings that each
   rotate at their own speed and direction, plus a breathing core. The stage is sized like background "cover" and pins
   the core to 50% / 46% of the viewport, the same mapping hud-bg.js uses, so rings and canvas always line up.
   Rings and core animate transform/opacity only (composited); the canvas is capped at 30 fps; reduced motion = still. */
body { background: var(--cloud); color: var(--ink); }
.hud-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 46%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    radial-gradient(45% 40% at 0% 0%, rgba(120,190,255,.16), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(19,200,245,.10), transparent 70%),
    linear-gradient(180deg, #F7F9FC 0%, #EEF3FB 100%); }
.hud-grid { position: absolute; inset: -44px 0; will-change: transform;
  background-image: linear-gradient(rgba(22,119,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(22,119,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 46%, transparent 18%, #000 60%); mask-image: radial-gradient(75% 70% at 50% 46%, transparent 18%, #000 60%); }
.hud-canvas { position: absolute; left: 0; top: 0; }
.hud-stage { position: absolute; left: 50%; top: 46%; width: max(100vw, 177.78vh); aspect-ratio: 16 / 9; transform: translate(-50%, -46%); }
.hud-ring { position: absolute; left: 50%; top: 46%; aspect-ratio: 1; will-change: transform;
  animation: hud-spin var(--spin, 120s) linear infinite; animation-direction: var(--dir, normal); }
.hud-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-ring circle { fill: none; stroke: rgba(22,119,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hud-ring .ticks { stroke: rgba(22,119,255,.22); stroke-dasharray: .6 4.4; stroke-width: 3; vector-effect: none; }
.hud-ring .dash-long { stroke: rgba(22,119,255,.2); stroke-dasharray: 34 10 4 10; }
.hud-ring .segments { stroke: rgba(22,119,255,.32); stroke-width: 4; stroke-dasharray: 7 3.5; vector-effect: none; }
.hud-ring .arc { stroke: rgba(19,200,245,.55); stroke-width: 1.6; stroke-dasharray: 16 84; }
.hud-ring .arc-2 { stroke: rgba(22,119,255,.4); stroke-dashoffset: 50; stroke-dasharray: 9 91; }
.hr-1 { width: 42%; margin: -21% 0 0 -21%; --spin: 240s; }
.hr-2 { width: 33%; margin: -16.5% 0 0 -16.5%; --spin: 170s; --dir: reverse; }
.hr-3 { width: 25%; margin: -12.5% 0 0 -12.5%; --spin: 70s; }
.hr-4 { width: 14%; margin: -7% 0 0 -7%; --spin: 48s; --dir: reverse; }
.hr-5 { width: 8%; margin: -4% 0 0 -4%; --spin: 26s; }
@keyframes hud-spin { to { transform: rotate(360deg); } }
.hud-core { position: absolute; left: 50%; top: 46%; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; }
.hud-core::before { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(22,119,255,.35), 0 0 18px 4px rgba(19,200,245,.45); }
.hud-core i { position: absolute; inset: 0; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(19,200,245,.38) 0%, rgba(22,119,255,.16) 35%, transparent 70%);
  animation: hud-breathe 5.5s ease-in-out infinite; }
@keyframes hud-breathe { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.hud-horizon { position: absolute; left: 25%; right: 25%; top: 84%; height: 10%; border-radius: 50%; will-change: opacity;
  background: radial-gradient(50% 50% at 50% 50%, rgba(19,200,245,.22), transparent 70%); animation: hud-glow 9s ease-in-out infinite alternate; }
@keyframes hud-glow { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 700px) { .hud-ring circle { stroke-opacity: .8; } .hud-grid { background-size: 36px 36px; } }
@media (prefers-reduced-motion: reduce) { .hud-ring, .hud-core i, .hud-horizon { animation: none !important; } }
@media print { .hud-bg { display: none; } }

/* logo: the supplied artwork, never re-typed; the text name stays for screen readers */
.brand-logo:has(img) { width: auto; height: 52px; border-radius: 0; background: none; overflow: visible; }
.brand-logo img { width: auto; height: 52px; object-fit: contain; }  /* explicit: a % height does not resolve in the grid cell */
@media (max-width: 560px) { .brand-logo:has(img), .brand-logo img { height: 40px; } }
.brandmark:has(img) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topnav-inner { padding-top: 7px; padding-bottom: 7px; }
.foot-logo { display: inline-block; }
.foot-logo img { display: block; height: 104px; width: auto; }

/* hero: a self-contained band under the nav showing the "Explore / Create / Evolve" artwork whole. The living page
   background shows around it; the band clips its own content (overflow hidden) and ends on a hairline, and content
   follows the nav's 1180px grid. Nothing is positioned outside the band, so the page flows on directly below it. */
.hero360 { position: relative; isolation: isolate; overflow: hidden; padding: 28px 0 40px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 75%, rgba(234,240,250,.7) 100%); }
.hero360-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hero360-art { margin: 0; border-radius: 22px; overflow: hidden; background: var(--obsidian); border: 1px solid rgba(120,190,255,.24);
  box-shadow: 0 18px 44px rgba(16,19,24,.18), 0 0 48px rgba(22,119,255,.16); }
.hero360-art img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; }
.hero360-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 0; }
.hero360-actions .btn { min-height: 46px; padding-left: 22px; padding-right: 22px; }
@media (max-width: 560px) {
  .hero360 { padding: 16px 0 28px; } .hero360-inner { padding: 0 16px; } .hero360-art { border-radius: 14px; }
  .hero360-actions .btn { flex: 1 1 140px; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

/* section artwork: header text beside a supporting image, stacked on narrow screens */
.brand-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; margin-bottom: 24px; }
.brand-split .sec-head { margin-bottom: 0; }
.brand-figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--obsidian-2); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(16,19,24,.14), 0 0 40px rgba(22,119,255,.1); }
.brand-figure img { display: block; width: 100%; height: auto; }
.contact-emblem { margin-bottom: 20px; }
@media (max-width: 860px) { .brand-split { grid-template-columns: 1fr; gap: 18px; } }

/* ================================================================ 2026-10-28 UX pass: solution builder, compact showroom, tabs, blue tiles */
/* Solution builder, progressive disclosure: (1) industry tabs, the same .tabgrid as the showroom; (2) per selected industry,
   its apps as tabs; (3) per selected app, its needs. Nothing below step 1 renders until it is chosen. */
.sb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: none; border: 0; padding: 0; box-shadow: none; }
.sb-step-h, .sb-group-h h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; font-size: 18px; }
.sb-step-h small, .sb-group-h small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sb-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800;
  background: var(--cobalt); color: var(--white); }
.sb .tabgrid { margin: 0; }
.sb-groups { display: grid; gap: 18px; }
.sb-groups:empty { display: none; }
.sb-group { display: grid; gap: 12px; padding: 2px 0 2px 16px; border-left: 3px solid var(--cobalt); }
.sb-group-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-group-h h3 { margin: 0; }
.sb-x { flex: none; font-weight: 700; color: var(--cobalt-deep); }
.sb-x:hover { color: var(--obsidian); }
/* app tabs: name on top, availability underneath, so names are not cut off by the label */
.sb .sb-apps .chip { height: auto; min-height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 14px; white-space: normal; }
.sb .sb-apps .chip-l { max-width: 100%; white-space: nowrap; }
.sb .sb-apps .chip { align-items: stretch; text-align: left; }
@media (max-width: 560px) { .sb .sb-cfg .sb-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb .sb-cfg .check { font-size: 13px; border-radius: 12px; align-items: flex-start; } .sb .sb-cfg .check input { margin-top: 2px; } }
.sb-apps .chip-n { font-size: 11.5px; }
.sb-cfg { display: grid; gap: 10px; border-radius: 16px; padding: 16px 18px; }
.sb-cfg .pf-title h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.sb-cfg > .small { margin: 0; }
.sb-cfg .sb-needs { margin: 0; }
.sb-cfg .sb-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-cfg .check { padding: 6px 11px 6px 9px; gap: 7px; border-radius: 999px; font-size: 14px; }
.sb-cfg .check input { width: 16px; height: 16px; accent-color: var(--white); }
.sb-cfg .pf-actions { margin: 0; gap: 6px; }
.sb-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sb-go-row[hidden] { display: none; }
.sb-go-row p { margin: 0; }
/* the outlines get their own bounded area: it scrolls inside, so selecting more apps never stretches the page */
.sb .sb-out, .sb .sb-out:has(.sb-result) { display: grid; gap: 14px; min-height: 0; max-height: min(72vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; background: none; border: 0; border-radius: 18px; box-shadow: none; padding: 0; }
.sb .sb-out[hidden] { display: none; }
.sb .sb-out:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.sb-result { border-radius: 18px; padding: 20px 22px; animation: none; }
.sb-result .sb-rows li { background: rgba(16,19,24,.16); border-color: rgba(255,255,255,.24); }
.sb-actions { margin-top: 14px; }
@media (max-width: 700px) {
  .sb-group { padding-left: 10px; }
  .sb-group-h { align-items: flex-start; }
  .sb-go-row .sb-go { width: 100%; }
  .sb-cfg, .sb-result { padding: 14px; }
  .sr-pair-ctl label { flex-basis: 100%; }
}

/* Blue tiles: on the light page, content tiles use the brand blue (--cobalt) instead of white so they stand apart.
   Same re-scoping idea as .sec-dark: tokens switch to light-on-blue, then the few hard-coded colours inside are mapped. */
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) { --surface: var(--cobalt); --surface-solid: var(--cobalt); --ink: var(--white); --ink-2: rgba(255,255,255,.92); --ink-3: rgba(255,255,255,.86);
  --line: rgba(255,255,255,.24); --ok: #BBF7D0; background: var(--cobalt); color: var(--ink); border-color: rgba(120,190,255,.55); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(h2, h3, h4, strong) { color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .kicker { color: rgba(255,255,255,.92); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) a:not(.btn) { color: var(--white); text-decoration: underline; }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :focus-visible { outline-color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.btn-dark, .btn-light) { background: var(--white); color: var(--cobalt-deep); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.btn-dark, .btn-light):hover { background: #E6EDFF; }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.btn-outline, .btn-ghost) { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.btn-outline, .btn-ghost):hover { background: rgba(255,255,255,.14); border-color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .btn-disabled { background: rgba(255,255,255,.16); color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.lab-dev, .lab-plan) { background: rgba(16,19,24,.3); color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .lab-sim { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.sims, .dots) li::before { color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .check { color: var(--white); border-color: rgba(255,255,255,.4); background: transparent; }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .check:has(input:checked) { background: rgba(16,19,24,.3); border-color: var(--white); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .sb-num { background: var(--white); color: var(--cobalt-deep); }
.svc .ico { color: var(--white); background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.why::before { background: linear-gradient(var(--white), var(--blue-tint)); }
.cz li::before { background: var(--white); color: var(--cobalt-deep); }
.proof strong { background: none; -webkit-text-fill-color: var(--white); color: var(--white); }
.pf-item:hover { border-color: var(--white); }
.pf-item[aria-pressed="true"] { border-color: var(--cobalt-deep); box-shadow: 0 0 0 2px var(--cobalt), 0 6px 18px rgba(22,119,255,.2); }

/* Showroom: industry tabs, then two demos at a time with Previous/Next (the full catalog list is gone) */
/* Showroom layout: heading left, compact status selector top-right, then an even grid of industry tabs */
.gallery-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 28px; margin-bottom: 22px; }
.gallery-head .seg { margin-top: 6px; flex-wrap: nowrap; }
.tabgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 26px; }
.tabgrid .chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 40px; padding: 0 14px; white-space: nowrap; text-align: left; }
.chip-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-n { flex: none; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.62); }
.chip[aria-pressed="true"] .chip-n { color: rgba(255,255,255,.85); }
.tabgrid .chip-more { justify-content: center; background: transparent; color: var(--cobalt-deep); border: 1px dashed rgba(22,119,255,.45); font-weight: 700; }
.tabgrid .chip-more:hover { background: var(--cobalt-soft); border-color: var(--cobalt-deep); color: var(--cobalt-deep); }
.gallery .sr-pairbar { margin-top: 0; }
@media (max-width: 1100px) { .tabgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tabgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gallery-head { grid-template-columns: 1fr; } .gallery-head .seg { justify-self: start; margin-top: 0; } }
@media (max-width: 560px) { .tabgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .tabgrid .chip { height: 38px; padding: 0 11px; font-size: 13px; }
  .gallery-head .seg { width: 100%; } .gallery-head .seg button { flex: 1; padding: 7px 6px; } }
.sr-pair-h #sr-ind-label { font-weight: 800; }
.sr-pair-ctl .btn:disabled { opacity: .45; cursor: default; }
.sr-featured { margin-bottom: 8px; align-items: stretch; }
.sr-featured .pf-card { height: 100%; }
@media (max-width: 1100px) and (min-width: 701px) { .sr-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-featured .pf-card { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sr-featured { grid-template-columns: 1fr; } }
/* subtle "more demos this way" cue on Next until the visitor pages once */
.sr-hint { position: relative; animation: srHint 2.8s ease-in-out infinite; }
@keyframes srHint { 0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(22,119,255,0); } 25% { box-shadow: 0 0 0 4px rgba(22,119,255,.18), 0 0 16px rgba(22,119,255,.28); border-color: var(--cobalt-deep); } }
@media (prefers-reduced-motion: reduce) { .sr-hint { animation: none; border-color: var(--cobalt-deep); } }

/* Tabs (availability segments + industry pills): deep navy with an electric-blue ring and white labels, so they keep
   their identity on the light page. Scoped to the tab controls only; the page, cards and other buttons are unchanged. */
.seg { background: #0F1A33; border: 1px solid rgba(120,190,255,.32); box-shadow: 0 0 0 1px rgba(22,119,255,.12), inset 0 1px 0 rgba(255,255,255,.05); }
.seg button { color: var(--white); background: transparent; }
.seg button:hover { background: rgba(120,190,255,.14); box-shadow: inset 0 0 0 1px rgba(120,190,255,.4); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, #1677FF, var(--cobalt)); color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(170,198,255,.75), 0 0 12px rgba(22,119,255,.6); }
.chip { background: #111C36; color: var(--white); border-color: rgba(120,190,255,.24); box-shadow: none; }
.chip:hover { background: #16264A; border-color: rgba(120,190,255,.6); }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #1677FF, var(--cobalt)); color: var(--white); border-color: var(--blue-tint);
  box-shadow: 0 0 0 1px rgba(120,190,255,.55), 0 0 16px rgba(22,119,255,.6); }
.chip .chip-n { color: inherit; }
:is(.chip, .seg button):focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; box-shadow: 0 0 0 1px var(--blue-tint), 0 0 14px rgba(22,119,255,.6); }

/* ================================================================ 2026-10-29 launch fix list (partner review)
   One light page in the #1677FF / #13C8F5 palette; ink logo only; real demo screenshots instead of artwork; content sits
   on near-opaque bands so the HUD rings and dotted lines only show faintly behind text; working demos first. */

/* 13. fewer all-caps labels: the remaining kickers are short sentence-case blue labels */
.kicker { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--cobalt-deep); }
.sec-head h2, .contact-intro h2, .pf-head h2 { color: var(--ink); }

/* 9. brand blue fills: buttons, selected tabs, the nav button and badges. The fill runs #1677FF -> #0B5CD6 so white
   text stays at AA contrast (flat #1677FF with white text measures 4.1:1). */
.btn-dark, .btn-light, .nav-links .nav-cta, .nav-cta-m, .sb-num, .step::before, .pf-mono { background: var(--blue-fill); color: var(--white); }
.btn-dark:hover, .btn-light:hover, .nav-links .nav-cta:hover, .nav-cta-m:hover { background: var(--cobalt-deep); color: var(--white); }
.nav-links .nav-cta[aria-current] { background: var(--blue-fill); }
.seg button[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--blue-fill); }
.btn-outline { color: var(--cobalt-deep); border-color: rgba(22,119,255,.45); background: rgba(255,255,255,.7); }
.btn-outline:hover { border-color: var(--cobalt-deep); background: var(--white); }
.btn-lg { min-height: 50px; padding: 13px 24px; font-size: 16px; }
.lab-cy { background: var(--cyan); color: var(--obsidian); }
#main .fx-grad { background: linear-gradient(100deg, #0B5CD6 0%, #1677FF 55%, #0E9AD0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-card, .sb-cfg, .sb-result) { background: var(--blue-fill); border-color: rgba(22,119,255,.5); }  /* demo tabs (.pf-item) have their own idle/selected fills */
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.btn-dark, .btn-light) { background: var(--white); color: var(--cobalt-deep); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.svc .ico { color: var(--obsidian); background: var(--cyan); box-shadow: none; }
.why::before { background: linear-gradient(var(--cyan), var(--white)); }

/* 8. content on clean space: every band below the hero is a near-opaque cloud panel, so the animated rings, orbit and
   dotted traces stay as a faint texture instead of running behind text and cards */
.sec { background: rgba(244,246,250,.94); position: relative; }
.sec-tint { background: rgba(236,242,251,.96); }
.pf-top { background: rgba(244,246,250,.94); }
.gallery { position: relative; box-shadow: 0 0 0 100vmax rgba(244,246,250,.94); clip-path: inset(0 -100vmax); }
.fx-aurora { display: none; }

/* navigation: "Book a call" beside the main button; on phones the main button stays visible next to Menu (16.) */
.nav-links .nav-book { color: var(--cobalt-deep); border: 1px solid rgba(22,119,255,.4); margin-left: 6px; }
.nav-links .nav-book:hover { background: var(--white); border-color: var(--cobalt-deep); color: var(--cobalt-deep); }
.nav-cta-m { display: none; margin-left: auto; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 981px) { .nav-links a { padding: 8px 8px; font-size: 13.5px; } }
@media (max-width: 980px) {
  .nav-cta-m { display: inline-block; }
  .nav-toggle { margin-left: 0; }
  .nav-links .nav-book { margin: 6px 0 0; text-align: center; }
}
@media (max-width: 400px) { .brand-logo:has(img), .brand-logo img { height: 34px; } .nav-cta-m { padding: 7px 9px; font-size: 13px; } .topnav-inner { gap: 8px; } }

/* hero: copy + calls to action on the left, three real working-demo screens on the right */
.hero360 { padding: 56px 0 60px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(244,246,250,.7)); }
.hero360-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: var(--white);
  border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.hero-copy h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 16px; }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); margin: 0 0 26px; max-width: 600px; }
.hero360-actions { justify-content: flex-start; margin: 0; }
.hero-more { margin: 16px 0 0; } .hero-more a { color: var(--cobalt-deep); font-weight: 700; text-decoration: none; } .hero-more a:hover { text-decoration: underline; }
/* hero showcase v4 (site-config.json heroShowcase, site.js renderHeroShowcase; Boss 2026-10-30).
   Larger screens (> 700px): the hero copy on top, then the showcase across the page (up to 1320px): the DESKTOP web
   previews in one editorial stagger (first = large feature card; the rest a 2 x 2 grid whose right column sits 3cqw
   lower, so the last card is the lowest; with 4 cards the 4th is centred on the bottom row and sits lower), then directly
   underneath a two-up PHONE carousel (scroll-snap track, Previous / Next, dots). Tapping a phone opens the larger phone
   view (.hs-zoom dialog). Web and phone never overlap. Every height is a fixed calc of the showcase width (cqw) and the
   placeholder in index.html (.hs-ph) uses the same calc, so nothing below moves when the images arrive.
   Phones (<= 700px): .hs-mshow = the desktop carousel (web large + its own phone in front) + the same two-up phone
   carousel (one phone + a peek of the next when two would be under 160px wide).
   Pulse (phones in view only): transform scale <= 1.02 + a soft blue glow, 3.2s; hover zoom <= 1.025 + glow; both off
   under reduced motion. Same navy chips in both themes (.hs-* is skipped by gen_dark_theme.py; text colours use tokens). */
.hero-shots { position: relative; container-type: inline-size; min-width: 0; }
.hero-or { white-space: nowrap; }
@media (min-width: 701px) {
  .hero360-inner.hs-wide { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hs-wide .hero-copy { max-width: 1060px; }
  .hs-wide .hero-shots { --hsw: min(1320px, calc(100vw - 48px)); width: var(--hsw); max-width: none; margin: 0 calc((100% - var(--hsw)) / 2); }
}
/* shared sizes (cqw = showcase width) */
.hero-shots { --dgap: 16px; --desk-b: calc(36.75cqw - 4px);
  --pgap: 28px; --ppad: 14px; --pw: min(230px, calc((100cqw - 28px - 28px) / 2)); --pcap: 54px;
  --ptrack: calc(var(--pw) * 2.0593 + var(--ppad) * 2 + 10px + var(--pcap));
  --pcar: calc(28px + var(--ptrack) + 70px + 38px);
  --credits: 28px; }
.hs-ph { height: calc(var(--desk-b) + var(--pcar) + var(--credits)); }
.hs-v4 ul { list-style: none; margin: 0; padding: 0; }
.hs-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-size: 11.5px; line-height: 1.4; font-weight: 700;
  letter-spacing: .01em; color: #FFFFFF; background: #0B1F44; border: 1px solid rgba(140,200,255,.38); }
.hs-rev { position: absolute; z-index: 2; top: 8px; left: 8px; background: #0B5CD6; border-color: #FFFFFF; }
/* desktop web previews: the editorial stagger */
.hs-desk { display: grid; gap: var(--dgap); grid-template-columns: 46cqw minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; height: var(--desk-b); align-content: start; }
.hs-dcard { position: relative; min-width: 0; border-radius: 12px; }
.hs-dcard:nth-child(1) { grid-row: 1 / span 2; grid-column: 1; }
.hs-v4[data-nd="5"] .hs-dcard:nth-child(3), .hs-v4[data-nd="5"] .hs-dcard:nth-child(5) { translate: 0 3cqw; }
.hs-v4[data-nd="4"] .hs-dcard:nth-child(4) { grid-column: 2 / span 2; justify-self: center; width: calc((100% - var(--dgap)) / 2); translate: 0 3cqw; }
.hs-v4[data-nd="3"] .hs-dcard:nth-child(3) { translate: 0 3cqw; }
.hs-dfig { position: relative; margin: 0; }
.hs-dshot { position: relative; border-radius: 12px; overflow: hidden; background: #0B111E; border: 1px solid rgba(120,190,255,.32);
  box-shadow: 0 14px 32px rgba(10,20,45,.20), 0 2px 6px rgba(10,20,45,.10); transition: box-shadow var(--ix-t, .18s); }
.hs-dshot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hs-dcap { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); }
.hs-dcap strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.hs-dcard:first-child .hs-dcap { font-size: 18px; height: 40px; margin-top: 12px; }
.hs-dcard:first-child .hs-dshot { border-radius: 16px; }
.hs-dcard:not(:first-child) .hs-dcap { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; pointer-events: none; font-size: 12px; }
.hs-dcard:not(:first-child) .hs-dcap strong { padding: 2px 9px; border-radius: 999px; color: #FFFFFF; background: rgba(11,17,30,.86); }
.hs-credits { margin: 10px 0 0; height: 18px; overflow: hidden; font-size: 11.5px; line-height: 18px; color: var(--ink-2); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.hs-credits a { color: inherit; text-decoration: underline; }
/* two-up phone carousel (scroll-snap) */
.hs-pc { margin-top: 28px; }
.hero-shots .hs-ptrack { position: relative; display: flex; gap: var(--pgap); height: var(--ptrack); box-sizing: border-box; padding: var(--ppad); margin: 0 auto; list-style: none;
  width: calc(var(--pw) * 2 + var(--pgap) + var(--ppad) * 2); max-width: 100%;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ppad); overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hs-ptrack::-webkit-scrollbar { display: none; }
.hs-pslide { flex: 0 0 var(--pw); width: var(--pw); scroll-snap-align: start; border-radius: 18px; }
.hs-pfig { position: relative; margin: 0; }
.hs-pbtn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; }
/* v4c: "Tap to enlarge" badge, so the phones read as clickable. Icon always shown; the words show on hover/focus with a mouse
   and all the time on touch screens. Primary blue (white text 5.97:1) with a white ring; sits in the track padding (no CLS). */
.hs-enl { position: absolute; top: -5px; right: -5px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 8px;
  border-radius: 999px; background: var(--cobalt-hi); color: var(--white); font-size: 11.5px; font-weight: 800; line-height: 1; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--white), 0 4px 10px rgba(10,20,45,.35); pointer-events: none; }
.hs-enl-ic { font-size: 15px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .hs-enl { padding: 0 7px; }
  .hs-enl-tx { display: none; }
  .hs-pbtn:hover .hs-enl, .hs-pbtn:focus-visible .hs-enl { padding: 0 9px 0 8px; }
  .hs-pbtn:hover .hs-enl-tx, .hs-pbtn:focus-visible .hs-enl-tx { display: inline; }
}
.hs-pbtn:focus-visible { outline: 3px solid #0B5CD6; outline-offset: 4px; }
html[data-theme="dark"] .hs-pbtn:focus-visible { outline-color: #8CC8FF; }
.hs-pcap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; height: var(--pcap); margin-top: 10px; font-size: 12.5px; color: var(--ink); text-align: center; }
.hs-pcap strong { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-weight: 800; }
.hs-pcap .hs-chip { font-size: 11px; }
.hs-concept .hs-pcap .hs-chip { background: #FFFFFF; color: #0B4FB8; border: 1px dashed #0B5CD6; }
.hs-phone-frame { position: relative; padding: 4.5%; border-radius: 16% / 7.4%; background: linear-gradient(160deg, #1D2738, #0A0E16);
  border: 1px solid rgba(160,200,255,.40); box-shadow: 0 14px 30px rgba(10,20,45,.30), 0 0 0 rgba(22,119,255,0); transform-origin: 50% 50%; }
.hs-phone-screen { border-radius: 12% / 5.5%; overflow: hidden; background: #000; }
.hs-phone-screen img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; }
.hs-pslide.is-vis .hs-phone-frame, .hs-view > figure.is-on .hs-phone-frame { animation: hs-pulse 3.2s ease-in-out infinite; }
@keyframes hs-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 30px rgba(10,20,45,.30), 0 0 0 rgba(22,119,255,0); }
  50% { transform: scale(1.02); box-shadow: 0 14px 30px rgba(10,20,45,.30), 0 0 22px rgba(22,119,255,.45); }
}
/* hover: zoom <= 1.025 (shared .ix-tile rule on desktop cards) + blue glow */
@media (hover: hover) and (pointer: fine) {
  .hs-dcard:hover .hs-dshot { box-shadow: var(--ix-glow); }
  .hs-pbtn:hover .hs-phone-frame { box-shadow: var(--ix-glow); }
}
/* carousel controls (shared by both phone carousels, the desktop carousel on phones and the larger view) */
.hs-mshow { display: none; }
.hs-view { position: relative; touch-action: pan-y; margin: 0 auto; }
#hs-view { height: calc(100cqw * .97); }
.hs-view > figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateX(18px) scale(.98);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.hs-view > figure.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.hs-ms-web { position: absolute; left: 0; top: 0; width: 100%; border-radius: 12px; overflow: hidden; background: #0B111E;
  border: 1px solid rgba(120,190,255,.32); box-shadow: 0 12px 28px rgba(10,20,45,.22); }
.hs-ms-web img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hs-ms-tag { position: absolute; top: 8px; left: 8px; }
.hs-ms-phone { position: absolute; right: 3%; top: 26%; width: 34%; z-index: 2; }
.hs-ms-ptag { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 50%); z-index: 3; }
.hs-mhead { margin: 22px 0 10px; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); height: 22px; line-height: 22px; }
.hs-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 14px auto 0; padding: 6px 8px;
  max-width: 420px; height: 56px; box-sizing: border-box; border-radius: 14px; background: var(--navy, #0B1F44); border: 1px solid rgba(120,190,255,.28); color: #FFFFFF; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(143,227,250,.5); background: rgba(255,255,255,.06); color: #FFFFFF; font: inherit; font-size: 20px; font-weight: 700; }
.hs-btn:hover { background: rgba(143,227,250,.16); border-color: #8FE3FA; }
.hs-btn:focus-visible, .hs-dot:focus-visible { outline: 3px solid #8FE3FA; outline-offset: 2px; }
.hs-btn[hidden] { visibility: hidden; display: inline-flex; }
.hs-status { grid-column: 2; margin: 0; min-width: 0; text-align: center; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hs-name { font-size: 14px; font-weight: 800; letter-spacing: .01em; color: #FFFFFF; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-name a { color: #FFFFFF; }
.hs-label { font-size: 12px; font-weight: 600; color: #DCE4F0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-pos { font-size: 12px; font-weight: 700; color: #C9D6EA; font-variant-numeric: tabular-nums; }
.hs-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 0; height: 32px; }
.hs-dots[hidden] { display: flex; visibility: hidden; }
.hs-dot { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.hs-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px;
  background: transparent; border: 2px solid #4E5D78; box-sizing: border-box; }
.hs-dot[aria-current="true"]::before { width: 22px; margin-left: -11px; background: #0B5CD6; border-color: #0B5CD6; }
html[data-theme="dark"] .hs-dot::before { border-color: #A3AEC0; }
html[data-theme="dark"] .hs-dot[aria-current="true"]::before { background: #8CC8FF; border-color: #8CC8FF; }
html[data-theme="dark"] .hs-concept .hs-pcap .hs-chip { background: #0B1F44; color: #CFE6FF; border-color: #8CC8FF; }
/* the larger phone view (dialog): fits a 360px-wide screen, page behind does not scroll */
html.hs-noscroll, html.hs-noscroll body { overflow: hidden; }
.hs-zoom { padding: 0; margin: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: transparent; color: #FFFFFF; overflow: auto; overscroll-behavior: contain; }
.hs-zoom::backdrop { background: rgba(5, 10, 22, .82); }
.hs-zbox { --zw: min(340px, calc(100vw - 32px), calc((100vh - 230px) / 2.0593)); box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 16px; }
@supports (height: 100dvh) { .hs-zbox { --zw: min(340px, calc(100vw - 32px), calc((100dvh - 230px) / 2.0593)); } }
.hs-zhead { width: var(--zw); min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hs-ztitle { margin: 0; min-width: 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-zclose { flex: none; font-size: 24px; background: rgba(11,31,68,.9); }
.hs-zframe { width: var(--zw); box-sizing: border-box; touch-action: pan-y; box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(22,119,255,.35); }
.hs-zbar { width: var(--zw); max-width: none; margin: 0; }
.hs-zstatus { gap: 4px; }
.hs-zoom .hs-dots { margin: 0; flex-wrap: wrap; }
.hs-zoom .hs-dot::before { border-color: #A3AEC0; }
.hs-zoom .hs-dot[aria-current="true"]::before { background: #8CC8FF; border-color: #8CC8FF; }
@media (prefers-reduced-motion: reduce) {
  .hs-phone-frame, .hs-pslide.is-vis .hs-phone-frame, .hs-view > figure.is-on .hs-phone-frame { animation: none; }
  .hs-view > figure, .hs-view > figure.is-on { transition: none; transform: none; }
  .hs-dshot { transition: none; }
  .hs-ptrack { scroll-behavior: auto; }
}
@media (max-width: 900px) {
  .hero360 { padding: 32px 0 36px; }
  .hero360-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-shots { --dgap: 10px; --pw: min(220px, calc((100cqw - 28px - 28px) / 2)); --credits: 46px; }
  .hs-credits { white-space: normal; height: 36px; }
  .hs-dcard:first-child .hs-dcap { font-size: 15px; }
}
@media (max-width: 700px) {
  .hs-v4 { display: none; }
  .hs-mshow { display: block; }
  .hero-shots { --pgap: 12px; --ppad: 6px; --pw: calc((100cqw - 12px - 12px) / 2); --credits: 66px; }
  .hs-pc { margin-top: 0; }
  .hero-shots .hs-ptrack { width: 100%; }
  .hs-credits { height: 54px; margin-top: 12px; }
  /* the one project carousel (Boss 2026-10-30: no second phone carousel on phones): .97W + bar 70 + dots 38; credits */
  .hs-ph { height: calc(100cqw * .97 + 108px + var(--credits)); }
}
/* two phones only while each stays >= 160px wide; otherwise one phone + a peek of the next */
@container (max-width: 343px) {
  .hs-ph, .hs-mshow { --pw: 74cqw; --ptrack: calc(var(--pw) * 2.0593 + var(--ppad) * 2 + 10px + var(--pcap)); }
}
@media (max-width: 560px) {
  .hero360-actions .btn { flex: 1 1 100%; }
}

/* 6. + 15. real screenshots: browser-framed, larger and clearer than the old thumbnails */
.shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid rgba(16,19,24,.1);
  box-shadow: 0 18px 44px rgba(16,19,24,.16); }
.shot-bar { display: flex; gap: 5px; padding: 7px 10px; background: #EEF2F8; border-bottom: 1px solid rgba(16,19,24,.06); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #CBD3E0; } .shot-bar i:first-child { background: var(--cobalt); } .shot-bar i:nth-child(2) { background: var(--cyan); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 9.6; object-fit: cover; object-position: top left; }
.shot figcaption { padding: 8px 12px 10px; font-size: 13px; color: var(--ink-2); border-top: 1px solid rgba(16,19,24,.06); }
.shot figcaption strong { color: var(--ink); }
.shot-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shot-mosaic .shot { box-shadow: 0 10px 26px rgba(16,19,24,.12); }
.shot-mosaic.shot-single { grid-template-columns: 1fr; }

/* portfolio: bigger list thumbnails and a taller preview */
.pf { grid-template-columns: 360px minmax(0, 1fr); }
.pf-list .pf-item { grid-template-columns: 120px minmax(0, 1fr); padding: 8px; }
.pf-list .pf-item img.pf-thumb { width: 120px; height: 72px; border-radius: 8px; }
.pf-list { max-height: 700px; }
@media (max-width: 860px) { .pf { grid-template-columns: 1fr; } .pf-list .pf-item { grid-template-columns: 96px minmax(0, 1fr); } .pf-list .pf-item img.pf-thumb { width: 96px; height: 58px; } }
/* showroom: larger screenshots in the featured pair */
.sr-featured .frame img, .sr-featured .frame-empty { max-height: 300px; min-height: 200px; }
@media (max-width: 600px) { .sr-featured .frame img { max-height: 230px; } }

/* 7. platforms diagram + capabilities table, light */
#platforms .fx-sys { border: 1px solid var(--line); background: radial-gradient(520px 260px at 50% 50%, rgba(19,200,245,.10), transparent 70%), var(--white); }
#platforms .fx-sys::before { display: none; }
#platforms .fx-sys .ln { stroke: rgba(22,119,255,.28); }
#platforms .fx-sys .pk { stroke: var(--cobalt); } #platforms .fx-sys .pk:nth-of-type(2n) { stroke: var(--cyan); }
#platforms .fx-node { background: var(--white); color: var(--ink-2); border-color: rgba(22,119,255,.22); box-shadow: 0 8px 24px rgba(16,19,24,.08); }
#platforms .fx-node strong { color: var(--ink); } #platforms .fx-node small { color: var(--ink-2); }
#platforms .fx-core { background: var(--blue-fill); border-color: transparent; box-shadow: 0 10px 30px rgba(22,119,255,.3); }
#platforms .fx-core strong, #platforms .fx-core small { color: var(--white); }
#platforms .fx-core::before { border-color: rgba(22,119,255,.4); }
#platforms .fx-sys-legend { color: var(--ink-2); }
.caps-table { background: var(--white); border-color: var(--line); }
.caps-table [role=row] { border-top-color: rgba(16,19,24,.07); }
.caps-table .ct-head { background: #EEF2F8; color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 13px; }

/* 10. AI agents */
.agents { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px; align-items: start; }
.agents .sec-head { margin-bottom: 0; }
.agent-rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); }
.agent-rules li { padding-left: 26px; position: relative; } .agent-rules li::before { content: "✓"; position: absolute; left: 0; color: var(--cobalt-deep); font-weight: 800; }
.agent-rules strong { color: var(--ink); }
.agent-demo { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: 0 18px 44px rgba(16,19,24,.1); }
.agent-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(16,19,24,.08); }
.agent-head > div { flex: 1; display: grid; } .agent-head small { color: var(--ink-2); }
.agent-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-fill); color: var(--white); font-size: 18px; }
.agent-steps { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 0; }
.agent-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; position: relative; }
.agent-steps li + li { border-top: 1px dashed rgba(16,19,24,.1); }
.agent-t { font-size: 13px; font-weight: 700; color: var(--cobalt-deep); padding-top: 2px; }
.agent-steps strong { display: block; color: var(--ink); } .agent-steps p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.agent-wait { background: rgba(19,200,245,.1); border-radius: 12px; padding-left: 8px !important; padding-right: 8px !important; }
.agent-demo figcaption { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .agents { grid-template-columns: 1fr; gap: 22px; } }

/* 11. pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.price { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; }
.price h3 { margin: 0 0 6px; font-size: 18px; }
.price-range { margin: 0; font-size: 24px; font-weight: 800; color: var(--cobalt-deep); letter-spacing: -.01em; }
.price-time { margin: 2px 0 12px; font-size: 14px; color: var(--ink-2); }
.price .ticks { font-size: 14.5px; }
.price-pop { border: 2px solid var(--cobalt); box-shadow: 0 14px 36px rgba(22,119,255,.18); }
.price-note { margin: 16px 0 0; color: var(--ink-2); } .price-note a { color: var(--cobalt-deep); font-weight: 700; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

/* 7. inquiry, light: white form card, ink logo, readable notes */
.contact-logo { display: block; height: 72px; width: auto; margin: 0 0 18px; }
.contact-intro p { color: var(--ink-2); }
.contact-list span, .foot-contact span { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 13px; }
.contact-list a, .contact-list b, .foot-contact a, .foot-contact b { color: var(--cobalt-deep); }
.inq { background: var(--white); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(16,19,24,.08); }
.inq .field { color: var(--ink); }

.field i { color: #C2410C; }
.inq-err { color: #B91C1C; }
.inq .inq-note { color: var(--ink-2); } .inq .inq-note a { color: var(--cobalt-deep); }
.inq-sel { color: var(--ink); background: rgba(22,119,255,.08); border-color: rgba(22,119,255,.25); }
.linkbtn { color: var(--cobalt-deep); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inq.inq-done > :not(.inq-result) { display: none; }
.inq-result { background: #ECFDF5; border: 1px solid #A7F3D0; }
.inq-result h3 { color: #065F46; } .inq-result p { color: var(--ink-2); }
.inq-result.inq-fail { background: #FEF2F2; border-color: #FECACA; } .inq-result.inq-fail h3 { color: #991B1B; }
.inq-result a:not(.btn) { color: var(--cobalt-deep); font-weight: 700; }

/* 7. footer, light: same ink logo as the header */
.site-foot { background: var(--white); border-top: 1px solid var(--line); color: var(--ink-2); }
.site-foot .brandmark { color: var(--ink); }
.site-foot h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 15px; }
.site-foot nav a { color: var(--ink-2); } .site-foot nav a:hover { color: var(--cobalt-deep); }
.foot-logo img { height: 64px; }
.foot-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.foot-copy, .foot-copy * { color: var(--ink-2); } .foot-copy a { color: var(--cobalt-deep); }
.demo-pill { background: var(--cyan); color: var(--obsidian); }

/* 14. readable secondary text: nothing lighter than the darker --ink-2 on light panels */
.pf-meta small, .pf-ind, .sb-step-h small, .sb-group-h small, .pf-stats span, .proof span { color: var(--ink-2); }
:is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) :is(.pf-meta small, .pf-ind, .proof span) { color: rgba(255,255,255,.92); }

/* 12. + 18. sub-pages: partners, privacy, terms (same header logo, light, no animated background) */
.subpage { background: var(--cloud); }
.subpage .nav-links-sub { display: flex; position: static; flex-direction: row; box-shadow: none; padding: 0; border: 0; background: none; }
@media (max-width: 980px) { .subpage .nav-links-sub { display: none; } }
.page-narrow { max-width: 900px; }
.page-h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
.page-lede { font-size: 18px; color: var(--ink-2); margin: 0 0 28px; }
.page-h2 { font-size: 24px; margin: 36px 0 14px; }
.partner-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.partner-ways h2 { font-size: 18px; margin: 0 0 8px; } .partner-ways p { margin: 0; color: var(--ink-2); }
.page-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-consent { font-size: 14px; } .partner-consent i { color: #C2410C; font-style: normal; }
.partner-consent:has(input[aria-invalid="true"]) { border-color: var(--field-error); }
@media (max-width: 760px) { .partner-ways, .page-steps { grid-template-columns: 1fr; } }
.legal h2 { font-size: 20px; margin: 28px 0 8px; } .legal p { color: var(--ink-2); max-width: 70ch; } .legal a { color: var(--cobalt-deep); }
.draft-banner { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: rgba(19,200,245,.14); border: 1px solid rgba(19,200,245,.5); color: var(--ink); }
.draft-banner a { color: var(--cobalt-deep); font-weight: 700; }
.site-foot-sub { padding: 22px 0; } .site-foot-sub .foot-copy { margin-top: 0; }

/* ================================================================ 2026-10-29 (pass 2): animated background restored
   Regression cause: the fix-list pass above gave every section a 94-96% opaque cloud band (.sec, .sec-tint, .pf-top, and a
   full-width box-shadow on .gallery), which hid the HUD background almost completely below the hero. Sections are now
   light translucent washes, so the moving background shows across the whole page; text stays on cards or on a wash.
   The rings and grid are drawn stronger to match the brighter canvas (hud-bg.js BOOST). */
.hero360 { background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(244,246,250,.18)); }
.sec, .pf-top { background: rgba(246,248,252,.40); }
.sec-tint { background: rgba(232,240,252,.50); }
.gallery { box-shadow: 0 0 0 100vmax rgba(246,248,252,.40); }
/* readability: a soft white wash behind section headings, faded at the edges (no hard white panel) */
.sec-head, .pf-head, .gallery-head > div:first-child, .contact-intro { position: relative; isolation: isolate; }
.sec-head::before, .pf-head::before, .gallery-head > div:first-child::before, .contact-intro::before { content: ""; position: absolute; z-index: -1; inset: -16px -16px;
  border-radius: 28px; background: radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,.38) 70%, transparent); pointer-events: none; }
@media (max-width: 860px) { .sec-head::before, .pf-head::before, .gallery-head > div:first-child::before, .contact-intro::before { inset: -10px -8px; } }
/* content cards keep a light glass finish so the motion reads through their edges */
#platforms .fx-sys { background: radial-gradient(520px 260px at 50% 50%, rgba(19,200,245,.10), transparent 70%), rgba(255,255,255,.62); }
.caps-table, .price, .agent-demo, .inq { background: rgba(255,255,255,.90); }
/* rings and grid are drawn on the canvas now (hud-bg.js); the old .hud-ring/.hud-grid rules above no longer match anything */
.hud-core i { background: radial-gradient(circle, rgba(19,200,245,.55) 0%, rgba(22,119,255,.24) 35%, transparent 70%); }
.hud-horizon { background: radial-gradient(50% 50% at 50% 50%, rgba(19,200,245,.34), transparent 70%); }

/* ================================================================ 2026-10-29 (pass 2): agents showcase, products, blue diagram */
/* apps vs agents */
.app-vs-agent { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; margin: 0 0 30px;
  padding: 18px 22px; border-radius: 18px; background: rgba(255,255,255,.88); border: 1px solid rgba(22,119,255,.28); box-shadow: 0 10px 28px rgba(16,19,24,.06); }
.app-vs-agent strong { font-size: 17px; color: var(--ink); } .app-vs-agent p { margin: 4px 0 0; color: var(--ink-2); }
.avs-sep { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-fill); color: var(--white); font-size: 22px; font-weight: 800; }
@media (max-width: 700px) { .app-vs-agent { grid-template-columns: 1fr; text-align: left; } .avs-sep { justify-self: start; } }
.agents-sub { font-size: 22px; margin: 0 0 14px; }

/* agent cards */
.agent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.agent-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.92);
  border: 1px solid rgba(22,119,255,.22); box-shadow: 0 12px 30px rgba(16,19,24,.07); }
.agent-card-h { display: flex; align-items: center; gap: 12px; } .agent-card-h h3 { margin: 0; font-size: 18px; }
.agent-purpose { margin: 0; color: var(--ink-2); }
.agent-benefits { font-size: 14.5px; }
.agent-convo { background: #F2F6FD; border: 1px solid rgba(22,119,255,.14); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.agent-convo-h { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.msg { margin: 0; padding: 6px 10px; border-radius: 10px; max-width: 94%; color: var(--ink); }
.msg b { font-weight: 700; }
.msg-c { background: var(--white); border: 1px solid rgba(16,19,24,.08); justify-self: start; }
.msg-a { background: rgba(22,119,255,.12); justify-self: end; }
.msg-n { background: rgba(19,200,245,.16); justify-self: stretch; font-style: italic; }
.agent-price { margin: auto 0 0; padding-top: 6px; color: var(--ink-2); font-size: 14.5px; } .agent-price strong { color: var(--cobalt-deep); font-size: 16px; }
.agent-ctas { margin-top: 2px; }
.agent-multi { background: var(--blue-fill); border-color: transparent; color: var(--white); }
.agent-multi h3, .agent-multi .agent-purpose, .agent-multi .agent-price, .agent-multi .agent-price strong { color: var(--white); }
.agent-multi .agent-ico { background: var(--white); color: var(--cobalt-deep); }
.agent-multi .btn-dark { background: var(--white); color: var(--cobalt-deep); }
.agent-multi .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.agent-chain { margin: 0; padding: 0; list-style: none; counter-reset: ch; display: grid; gap: 6px; }
.agent-chain li { counter-increment: ch; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.14); }
.agent-chain li::before { content: counter(ch); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan); color: var(--obsidian); font-weight: 800; font-size: 13px; }
.agents-example { margin-top: 8px; }
@media (max-width: 1050px) { .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .agent-grid { grid-template-columns: 1fr; } }

/* products and pricing */
.price-kind { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--cobalt-deep); }
.price-range small { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.price-range-text { font-size: 21px; }
.price-desc { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; } .price-desc a { color: var(--cobalt-deep); font-weight: 700; }
.price-alt { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(19,200,245,.12); font-size: 14px; color: var(--ink); }
.price-alt span { color: var(--ink-2); }
.price-cta { margin-top: auto; align-self: flex-start; }

/* "One product, every screen": every component blue, interactive. Hover, keyboard focus and tap (focus) share one state:
   a slight scale-up (the individual `scale` property, so the nodes' translate(-50%,-50%) positioning is untouched),
   a deeper blue, a blue glow, and a gentle pulse while the state lasts. Reduced motion keeps the colour change only. */
#platforms .fx-node { background: linear-gradient(180deg, #1A7BFF, #0F66EC); border: 1px solid rgba(255,255,255,.28); color: var(--white);
  box-shadow: 0 8px 22px rgba(22,119,255,.25); cursor: default; outline: none;
  transition: scale .28s var(--fx-ease), background-color .28s ease, box-shadow .28s ease, filter .28s ease; }
#platforms .fx-node strong { color: var(--white); } #platforms .fx-node small { color: rgba(255,255,255,.92); }
#platforms .fx-core { background: linear-gradient(180deg, #0F62E0, #0A4FBF); border-color: rgba(255,255,255,.4); box-shadow: 0 12px 34px rgba(22,119,255,.4); }
#platforms .fx-node .st { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
#platforms .fx-sys .ln { stroke: rgba(22,119,255,.45); stroke-width: 2; }
#platforms .fx-node:is(:hover, :focus-visible, :active) { z-index: 3; scale: 1.06; filter: saturate(1.15) brightness(.94);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 22px rgba(22,119,255,.55), 0 14px 32px rgba(22,119,255,.35);
  animation: fxNodePulse 1.8s ease-in-out .3s infinite; }
#platforms .fx-node:focus-visible { box-shadow: 0 0 0 3px var(--obsidian), 0 0 0 5px var(--white), 0 0 22px rgba(22,119,255,.55); }
@keyframes fxNodePulse { 0%, 100% { scale: 1.06; } 50% { scale: 1.085; } }
#platforms .fx-sys { overflow: visible; }  /* enlarged nodes are never clipped by the panel edge */
@media (prefers-reduced-motion: reduce) {
  #platforms .fx-node { transition: background-color .01s, box-shadow .01s; }
  #platforms .fx-node:is(:hover, :focus-visible, :active) { scale: none; animation: none; }
}

/* readability over the restored background: faint glass behind the hero copy and the process steps (no opaque panels) */
.hero-copy, .steps { position: relative; isolation: isolate; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -16px -16px; border-radius: 28px; pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,.4) 72%, transparent); }
.steps { padding: 14px; margin: 0 -14px; border-radius: 20px; background: rgba(255,255,255,.48); }
@media (max-width: 860px) { .hero-copy::before { inset: -10px -8px; } .steps { margin: 0; } }

/* 2026-10-29 responsive pass: notched phones (viewport-fit=cover) and touch targets.
   Safe areas: the sticky bar, sections and footer keep their content clear of the notch / rounded corners in landscape. */
.topnav-inner, .sec-inner, .foot-inner { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.site-foot { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }  /* 22px = the compact footer padding above */
/* touch screens: stand-alone links and small controls get a 44 px tall hit area (spacing between them unchanged) */
@media (pointer: coarse) {
  .hero-more a, .pf-catalog-link a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .foot-inner nav a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .seg button { min-height: 44px; }
  .theme-switch button { min-width: 44px; min-height: 44px; }
}
/* sub-pages on phones: logo, theme switch and "Start a project" share one row */
@media (max-width: 980px) {
  .subpage .theme-switch button { min-width: 38px; min-height: 38px; padding: 4px 6px; }
}
@media (max-width: 480px) { .subpage .topnav .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 360px) { .subpage .theme-switch button { min-width: 34px; min-height: 34px; padding: 3px 4px; } }  /* 34 px: still over the 24 px WCAG 2.5.8 minimum */

/* 2026-10-29 interactive demos: "Run demo" cards in the showroom and portfolio, hero entry */
.lab-run { background: var(--cobalt-hi); color: var(--white); box-shadow: inset 0 0 0 1px var(--cobalt); }  /* primary blue (v4c): --cobalt-hi is the primary fill's text stop, white 5.97:1; --cobalt edge 4.2:1 on navy */
.pf-run-note { font-size: 14px; color: var(--ink-2); margin: 0 0 4px; }
.hero-more .hero-try { font-weight: 800; }
.hero-more .hero-or { color: var(--ink-2); margin-left: 4px; }
@media (max-width: 520px) { .hero-more .hero-or { display: block; margin: 6px 0 0; } }

/* Working demos: the app summary tile (#pf-detail, the showroom pair and the larger preview) is the same dark navy as the
   idle demo tabs, in both themes. Run demo is white with navy text; Larger preview and Ask about this solution are light
   blue with navy text. article.pf-card outranks the blue-tile :is(...) scope above (which is .cz li, i.e. 0,1,1). */
article.pf-card { --surface: var(--navy); --surface-solid: var(--navy); background: var(--navy); border-color: rgba(120,190,255,.32); }
article.pf-card .pf-actions .btn-dark { background: var(--white); color: var(--navy); border-color: var(--white); }
article.pf-card .pf-actions .btn-dark:hover { background: #E6EDFF; border-color: #E6EDFF; }
/* Larger preview / Ask about this solution (v4c, Boss 2026-10-30): the site's PRIMARY button blue. The main CTAs (.btn-dark,
   .nav-cta) use --blue-fill (#1677FF -> #0B5CD6) and hover to --cobalt-deep = --cobalt-hi (#0B5CD6); these smaller controls use
   that primary's AA text shade --cobalt-hi as a flat fill (white 5.97:1 everywhere on the button; the gradient's top stop
   would be 4.1:1). Tokens only. Border = solid --cobalt (#1677FF, 4.2:1 on the navy tile; replaces the lighter
   #1677FF-at-45% edge). Hover = --cobalt edge ring + soft glow; pressed = inset shade, nudged 1px; selected = white edge;
   focus = 3px white ring (17:1 on navy). Same in Light and Dark (the tile is navy in both). Layout unchanged. */
article.pf-card .pf-actions .btn-outline { background: var(--cobalt-hi); color: var(--white); border-color: var(--cobalt); }
article.pf-card .pf-actions .btn-outline:hover { background: var(--cobalt-hi); color: var(--white); border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), 0 0 14px var(--cobalt-soft); }
article.pf-card .pf-actions .btn-outline:active { background: var(--cobalt-hi); border-color: var(--cobalt-hi); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); transform: translateY(1px); }
article.pf-card .pf-actions .btn-outline[aria-pressed="true"], article.pf-card .pf-actions .btn-outline[aria-current] { background: var(--cobalt-hi); border-color: var(--white); }
article.pf-card .pf-actions .btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
article.pf-card .pf-actions .btn-outline:focus-visible { box-shadow: 0 0 0 1px var(--cobalt), 0 0 14px var(--cobalt-soft); }

/* #offer: the complete digital experience (2026-10-29). Tokens only (--surface/--ink/--line), so the dark theme needs no
   generated rules; status labels reuse .lab-ok / .lab-plan. Compact on purpose: qa_landing caps the page height. */
.offer-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
.offer-vs > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.offer-vs > div:last-child { border-color: rgba(22,119,255,.45); box-shadow: inset 4px 0 0 var(--cobalt); }
.offer-vs strong { font-size: 16px; color: var(--ink); } .offer-vs p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.offer-grid { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.offer-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.offer-item h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.offer-item h3 .lab { font-size: 11px; }
.offer-item p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.offer-item .offer-q { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.offer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.offer-cta p { margin: 0; color: var(--ink-2); max-width: 560px; }
.offer-cta .pf-actions { margin-top: 0; }
@media (max-width: 1100px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offer-vs, .offer-grid { grid-template-columns: 1fr; } .offer-grid { gap: 10px; } .offer-item { padding: 12px 14px; } .offer-cta .pf-actions { width: 100%; } }

/* ================================================================ 2026-10-29 mobile pass: phone condensing (<= 700px only)
   Desktop and tablets above 700px are untouched: the disclosure buttons and the demo pager are display:none there and
   nothing is folded. Folds are real buttons (site.js fold()); folded content stays in the DOM. Pricing, limitations,
   "simulated" qualifiers, the app-vs-agent note, the contact form and every call to action are never folded. */
.m-more, .sr-fold > .m-more { display: none; }
.sr-fold { display: contents; }
.pf-list .pf-item[hidden], .pf-pager[hidden] { display: none; }
@media (max-width: 700px) {
  .m-more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 12px 0 0; }
  .m-more-in { margin: 0; align-self: flex-start; }
  .m-more-wide { width: 100%; margin: 4px 0 12px; }
  .m-fold-all:not(.m-open), .m-fold:not(.m-open) > .m-cut { display: none; }
  .steps.m-fold:not(.m-open) > .step:has(+ .m-cut)::after { display: none; }  /* no connector line into hidden steps */
  /* working demos: three tiles + pager instead of a 300px scroll box */
  .pf-list { max-height: none; overflow: visible; }
  .pf-pager:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: -4px 0 4px; }
  .pf-pager .btn { min-height: 44px; }
  .pf-pager .btn:disabled { opacity: .45; cursor: default; }
  .pf-page { margin: 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--ink-2); }
  .pf-stats { gap: 8px 18px; }
  /* tighter vertical rhythm (fonts unchanged) */
  .sec { padding: 30px 0; }
  .sec-head { margin-bottom: 16px; }
  .sec-head .sub { margin-bottom: 0; }
  .brand-split { gap: 14px; }
  /* repeated demo screenshots: two in Services, none in "Start from software that already works" (the demos above show them) */
  #svc-shots .shot:nth-child(n+3) { display: none; }
  #why-shots { display: none; }
  .svc-grid { margin-top: 14px; gap: 8px; }
  .svc { padding: 12px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .svc .ico { grid-row: span 2; margin: 0; }
  .svc h3 { margin: 4px 0 2px; }
  .offer-grid { margin-bottom: 14px; gap: 8px; }
  .offer-item { padding: 11px 14px; }
  .step { padding-bottom: 10px; }
  .why-grid { gap: 8px; } .why { padding: 14px 16px; }
  .fx-sys.m-open { margin-bottom: 14px; }
  #platforms .m-more { margin: 0 0 12px; }
  .app-vs-agent { margin-bottom: 18px; padding: 14px 16px; gap: 8px; }
  .agent-grid { gap: 10px; margin-bottom: 22px; }
  .agent-card { padding: 16px; gap: 8px; }
  .agent-benefits { margin: 0; }
  .agent-card:has(> .agent-convo.m-fold:not(.m-open)) > .agent-benefits { display: none; }  /* opens with the example */
  .agent-demo { padding: 16px; }
  .agent-demo .m-more { margin: 10px 0; }
  .cz { gap: 8px; } .cz li { padding: 12px 14px; }
  .price-grid { gap: 10px; }
  .proof { padding: 14px; }
  .gallery { padding-top: 30px; padding-bottom: 30px; }
  .gallery-head .sub { margin-bottom: 8px; }
}

/* ================================================================ 2026-10-29 homepage pass: phone app shell (<= 700px only)
   site.js initAppShell sets html.m-app on phones only. Then a fixed bottom navigation opens one screen at a time (hash
   routes #/m/<screen>); main > section shows only the current screen's sections (.m-on), a small app bar gives the title
   and a back button, and the header gets a compact Light/Dark toggle. Above 700px none of this exists: the elements below
   are display:none, no class is set and no route is read, so desktop and tablets are unchanged.
   Phone-only wording: .d-txt (desktop) / .m-txt (phone) pairs; above 700px only .d-txt shows. */
.m-txt, .m-stats, .m-theme, .m-tabbar, #m-partners { display: none; }
.m-appbar[hidden] { display: none; }
@media (max-width: 700px) {
  .d-txt { display: none; }
  .m-txt { display: inline; }
  .pf-stats { display: none; }  /* the Home screen carries the counts (.m-stats) */
  .m-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--ink-2); }
  .m-stats span { white-space: nowrap; }
  .m-stats strong { color: var(--ink); font-size: 17px; font-weight: 800; display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }  /* "–" and the two-digit counts take the same width: no re-wrap (CLS) */
  .hero-sub { margin-bottom: 18px; }
  .hero-badge { margin-bottom: 12px; }

  html.m-app main > section:not(.m-on) { display: none !important; }
  html.m-app .site-foot:not(.m-on) { display: none; }
  html.m-app #m-partners.m-on { display: block; }
  html.m-app body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  html.m-app { scroll-padding-top: 70px; scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  html.m-app .nav-toggle, html.m-app .nav-links { display: none; }  /* the bottom navigation replaces the menu */
  html.m-app .nav-cta-m { margin-left: 0; }

  /* header: compact theme toggle (44px) */
  html.m-app .m-theme { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: auto;
    border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
  html.m-app .m-theme:hover { border-color: var(--cobalt-deep); }
  html.m-app .m-theme:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

  /* app bar: back + title of the current screen */
  html.m-app .m-appbar:not([hidden]) { display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 12px 16px 0; }
  .m-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
  .m-back:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
  .m-title { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); min-width: 0; }
  .m-title:focus { outline: none; }
  .m-title:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
  html.m-app main > section.m-on:not(.hero360) { padding-top: 16px; }

  /* screen change: a short fade + slide (none under reduced motion) */
  html.m-app .m-enter { animation: m-in .2s ease-out both; }

  /* bottom navigation: six destinations, icon + short label, 56px tall targets, active = filled pill + bold + top bar */
  html.m-app .m-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    background: var(--surface-solid); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,19,24,.08); }
  .m-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px;
    padding: 4px 1px; border-radius: 12px; text-decoration: none; color: var(--ink-2); font-size: 10.5px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
  .m-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tabbar svg { flex: none; }
  .m-tabbar a[aria-current="page"] { color: var(--cobalt-deep); font-weight: 800; background: var(--cobalt-soft); }
  .m-tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cobalt); }
  .m-tabbar a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
  /* More (Boss 2026-10-30): the 5th item, styled like the links; active while Pricing / Solutions / Partners is open */
  .m-more-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px;
    padding: 4px 1px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink-2); font-size: 10.5px; font-weight: 600; line-height: 1.1;
    letter-spacing: -.01em; cursor: pointer; }
  .m-more-btn:is(.is-on, [aria-expanded="true"]) { color: var(--cobalt-deep); font-weight: 800; background: var(--cobalt-soft); }
  .m-more-btn.is-on::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cobalt); }
  .m-more-btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
  /* the More menu: a small blue sheet above the bar, one row per destination (44px+ targets) */
  .m-more-menu { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(100% + 8px); display: grid; gap: 4px; min-width: 200px; padding: 6px;
    background: #0B5CD6; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; box-shadow: 0 -10px 30px rgba(4, 12, 28, .28); }
  .m-more-menu[hidden] { display: none; }
  .m-tabbar .m-more-menu a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 8px 14px; font-size: 15px; color: #FFFFFF; }
  .m-tabbar .m-more-menu a[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }

  /* Partners screen */
  .m-partner-ways { display: grid; gap: 8px; }
  .m-partner-ways .price { padding: 14px 16px; }
  .m-partner-ways h3 { margin: 0 0 4px; font-size: 16px; }
  .m-partner-ways p { margin: 0; }
  .m-partner-cta { margin: 16px 0 0; } .m-partner-cta .btn { width: 100%; justify-content: center; min-height: 44px; }
  .m-partner-more { margin: 12px 0 0; text-align: center; } .m-partner-more a { color: var(--cobalt-deep); font-weight: 700; }
}
@media (max-width: 360px) { .m-tabbar :is(a, .m-more-btn) { font-size: 10px; } .m-stats { font-size: 13px; } }
@keyframes m-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.m-app .m-enter { animation: none; } }

/* ===================================================================== Stage D v2 (Boss 2026-10-29 late) */
/* Shared interaction states for every selectable / clickable tile (.ix-tile: filters, industry and app chips, demo tabs,
   pricing and agent cards, the five steps). One set of tokens: a soft brand-blue glow behind the SELECTED tile, a subtle
   hover zoom (<= 1.025) on devices that hover, a clear focus ring, a dimmed disabled state. Only transform / box-shadow
   change, so nothing moves the layout. Touch screens (hover: none) get no hover zoom; the selected glow is stronger
   there. Reduced motion: no zoom, no transition. Blue only. */
:root { --ix-scale: 1.025; --ix-t: .18s cubic-bezier(.2,.7,.3,1);
  --ix-glow: 0 0 0 2px rgba(22,119,255,.60), 0 8px 26px rgba(22,119,255,.40), 0 0 34px rgba(22,119,255,.22);
  --ix-glow-touch: 0 0 0 3px rgba(22,119,255,.70), 0 10px 30px rgba(22,119,255,.48); }
.ix-tile { transition: transform var(--ix-t), box-shadow var(--ix-t); backface-visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ix-tile:not(:disabled):not([aria-disabled="true"]):hover { transform: scale(var(--ix-scale)); }
}
.ix-tile.ix-tile:is([aria-pressed="true"], [aria-current="step"], [aria-selected="true"], .is-selected) { box-shadow: var(--ix-glow); position: relative; z-index: 1; }
@media (hover: none) { .ix-tile.ix-tile:is([aria-pressed="true"], [aria-current="step"], [aria-selected="true"], .is-selected) { box-shadow: var(--ix-glow-touch); } }
.ix-tile:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.ix-tile:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ix-tile { transition: none; } .ix-tile.ix-tile:hover { transform: none; } }

/* "From Demo to Your Product": 5-step controls exist only for phones (site.js initCzSteps) */
.cz-nav { display: none; }
@media (max-width: 700px) {
  /* Solutions screen: "From Demo to Your Product" first, then "Get Your Solution in a Minute" */
  html.m-app main { display: flex; flex-direction: column; }
  html.m-app main > #customize { order: -1; }
  html.m-app #customize .cz { display: block; }
  html.m-app #customize .cz li.cz-off { display: none; }
  html.m-app #customize .cz li { min-height: 152px; padding: 16px 18px; }
  html.m-app #customize .cz li.cz-anim { animation: cz-in .3s ease both; }
  html.m-app #customize .cz li.cz-anim.cz-back { animation-name: cz-in-back; }
  html.m-app .cz-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 14px 0 0; }
  .cz-nav .btn { min-height: 44px; min-width: 44px; }
  .cz-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
  .cz-mid { min-width: 0; text-align: center; }
  .cz-status { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cz-dots { display: flex; justify-content: center; gap: 0; margin: 2px 0 0; }
  .cz-dots .hs-dot { width: 28px; height: 28px; }
  html.m-app #customize { padding-bottom: 8px; }

  /* Demos: sector selector and status filters on ONE row; scrolls sideways (snap + edge fade) when it does not fit */
  html.m-app #portfolio .pf-filters { flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px 16px; padding: 4px 16px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
  html.m-app #portfolio .pf-filters::-webkit-scrollbar { display: none; }
  html.m-app #portfolio .pf-filters > * { flex: none; scroll-snap-align: start; }
  html.m-app #portfolio .pf-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.m-app #portfolio .pf-select select { height: 52px; min-width: 136px; padding: 0 12px; font-weight: 700; }
  html.m-app #portfolio #pf-status { flex-wrap: nowrap; padding: 3px; }
  html.m-app #portfolio #pf-status button { min-height: 44px; white-space: nowrap; padding: 0 12px; }
  html.m-app #portfolio .pf-filters:last-child { margin-right: -16px; }
}
@keyframes cz-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cz-in-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.m-app #customize .cz li.cz-anim { animation: none; } }

/* ---------------------------------------------------------------- v4c phone footer (Boss 2026-10-30), <= 700px only
   The same footer markup and links as desktop, laid out as: a brand intro (logo | tagline, white card with a brand-blue top
   rule), three cards (Explore, Services, Contact) with round blue icon badges, the Demo Mode notice as its own info panel
   (shield icon), then the copyright line. Tokens only, blue and white, Light + Dark. Larger screens never show the icons. */
.fh-ic, .fl-ic, .fd-ic { display: none; }
@media (max-width: 700px) {
  .site-foot { background: var(--bg); border-top: 1px solid var(--line); padding: 16px 0 calc(18px + env(safe-area-inset-bottom, 0px)); }
  .site-foot .foot-inner { display: grid; grid-template-columns: 1fr; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .site-foot :is(.foot-brand, .foot-sec), .site-foot .foot-demo { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 6px 18px rgba(16, 19, 24, .07); }
  /* brand intro: logo | divider | tagline */
  .site-foot .foot-brand { grid-column: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 14px 16px;
    border-top: 4px solid var(--cobalt-hi); }
  .site-foot .foot-logo { padding-right: 14px; border-right: 1px solid var(--line); }
  .site-foot .foot-logo img { height: 46px; }
  .site-foot .foot-brand p { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); }
  /* section cards */
  .site-foot .foot-sec { padding: 14px 14px 12px; }
  .site-foot .foot-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--ink); }
  .site-foot .fh-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--cobalt-hi); color: var(--white); }
  .site-foot .fh-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .site-foot .foot-sec nav ul, .site-foot nav.foot-sec ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .site-foot nav.foot-sec a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 76px; margin: 0; padding: 10px 4px 8px;
    border-radius: 12px; background: var(--dev-bg); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none;
    overflow-wrap: normal; word-break: normal; hyphens: none; }
  .site-foot nav.foot-sec a span { max-width: 100%; }
  .site-foot nav.foot-sec a:hover { color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--cobalt); }
  .site-foot nav.foot-sec a:focus-visible { outline: 3px solid var(--cobalt-hi); outline-offset: 2px; }
  .site-foot .fl-ic { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: var(--cobalt-hi); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  /* contact */
  .site-foot .foot-contact { margin: 0 0 12px; gap: 6px; }
  .site-foot .foot-contact li { grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; }
  .site-foot .foot-contact li::before { content: ""; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--dev-bg) center / 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5CD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM4 7l8 6 8-6'/%3E%3C/svg%3E"); }
  .site-foot .foot-contact span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
  .site-foot .foot-contact a, .site-foot .foot-contact b { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; font-weight: 700; color: var(--cobalt-deep); }
  .site-foot .foot-ctas { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .site-foot .foot-ctas .btn { min-height: 46px; gap: 8px; font-size: 15px; }
  .site-foot .foot-ctas .btn .fl-ic { width: 18px; height: 18px; stroke: currentColor; }
  .site-foot .foot-ctas .btn-dark { background: var(--cobalt-hi); color: var(--white); }
  .site-foot .foot-ctas .btn-outline { background: var(--surface-solid); color: var(--cobalt-deep); border: 1.5px solid var(--cobalt-hi); }
  /* Demo Mode info panel */
  .site-foot .foot-demo { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; row-gap: 6px; align-items: start; margin: 12px 16px 0; padding: 12px 14px;
    background: var(--dev-bg); border-color: var(--cobalt-soft); box-shadow: none; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
  .site-foot .fd-ic { display: block; grid-row: 1 / span 2; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--cobalt-hi); fill: none; stroke: var(--white);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
  .site-foot .foot-demo .demo-pill { justify-self: start; margin: 0; }
  /* copyright */
  .site-foot .foot-copy { margin: 10px 16px 0; padding: 0; text-align: center; font-size: 13px; }
  .site-foot .foot-copy a { display: inline-block; padding: 12px 6px; margin: -6px 0; }
}
@media (max-width: 700px) {
  :root[data-theme="dark"] .site-foot :is(.foot-brand, .foot-sec) { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
  :root[data-theme="dark"] .site-foot .foot-contact li::before { background-color: var(--cobalt-hi);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM4 7l8 6 8-6'/%3E%3C/svg%3E"); }
  :root[data-theme="dark"] .site-foot .fl-ic { stroke: var(--blue-tint); }
  :root[data-theme="dark"] .site-foot .foot-ctas .btn .fl-ic { stroke: currentColor; }
  :root[data-theme="dark"] .site-foot .foot-ctas .btn-outline { color: var(--white); border-color: var(--blue-tint); }
  :root[data-theme="dark"] .site-foot nav.foot-sec a { background: rgba(120, 190, 255, .08); }
}

/* ---------------------------------------------------------------- v4c hero text, stats panel, phone showcase (Boss 2026-10-30)
   Same wording, CTAs and behaviour. Tokens only; blue and white. */
/* hero text: the first line dark navy, "built around your company tomorrow." in the primary blue (solid, no gradient) */
.hero-copy h1 { color: var(--navy); margin-bottom: 18px; }
#main .hero-copy h1 .fx-grad { background: none; -webkit-text-fill-color: currentColor; color: var(--cobalt-hi); animation: none; }
:root[data-theme="dark"] .hero-copy h1 { color: var(--ink); }
:root[data-theme="dark"] #main .hero-copy h1 .fx-grad { color: var(--cobalt-deep); }
.hero-copy .hero-badge { margin-bottom: 20px; border-color: var(--cobalt-soft); color: var(--cobalt-hi); box-shadow: 0 2px 8px rgba(22,119,255,.08); }
:root[data-theme="dark"] .hero-copy .hero-badge { color: var(--ink); }
.hero-copy .hero-sub { margin-bottom: 30px; line-height: 1.55; }
/* stats panel: one component (#m-stats), desktop + phones; numbers from the registry (renderPhoneStats) */
.pf-stats { display: none !important; }  /* the duplicate portfolio counts: consolidated into the hero stats panel */
.hero-copy ul.hstats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; margin: 28px 0 0; padding: 14px 6px;
  border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(16,19,24,.06); font-size: 14px; color: var(--ink-2); }
.hstats li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 16px; }
.hstats li + li { border-left: 1px solid var(--line); }
.hst-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--dev-bg); }
.hst-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--cobalt-hi); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hst-tx { display: grid; min-width: 0; line-height: 1.25; }
.hero-copy .hstats strong { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--cobalt-hi); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: left; display: block; }
.hst-l { font-weight: 700; color: var(--ink); white-space: normal; }
.hst-s { font-size: 13px; color: var(--ink-2); white-space: normal; }
:root[data-theme="dark"] .hero-copy .hstats strong { color: var(--cobalt-deep); }
:root[data-theme="dark"] .hst-ic svg { stroke: var(--blue-tint); }
:root[data-theme="dark"] .hero-copy ul.hstats { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
@media (max-width: 700px) {
  .hero-copy .hero-badge { margin-bottom: 16px; }
  .hero-copy h1 { margin-bottom: 14px; }
  .hero-copy .hero-sub { margin-bottom: 22px; }
  /* compact 3-up: icon, number, label stacked and centred */
  .hero-copy ul.hstats { display: grid; margin: 20px 0 0; padding: 12px 2px; border-radius: 16px; font-size: 12.5px; }
  .hstats li { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 2px 6px; text-align: center; }
  .hst-ic { width: 34px; height: 34px; } .hst-ic svg { width: 18px; height: 18px; }
  .hst-tx { justify-items: center; }
  .hero-copy .hstats strong { font-size: 22px; text-align: center; }
  .hst-l { font-size: 12.5px; line-height: 1.25; }
  .hst-s { font-size: 11.5px; }
  .hero-copy .hstats span { white-space: normal; }
}
/* phones: the web preview in a plain browser frame, the phone overlapping its lower-right corner */
.hs-ms-web { background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(10,20,45,.16); }
.hs-bchrome { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.hs-bchrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-tint); opacity: .75; }
.hs-burl { flex: 1; min-width: 0; height: 14px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line);
  font-size: 9.5px; font-weight: 600; line-height: 12px; color: var(--ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-bshot { position: relative; }
.hs-ms-phone { top: auto; bottom: 3%; right: 1.5%; width: 35%; }
.hs-ms-phone .hs-phone-screen { position: relative; }
.hs-ms-phone .hs-phone-screen::before { content: ""; position: absolute; z-index: 1; top: 1.4%; left: 50%; width: 30%; height: 2.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
@keyframes hs-pulse-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 30px rgba(10,20,45,.30), 0 0 0 rgba(22,119,255,0); }
  50% { transform: scale(1.01); box-shadow: 0 14px 30px rgba(10,20,45,.30), 0 0 14px rgba(22,119,255,.28); }
}
.hs-view > figure.is-on .hs-ms-phone .hs-phone-frame { animation-name: hs-pulse-soft; }
/* project nav under it: a dark-navy rounded bar, round primary-blue arrows, name / type / "n of N", pill dots.
   Same 70px band as before (10px gap + 60px bar), so the reserved height (.hs-ph) still holds: no layout shift. */
.hs-mshow .hs-car .hs-bar { height: 60px; margin-top: 10px; padding: 7px 8px; border-radius: 18px; background: var(--navy); border-color: rgba(120,190,255,.22);
  box-shadow: 0 8px 20px rgba(10,20,45,.22); }
.hs-mshow .hs-car .hs-btn { border-radius: 50%; background: var(--cobalt-hi); border: 1px solid var(--cobalt); font-size: 19px; }
.hs-mshow .hs-car .hs-btn:hover { background: var(--cobalt-hi); border-color: var(--white); }
.hs-mshow .hs-car .hs-name { font-size: 15px; }
.hs-mshow .hs-car .hs-dot::before { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.hs-mshow .hs-car .hs-dot[aria-current="true"]::before { width: 24px; margin-left: -12px; }
@media (prefers-reduced-motion: reduce) { .hs-view > figure.is-on .hs-ms-phone .hs-phone-frame { animation: none; } }
/* narrow phones (< 375px): the stats stack as three short rows (icon | number | label + line), so nothing crowds */
@media (max-width: 374px) {
  .hero-copy ul.hstats { grid-template-columns: 1fr; padding: 6px 12px; }
  .hstats li { flex-direction: row; gap: 12px; padding: 8px 2px; text-align: left; }
  .hstats li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hst-tx { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; justify-items: start; }
  .hero-copy .hstats strong { grid-row: 1 / span 2; font-size: 24px; text-align: right; }
  .hst-l { font-size: 13px; } .hst-s { font-size: 12px; }
}

/* phones, Boss 2026-10-30: each project slide has "Open Demo" on its web preview (only when a working demo exists) and
   "Tap to Enlarge" on its phone. Primary blue with a white ring, white text (5.97:1), 44px touch target. */
.hs-open { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--cobalt-hi); color: var(--white); font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--white), 0 6px 16px rgba(10,20,45,.35); }
.hs-open:hover { color: var(--white); box-shadow: 0 0 0 2px var(--white), var(--ix-glow, 0 0 18px rgba(22,119,255,.5)); }
.hs-open:focus-visible { outline: 3px solid var(--cobalt-hi); outline-offset: 3px; }
html[data-theme="dark"] .hs-open:focus-visible { outline-color: #8CC8FF; }
.hs-open-ic { font-size: 15px; }
.hs-ms-pbtn { border-radius: 16% / 7.4%; }
.hs-ms-pbtn .hs-enl { top: -8px; right: -6px; }
/* larger phone view, live demo: the demo runs at 390 x 844 (its own phone layout) and is scaled to the frame (--zs, site.js) */
.hs-zframe [hidden] { display: none !important; }
.hs-zframe-live .hs-phone-screen { position: relative; aspect-ratio: 390 / 844; background: #FFFFFF; }
.hs-zlive { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--zs, 1)); transform-origin: 0 0; background: #FFFFFF; }

/* ---------------------------------------------------------------- phone footer, reference pass (Boss 2026-10-30,
   "360 Apps UI Redesign Comparison.png"), <= 700px only; larger screens unchanged (.foot-all / .foot-demo-more hidden).
   A blue gradient brand band (white logo | divider | white tagline) with the cards rising over its lower edge; card headers
   = round blue badge + title + "View all ->" (Explore -> the showroom, Services -> the services section); links as icon +
   label rows in three columns; Contact = Email on the left, the two buttons stacked on the right; the Demo Mode panel with a
   large outline shield and a chevron to the demo terms; copyright. Same links and text as before (+3 links). */
.foot-all, .foot-demo-more { display: none; }
@media (max-width: 700px) {
  .site-foot { padding-top: 0; }
  .site-foot .foot-inner { gap: 12px; }
  /* brand band: full bleed, the white logo artwork (the ink one is unreadable on blue) */
  .site-foot .foot-brand { margin: 0 -16px 4px; padding: 26px 20px 44px; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: auto 1fr; gap: 0; color: var(--white); }
  /* the band is the same brand blue in Light and Dark (.foot-inner > raises it above the generated dark card background) */
  .site-foot .foot-inner > .foot-brand, :root[data-theme="dark"] .site-foot .foot-inner > .foot-brand {
    background: radial-gradient(120% 90% at 85% 10%, rgba(127,165,255,.45), transparent 55%), linear-gradient(135deg, #0A2F86 0%, #0B5CD6 55%, #1677FF 100%); }
  .site-foot .foot-logo { width: 132px; height: 72px; padding-right: 18px; margin-right: 18px; border-right: 1.5px solid rgba(255,255,255,.55);
    background: url("/brand/logo-360-apps.webp") left center / contain no-repeat; }
  .site-foot .foot-logo img { opacity: 0; height: 72px; }
  .site-foot .foot-inner > .foot-brand > .foot-logo.foot-logo { border-right-color: rgba(255,255,255,.55); }  /* also in Dark (beats the generated grey) */
  .site-foot .foot-brand p { color: var(--white); font-size: 17px; line-height: 1.35; font-weight: 600; }
  .site-foot .foot-brand + .foot-sec { margin-top: -38px; position: relative; }
  /* cards: header row = badge + title + View all */
  .site-foot .foot-sec { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px 12px; border-radius: 18px; }
  .site-foot .foot-sec h2 { grid-column: 1; margin: 0; font-size: 20px; color: #0F1A33; }
  .site-foot .fh-ic { width: 38px; height: 38px; }
  .site-foot .foot-all { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px 0 10px; font-size: 14px; font-weight: 600;
    color: var(--cobalt-deep); text-decoration: none; white-space: nowrap; }
  .site-foot .foot-all:hover { text-decoration: underline; }
  .site-foot .foot-all:focus-visible { outline: 3px solid var(--cobalt-hi); outline-offset: 2px; border-radius: 8px; }
  .site-foot .foot-sec > ul, .site-foot .foot-sec > .foot-contact, .site-foot .foot-sec > .foot-ctas { grid-column: 1 / -1; }
  .site-foot nav.foot-sec ul { margin-top: 8px; gap: 2px 8px; }
  .site-foot nav.foot-sec a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; min-height: 52px; padding: 6px 2px; background: none; border-radius: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-align: left; }
  .site-foot nav.foot-sec a:hover { box-shadow: none; color: var(--cobalt-deep); }
  .site-foot .fl-ic { width: 24px; height: 24px; }
  /* contact: Email | buttons */
  .site-foot .foot-sec-contact { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; }
  .site-foot .foot-sec-contact h2 { grid-column: 1 / -1; }
  .site-foot .foot-sec-contact > .foot-contact { grid-column: 1; margin: 6px 0 0; }
  .site-foot .foot-sec-contact > .foot-ctas { grid-column: 2; }
  .site-foot .foot-contact li { grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; }
  .site-foot .foot-contact li::before { grid-row: 2; grid-column: 1; width: 22px; height: 22px; background-color: transparent; background-size: 20px; border-radius: 0; }
  .site-foot .foot-contact span { grid-column: 1 / -1; grid-row: 1; font-size: 14px; font-weight: 800; color: #0F1A33; }
  .site-foot .foot-contact a, .site-foot .foot-contact b { grid-row: 2; grid-column: 2; min-height: 44px; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
  .site-foot .foot-ctas { gap: 10px; }
  .site-foot .foot-ctas .btn { min-height: 48px; padding: 0 10px; font-size: 14px; border-radius: 12px; white-space: normal; text-align: center; line-height: 1.2; }
  /* Demo Mode panel: large outline shield | pill + text | chevron */
  .site-foot .foot-demo { position: relative; display: block; min-height: 64px; padding: 14px 40px 14px 76px; border-radius: 16px; font-size: 13.5px; }
  .site-foot .fd-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 50px; height: 56px; padding: 0; border-radius: 0; background: none;
    stroke: var(--cobalt-hi); stroke-width: 1.6; }
  .site-foot .foot-demo .demo-pill { display: inline; margin-right: 6px; }
  .site-foot .foot-demo-more { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 44px; font-size: 28px; line-height: 1; color: var(--cobalt-hi); text-decoration: none; }
  .site-foot .foot-demo-more:focus-visible { outline: 3px solid var(--cobalt-hi); outline-offset: 0; border-radius: 8px; }
  .site-foot .foot-copy a { text-decoration: underline; }
}
@media (max-width: 374px) {
  .site-foot .foot-logo { width: 108px; height: 60px; padding-right: 14px; margin-right: 14px; }
  .site-foot .foot-logo img { height: 60px; }
  .site-foot .foot-brand p { font-size: 15.5px; }
  .site-foot nav.foot-sec a { font-size: 12.5px; gap: 7px; }
  .site-foot .fl-ic { width: 21px; height: 21px; }
}
@media (max-width: 700px) {
  :root[data-theme="dark"] .site-foot nav.foot-sec a { background: none; }
  :root[data-theme="dark"] .site-foot .foot-contact li::before { background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CC8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM4 7l8 6 8-6'/%3E%3C/svg%3E"); }
  :root[data-theme="dark"] .site-foot .fd-ic, :root[data-theme="dark"] .site-foot .foot-demo-more { stroke: var(--blue-tint); color: var(--blue-tint); }
  :root[data-theme="dark"] .site-foot .foot-all { color: var(--blue-tint); }
}

/* ======== 2026-10-30 Working Demos, desktop only (> 860px): four larger tiles per page whose column ends level with the
   preview (the tiles share the preview's height; the pager sits underneath), each with a small genuine phone capture
   (img/pf-phone, tools/build_pf_phones.py). .pf[data-demos] = a (phone over the tile's right edge) | b (phone column).
   Phones and tablets are unchanged: .pf-tphone stays hidden there. ======== */
.pf-tphone { display: none; }
@media (min-width: 861px) {
  .pf { grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 0; align-items: stretch; min-height: 0; }
  .pf-list { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: repeat(4, minmax(132px, 1fr)); gap: 10px;
    max-height: none; overflow: visible; padding: 0; }
  .pf-list:has(> p.muted:only-child) { grid-template-rows: 1fr; }
  .pf-pager { grid-column: 1; grid-row: 2; }
  .pf-pager:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 12px; }
  .pf-pager .btn:disabled { opacity: .45; cursor: default; }
  .pf-page { margin: 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--ink-2); }
  .pf-detail { grid-column: 2; grid-row: 1 / span 2; }
  .pf-list .pf-item { position: relative; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 14px; min-height: 0; border-radius: 14px; }
  .pf-list .pf-item img.pf-thumb { width: 150px; height: auto; aspect-ratio: 16 / 10; border-radius: 9px; }
  .pf-list .pf-item img:not(.pf-thumb):not(.pf-tphone img), .pf-list .pf-mono { width: 64px; height: 64px; }
  .pf-list .pf-meta { gap: 4px; }
  .pf-list .pf-meta strong { font-size: 16px; }
  .pf-list .pf-meta small { font-size: 13px; }
  .pf-list .pf-meta .lab { font-size: 11.5px; padding: 2px 8px; }
  /* the phone: a dark bezel around the app's own 390px capture, top of the screen showing */
  .pf-tphone { display: block; aspect-ratio: 180 / 373; padding: 3px; border-radius: 12px; background: #0A1424;
    box-shadow: 0 0 0 1px rgba(170,198,255,.45), 0 8px 18px rgba(4,12,28,.45); overflow: hidden; pointer-events: none; }
  .pf-list .pf-item .pf-tphone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 9px; }  /* outranks the 48px logo rule */
  /* a: the phone stands over the tile's right edge, into the gap beside the preview */
  .pf[data-demos="a"] .pf-list .pf-item { padding-right: 78px; }
  .pf[data-demos="a"] .pf-tphone { position: absolute; right: -6px; top: 8px; bottom: 8px; height: calc(100% - 16px); max-height: 150px; margin: auto 0; transform: rotate(4deg); }
  /* b: a dedicated phone column, divided from the text */
  .pf[data-demos="b"] .pf-list .pf-item { grid-template-columns: 132px minmax(0, 1fr) 64px; }
  .pf[data-demos="b"] .pf-list .pf-item img.pf-thumb { width: 132px; }
  .pf[data-demos="b"] .pf-tphone { grid-column: 3; justify-self: center; align-self: center; width: 58px; height: auto; max-height: calc(100% - 4px); }
  .pf[data-demos="b"] .pf-list .pf-item:has(.pf-tphone)::after { content: ""; position: absolute; top: 14px; bottom: 14px; right: 82px; width: 1px; background: rgba(170,198,255,.35); }
}

/* ======== desktop hero, two columns (Boss 2026-10-30 evening, final; > 980px, phones unchanged): copy + CTAs + stats on
   the LEFT; on the RIGHT an equal-size layered stagger of desktop previews (configured order, middle card on top), then
   directly under it a compact rail of the PHONE apps (three at a time). Sizes are calcs of the right column width (cqw). */
@media (min-width: 981px) {
  .hero360-inner.hs-wide { max-width: 1360px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
  .hs-wide .hero-copy { max-width: none; }
  .hs-wide .hero-shots { --hsw: auto; width: auto; margin: 0; }
  .hs-wide .hero-copy h1 { font-size: clamp(34px, 3.2vw, 50px); }
  .hs-wide .hero-copy .hero-sub { font-size: 17px; margin-bottom: 24px; }
  .hs-wide .hero-copy ul.hstats { margin-top: 24px; padding: 12px 4px; }
  .hs-wide .hstats li { gap: 9px; padding: 4px 10px; }
  .hs-wide .hst-ic { width: 36px; height: 36px; } .hs-wide .hst-ic svg { width: 18px; height: 18px; }
  .hs-wide .hero-copy .hstats strong { font-size: 24px; }
  .hs-wide .hst-l { font-size: 13px; } .hs-wide .hst-s { font-size: 12px; }
}
/* the equal-size stagger (> 700px): absolute positions from site.js (--x / --y in cqw), one card size (46cqw, 16:10) */
.hero-shots { --cw: 46cqw; --stag-h: calc(37cqw + var(--cw) * .625 + 4px); }
.hs-v4[data-nd="4"] { --stag-h: calc(34cqw + var(--cw) * .625 + 4px); }
.hs-eq .hs-desk { position: relative; display: block; height: var(--stag-h); }
.hs-eq .hs-dcard { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: var(--cw); translate: none; z-index: 1; }
.hs-eq .hs-dcard:nth-child(3) { z-index: 2; }
.hs-eq .hs-dcard:is(:hover, :focus-within) { z-index: 4; }
.hs-eq .hs-dcard .hs-dshot { border-radius: 12px; box-shadow: 0 18px 38px rgba(10,20,45,.24), 0 3px 8px rgba(10,20,45,.12); }
.hs-eq .hs-dcard .hs-dcap { position: absolute; left: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; height: 28px; margin: 0;
  font-size: 12.5px; pointer-events: none; }
.hs-eq .hs-dcard[data-edge="top"] .hs-dcap { top: 8px; }
.hs-eq .hs-dcard[data-edge="bottom"] .hs-dcap { bottom: 8px; }
.hs-eq .hs-dcard .hs-dcap strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  color: #FFFFFF; background: rgba(11,17,30,.88); font-weight: 800; }
.hs-eq .hs-dcard .hs-dcap .hs-chip { flex: none; }
.hs-eq .hs-rev { top: auto; bottom: auto; left: auto; right: 8px; }
.hs-eq .hs-dcard[data-edge="top"] .hs-rev { bottom: 8px; }
.hs-eq .hs-dcard[data-edge="bottom"] .hs-rev { top: 8px; }
/* the whole card is the action: Open Demo = the live desktop demo; Enlarge = the larger desktop view */
.hs-dlink { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; text-decoration: none; cursor: pointer; border-radius: 12px; }
.hs-dlink:focus-visible { outline: 3px solid #0B5CD6; outline-offset: 3px; }
.hs-dopen { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--cobalt-hi); color: #FFFFFF; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px rgba(10,20,45,.3); }
.hs-dopen .hs-open-ic { font-size: 13px; }
.hs-denl { background: rgba(11,17,30,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
/* the compact phone rail: three phones at a time, each a real phone capture in a phone frame */
.hs-rail { --rp: min(104px, 14cqw); --rg: 24px; margin: 22px auto 0; width: max-content; max-width: 100%; }
.hs-rrow { display: flex; align-items: center; gap: 12px; }
.hs-rview { width: calc(var(--rp) * 3 + var(--rg) * 2 + 16px); overflow: hidden; padding: 8px 8px 2px; margin: -8px 0 -2px; }
.hs-rtrack { display: flex; gap: var(--rg); margin: 0; padding: 0; list-style: none; transform: translateX(calc(var(--k, 0) * (var(--rp) + var(--rg)) * -1)); transition: transform .4s ease; }
.hs-rs { flex: 0 0 var(--rp); width: var(--rp); min-width: 0; }
.hs-rbtn { border-radius: 16% / 7.4%; }
.hs-rbtn .hs-enl { top: -6px; right: -6px; height: 24px; padding: 0 6px; }
.hs-rbtn .hs-enl-ic { font-size: 12px; }
.hs-rcap { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 8px 0 0; text-align: center; line-height: 1.2; }
.hs-rcap strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.hs-rcap span { font-size: 11px; color: var(--ink-2); }
.hs-rail .hs-rnav { flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; background: var(--navy); border-color: var(--navy); }
.hs-rail .hs-rnav:hover:not(:disabled) { background: var(--cobalt-hi); border-color: var(--cobalt-hi); }
.hs-rail .hs-rnav:disabled { opacity: .35; cursor: default; }
.hs-rail .hs-rnav:focus-visible { outline-color: #0B5CD6; }
.hs-rpos { margin: 6px 0 0; height: 16px; font-size: 11.5px; font-weight: 700; line-height: 16px; color: var(--ink-2); text-align: center; }
.hs-rail .hs-phone-frame { animation: none; }
@media (hover: hover) and (pointer: fine) { .hs-rbtn:hover .hs-phone-frame { box-shadow: var(--ix-glow); } }
/* reserve the showcase height before the images arrive (stagger + rail), so nothing below moves */
@media (min-width: 701px) {
  .hs-ph { height: calc(var(--stag-h) + 22px + min(104px, 14cqw) * 2.175 + 54px + 22px + var(--credits)); }
}
/* larger desktop view (dialog): a browser window at desktop proportions; a live demo runs at 1440 x 900 scaled (--dvs) */
.hs-dvbox { --dvw: min(1280px, calc(100vw - 48px), calc((100vh - 130px) * 1.6)); box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 20px; }
@supports (height: 100dvh) { .hs-dvbox { --dvw: min(1280px, calc(100vw - 48px), calc((100dvh - 130px) * 1.6)); } }
.hs-dvhead { width: var(--dvw); display: flex; align-items: center; gap: 14px; min-width: 0; }
.hs-dvt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hs-dvtitle { margin: 0; min-width: 0; font-size: 18px; font-weight: 800; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-dvfull { color: #CFE6FF; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hs-dvfull[hidden] { display: none; }
.hs-dvwin { width: var(--dvw); border-radius: 12px; overflow: hidden; background: var(--surface-solid); box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(22,119,255,.3); }
.hs-dvwin .hs-bchrome { height: 30px; } .hs-dvwin .hs-bchrome i { width: 9px; height: 9px; } .hs-dvwin .hs-burl { height: 18px; font-size: 11px; line-height: 16px; max-width: 420px; margin: 0 auto; }
.hs-dvscreen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #FFFFFF; }
.hs-dvscreen [hidden] { display: none !important; }
.hs-dvimg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hs-dvlive { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--dvs, 1)); transform-origin: 0 0; background: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .hs-rtrack { transition: none; } }
/* larger phone view on bigger screens: % padding would follow the full-width dialog (63px at 1440), squeezing the screen */
@media (min-width: 701px) { .hs-zframe { padding: calc(var(--zw) * .045); } }
/* Working Demos tiles (desktop): the phone opens too (live phone app ▶ or larger screenshot ⤢) */
@media (min-width: 861px) {
  .pf-list .pf-item .pf-tphone { cursor: zoom-in; overflow: visible; pointer-events: auto; }
  .pf-tph-ic { position: absolute; right: -6px; bottom: -6px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--cobalt-hi); color: #FFFFFF; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #FFFFFF; }
  .pf-tphone { position: relative; }
  .pf[data-demos="a"] .pf-tphone { position: absolute; }
}

/* ======== Working Demos, desktop (> 860px), Boss 2026-10-30 evening: the desktop preview stays (tiles + panel), with the
   project's phone beside it: a slim, realistic phone (thin outline, screen fully visible) with a gentle pulse on the panel
   phone and the selected tile's phone (off under reduced motion). The desktop screenshot never animates. <= 860px unchanged. */
@media (min-width: 861px) {
  .pf-tphone { padding: 1.5px; border-radius: 11px; background: #1B2436; box-shadow: 0 0 0 1px rgba(200,220,255,.55), 0 6px 14px rgba(4,12,28,.32); }
  .pf-list .pf-item .pf-tphone img { border-radius: 9.5px; }
  .pf-duo { position: relative; }
  .pf-pstage { position: absolute; z-index: 2; right: 16px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 21%; max-width: 168px;
    padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: #FFFFFF; }
  .pf-pframe { display: block; width: 100%; padding: 2px; border-radius: 18px; background: #1B2436;
    box-shadow: 0 0 0 1px rgba(200,220,255,.6), 0 14px 30px rgba(4,12,28,.45); }
  .pf-pframe img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 804; object-fit: cover; object-position: top; border-radius: 16px; }
  .pf-pcta { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--cobalt-hi); white-space: nowrap;
    font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 10px rgba(4,12,28,.35); }
  .pf-pstage:focus-visible { outline: 3px solid #8CC8FF; outline-offset: 4px; border-radius: 18px; }
  .pf-pstage .pf-pframe, .pf-list .pf-item[aria-pressed="true"] .pf-tphone { animation: pf-ppulse 3.6s ease-in-out infinite; }
  .pf-pstage:hover .pf-pframe { box-shadow: 0 0 0 1px rgba(200,220,255,.8), var(--ix-glow); }
}
@keyframes pf-ppulse {
  0%, 100% { scale: 1; filter: drop-shadow(0 0 0 rgba(22,119,255,0)); }
  50% { scale: 1.015; filter: drop-shadow(0 0 10px rgba(22,119,255,.45)); }
}
@media (prefers-reduced-motion: reduce) { .pf-pstage .pf-pframe, .pf-list .pf-item .pf-tphone { animation: none; } }
/* the larger phone view, bigger on larger screens (Boss 2026-10-30 evening): the phone takes the screen's full height
   (up to 500px wide) and the title, close, Previous / Next and dots move to a column beside it. Phones (<= 700px) unchanged. */
@media (min-width: 701px) {
  .hs-zoom:not(.hs-dview) .hs-zbox { --zw: min(500px, calc(100vw - 400px), calc((100vh - 40px) / 2.0593));
    display: grid; grid-template-columns: var(--zw) 300px; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "frame ." "frame head" "frame bar" "frame dots";
    justify-content: center; align-content: center; column-gap: 32px; row-gap: 12px; padding: 20px; }
  @supports (height: 100dvh) { .hs-zoom:not(.hs-dview) .hs-zbox { --zw: min(500px, calc(100vw - 400px), calc((100dvh - 40px) / 2.0593)); } }
  .hs-zoom:not(.hs-dview) .hs-zframe { grid-area: frame; align-self: center; }
  .hs-zoom:not(.hs-dview) .hs-zhead { grid-area: head; width: 300px; align-items: flex-start; }
  .hs-zoom:not(.hs-dview) .hs-ztitle { white-space: normal; font-size: 22px; }
  .hs-zoom:not(.hs-dview) .hs-zbar { grid-area: bar; width: 300px; }
  .hs-zoom:not(.hs-dview) .hs-dots { grid-area: dots; align-self: start; width: 300px; justify-content: flex-start; }
  .hs-zoom:not(.hs-dview) .hs-zbar:has(.hs-prev[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .hs-zoom:not(.hs-dview) .hs-zbar .hs-btn[hidden] { display: none; }
  .hs-zoom:not(.hs-dview) .hs-zbar:has(.hs-prev[hidden]) .hs-zstatus { grid-column: 1 / -1; }
}
/* spacing (Boss 2026-10-30 evening): the stagger sits 24px higher and the rail keeps its place, so there is 46px of air
   between the lowest desktop card and the phone rail */
@media (min-width: 981px) { .hs-eq .hs-desk { margin-top: -24px; } .hs-eq .hs-rail { margin-top: 46px; } }

/* ======== audit 2026-10-30 batch 1 (phones <= 700px): every tap target at least 44 x 44 px. Dots keep their small visual
   dot (::before) and take negative margins, so the rows they sit in keep their height (no layout shift). */
@media (max-width: 700px) {
  .pv-close { width: 44px; height: 44px; font-size: 18px; }
  .hs-dot { width: 44px; height: 44px; margin: -6px 0; }
  .hs-dots { gap: 0; }
  .cz-dot { width: 44px; height: 44px; margin: -8px 0; }
  .chip, .chip-more, #sb-inds .chip { min-height: 44px; }
  .tabgrid .chip { height: 44px; }
  #pf-status button { min-width: 44px; min-height: 44px; }
  .btn-sm, #agents a.btn-sm, #pricing .price-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #inq :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 44px; }
}
/* 320-360px: the two hero buttons wrap their words instead of clipping */
@media (max-width: 360px) {
  .hero360-actions .btn { white-space: normal; padding-inline: 12px; font-size: 15.5px; line-height: 1.25; min-height: 48px; text-align: center; }
}
/* ======== audit 2026-10-30 batch 3 (phones): the Solutions step dots keep their small dot but never shrink below a
   44 x 44 hit area; subpage theme buttons and the partner form fields reach 44px too */
@media (max-width: 700px) {
  .cz-dots .hs-dot.cz-dot { flex: none; width: 44px; height: 44px; margin: -8px 0; }
  .subpage .theme-switch button { min-width: 44px; min-height: 44px; }
  .subpage form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 44px; }
}
@media (max-width: 360px) { .subpage .theme-switch button { min-width: 44px; min-height: 44px; padding: 3px 4px; } }
/* narrow phones: five 44px step dots cannot share the row with Previous / Next, so they get the full width underneath
   (Previous | "Step n of 5" | Next stays on the first row) */
@media (max-width: 480px) {
  html.m-app .cz-nav { row-gap: 12px; }  /* dots' 44px hit areas (8px negative margins) stay clear of Previous / Next */
  .cz-nav .cz-mid { display: contents; }
  .cz-nav .cz-status { grid-column: 2; grid-row: 1; text-align: center; }
  .cz-nav .cz-dots { grid-column: 1 / -1; grid-row: 2; }
}
/* 320-360px footer: the contact buttons take the full row under the contact lines, one line each (audit batch 4) */
@media (max-width: 360px) {
  .site-foot .foot-sec-contact > .foot-contact, .site-foot .foot-sec-contact > .foot-ctas { grid-column: 1 / -1; grid-row: auto; }
  .site-foot .foot-sec-contact .foot-ctas .btn { white-space: nowrap; width: 100%; }
}

/* Mobile Working Demos (Boss 2026-10-30, reference design; phones only - desktop and tablet unchanged): a full-width
   sector dropdown, a strip of three demo thumbnails between Previous / Next arrows (the existing pager), a check on the
   selected one, and the selected demo straight underneath: name + category, a large preview, a blue Open Demo button and
   a Details button that shows the description, features and other actions. */
@media (max-width: 700px) {
  html.m-app #portfolio .pf-filters { display: block; }
  html.m-app #portfolio #pf-status { display: none; }
  html.m-app #portfolio .pf-select, html.m-app #portfolio #pf-sector { display: block; width: 100%; max-width: none; }
  html.m-app #portfolio #pf-sector { min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 600; }
  html.m-app #portfolio .pf { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 6px; row-gap: 14px; align-items: center; }
  html.m-app #portfolio #pf-pager { display: contents; }
  html.m-app #portfolio #pf-pager[hidden] { display: none; }
  html.m-app #portfolio #pf-prev, html.m-app #portfolio #pf-next { grid-row: 1; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
    border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-solid, #FFFFFF); box-shadow: 0 4px 14px rgba(4, 12, 28, .14); }
  html.m-app #portfolio #pf-prev { grid-column: 1; }
  html.m-app #portfolio #pf-next { grid-column: 3; }
  html.m-app #portfolio #pf-page { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.m-app #portfolio #pf-list { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  html.m-app #portfolio #pf-pager[hidden] ~ #pf-list, html.m-app #portfolio .pf:has(#pf-pager[hidden]) #pf-list { grid-column: 1 / -1; }
  html.m-app #portfolio #pf-list .pf-item { position: relative; display: block; width: 100%; min-width: 0; min-height: 44px; aspect-ratio: 16 / 10; padding: 0;
    border: 2px solid var(--line); border-radius: 12px; overflow: visible; background: var(--surface); }
  html.m-app #portfolio #pf-list .pf-item[hidden] { display: none; }
  html.m-app #portfolio #pf-list .pf-item .pf-tphone { display: none; }
  /* the name + sector stay as the button's accessible name, only visually hidden */
  html.m-app #portfolio #pf-list .pf-item .pf-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.m-app #portfolio #pf-list .pf-item .pf-thumb, html.m-app #portfolio #pf-list .pf-item > img,
  html.m-app #portfolio #pf-list .pf-item .pf-mono { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; object-position: top left; border-radius: 10px; }
  html.m-app #portfolio #pf-list .pf-item[aria-pressed="true"] { border: 3px solid #1F6BFF; box-shadow: 0 0 0 3px rgba(31, 107, 255, .22); }
  html.m-app #portfolio #pf-list .pf-item[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; background: #1F6BFF; color: #FFFFFF; font-size: 13px; font-weight: 800; border: 2px solid #FFFFFF; }
  html.m-app #portfolio #pf-detail { grid-column: 1 / -1; grid-row: 2; }
  html.m-app #portfolio #pf-detail .pf-card.pf-m { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; }
  html.m-app #portfolio .pf-m .pf-body { display: contents; }
  html.m-app #portfolio .pf-m .pf-title { order: 1; margin: 0; }
  html.m-app #portfolio .pf-m .pf-title h3 { font-size: 20px; margin: 0; }
  html.m-app #portfolio .pf-m .pf-ind { order: 2; margin: -6px 0 0; color: #1F6BFF; font-weight: 600; }
  html.m-app #portfolio .pf-m > .frame { order: 3; margin: 0; width: 100%; }
  html.m-app #portfolio .pf-m .pf-actions { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
  html.m-app #portfolio .pf-m .pf-actions > * { width: 100%; min-height: 48px; margin: 0; justify-content: center; }
  html.m-app #portfolio .pf-m .pf-actions > :not(.pf-m-open):not(.pf-m-det) { grid-column: 1 / -1; }
  html.m-app #portfolio .pf-m .pf-m-open { background: #1F6BFF; border-color: #1F6BFF; color: #FFFFFF; }
  html.m-app #portfolio .pf-m .pf-m-ic { display: inline-grid; place-items: center; margin-right: 8px; font-size: 13px; }
  html.m-app #portfolio .pf-m .pf-m-det { color: #1F6BFF; border-color: #1F6BFF; }
  html.m-app #portfolio .pf-m .pf-m-det .pf-m-ic { width: 20px; height: 20px; border-radius: 50%; background: #1F6BFF; color: #FFFFFF; font-weight: 800; font-family: Georgia, serif; }
  /* everything else in the card (description, features, other actions) shows under Details */
  html.m-app #portfolio .pf-m .pf-sum, html.m-app #portfolio .pf-m .pf-run-note, html.m-app #portfolio .pf-m .ticks,
  html.m-app #portfolio .pf-m .warn-note, html.m-app #portfolio .pf-m .pf-title .lab { order: 5; }
  html.m-app #portfolio .pf-m:not(.pf-m-more) :is(.pf-sum, .pf-run-note, .ticks, .warn-note) { display: none; }
  html.m-app #portfolio .pf-m:not(.pf-m-more) .pf-actions > :not(.pf-m-open):not(.pf-m-det) { display: none; }
  html.m-app #portfolio .pf-m .pf-title .lab { display: none; }
}
@media (max-width: 700px) {
  /* arrows only (the words stay as the accessible name); unselected thumbnails neutral; a light card in the light theme */
  html.m-app #portfolio #pf-prev, html.m-app #portfolio #pf-next { font-size: 0; color: #1F6BFF; border: 1px solid var(--line); }
  html.m-app #portfolio #pf-prev::before, html.m-app #portfolio #pf-next::before { font-size: 22px; font-weight: 700; line-height: 1; }
  html.m-app #portfolio #pf-prev::before { content: "‹"; }
  html.m-app #portfolio #pf-next::before { content: "›"; }
  html.m-app #portfolio #pf-list .pf-item:not([aria-pressed="true"]) { border-color: var(--line); box-shadow: none; outline: 0; }
  html.m-app #portfolio #pf-detail .pf-card.pf-m { background: var(--surface-solid, #FFFFFF); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(4, 12, 28, .08); }
  html.m-app #portfolio .pf-m .pf-title h3 { color: var(--ink); }
}
@media (max-width: 700px) {
  /* the card re-scopes its colour tokens to navy, so the light-theme card uses explicit colours (dark theme keeps navy) */
  :root:not([data-theme="dark"]).m-app #portfolio #pf-detail .pf-card.pf-m { background: #FFFFFF; color: #0B1B33; border-color: rgba(11, 27, 51, .12); }
  :root:not([data-theme="dark"]).m-app #portfolio .pf-m .pf-title h3 { color: #0B1B33; }
  html.m-app #portfolio #pf-detail .pf-m .pf-actions .pf-m-det { background: #FFFFFF; color: #1F6BFF; border: 1.5px solid #1F6BFF; }
  html.m-app #portfolio #pf-detail .pf-m .pf-actions .pf-m-open { background: #1F6BFF; color: #FFFFFF; border: 1.5px solid #1F6BFF; }
  html.m-app #portfolio .pf-m.pf-m-more :is(.pf-sum, .pf-run-note, .ticks, .ticks li) { color: inherit; }
}
@media (max-width: 700px) { html.m-app #portfolio #pf-list .pf-item { background: #FFFFFF; } }

/* Slimmer phone bezel (Boss 2026-10-30): about 40% thinner on every phone demo view (hero carousel, rail, larger phone
   view) so the app screen gets more room; corners, proportions and the screen itself are unchanged */
.hs-phone-frame { padding: 2.6%; }
.hs-zoom .hs-zframe, .hs-zoom .hs-zframe.hs-phone-frame { padding: calc(var(--zw) * .026); }
@media (min-width: 701px) { .hs-zoom .hs-zframe, .hs-zoom .hs-zframe.hs-phone-frame { padding: calc(var(--zw) * .026); } }
@media (max-width: 700px) { :root[data-theme="dark"].m-app #portfolio .pf-m .pf-ind { color: #9CC2FF; } }
/* Phone Working Demos Details panel (Boss 2026-10-30): a white, airy panel under the card, opened by Details */
@media (max-width: 700px) {
  html.m-app #portfolio .pf-m .pf-m-line { order: 2; margin: -2px 0 0; font-size: 15px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
  html.m-app #portfolio .pf-m .pf-m-panel { order: 5; margin-top: 4px; padding: 6px 18px 14px; background: #FFFFFF; color: #1B2A41; border-radius: 16px;
    border: 1px solid rgba(11, 27, 51, .08); box-shadow: 0 6px 22px rgba(4, 12, 28, .07); }
  html.m-app #portfolio .pf-m .pf-m-panel[hidden] { display: none; }
  html.m-app #portfolio .pf-m .pf-m-sec { padding: 16px 0; border-bottom: 1px solid rgba(11, 27, 51, .08); }
  html.m-app #portfolio .pf-m .pf-m-sec h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #1F6BFF; }
  html.m-app #portfolio .pf-m .pf-m-sec p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #1B2A41; }
  html.m-app #portfolio .pf-m .pf-m-note { display: flex; gap: 12px; align-items: flex-start; }
  html.m-app #portfolio .pf-m .pf-m-note p { font-size: 14.5px; color: #44536B; }
  html.m-app #portfolio .pf-m .pf-m-dot { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #EAF2FF; color: #1F6BFF; font-size: 13px; }
  html.m-app #portfolio .pf-m .pf-m-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  html.m-app #portfolio .pf-m .pf-m-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #1B2A41; }
  html.m-app #portfolio .pf-m .pf-m-chk { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #E3F6EA; color: #13804A; font-size: 12px; font-weight: 800; }
  html.m-app #portfolio .pf-m .pf-m-more-acts { display: grid; gap: 10px; }
  html.m-app #portfolio .pf-m .pf-m-more-acts > * { display: flex !important; width: 100%; min-height: 48px; justify-content: center; margin: 0; background: #FFFFFF; color: #1F6BFF; border: 1.5px solid rgba(31, 107, 255, .35); }
  html.m-app #portfolio .pf-m .pf-m-close { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 8px; border: 0;
    background: none; color: #44536B; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
  html.m-app #portfolio .pf-m .pf-m-close:focus-visible { outline: 3px solid #1F6BFF; outline-offset: 2px; border-radius: 12px; }
}
/* inquiry "What do you need?": dropdown look, grouped checklist inside (multiple choice) */
.need-hint { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--ink-3); margin-left: 4px; }
.field:has(> .msel) { grid-template-columns: minmax(0, 1fr); }
.msel { position: relative; min-width: 0; }
.msel-btn { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; background: var(--field-bg); color: var(--ink);
  border: 1px solid var(--field-border); border-radius: 11px; padding: 10px 36px 10px 12px; font-weight: 500; font-size: 15px; min-height: 44px;
  position: relative; }
.msel-btn::-webkit-details-marker { display: none; }
.msel-btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border: solid var(--ink-2);
  border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.msel[open] .msel-btn::after { transform: translateY(-30%) rotate(-135deg); }
.msel-btn:hover { border-color: var(--field-border-hover); }
.msel-btn:focus-visible { border-color: var(--cobalt); outline: 2px solid var(--cobalt); outline-offset: 1px; }
.msel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-empty { color: var(--placeholder); }
.msel-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); min-width: 280px; background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: 14px; box-shadow: 0 18px 44px rgba(16,19,24,.18); padding: 8px 6px 0;
  max-height: 360px; overflow: auto; font-weight: 500; }
.msel-grp + .msel-grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.msel-h { margin: 6px 10px 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: var(--cobalt-deep, var(--cobalt)); }
.msel-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 14.5px; }
.msel-opt:hover { background: color-mix(in srgb, var(--cobalt) 8%, transparent); }
.inq .field .msel-opt input { width: 17px; height: 17px; padding: 0; border: 0; accent-color: var(--cobalt); margin: 0; flex: none; }
.msel-foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 6px;
  background: var(--field-bg); border-top: 1px solid var(--line); margin-top: 6px; }