/* ICAST ERP — v5 design system
   Modern, minimalist, high-contrast (Queco.com / Odoo / Claude reference).
   Inter throughout; solid black text and headings (the old warm-espresso brown is
   gone); bold black backgrounds used deliberately for accent sections (mid-page
   banner, footer, dark CTA band, the featured pricing tier). Logo orange (#F99B31,
   from the real ICAST mark) stays the only accent color, used sparingly. */

:root {
  --brand: #F99B31;
  --brand-deep: #CC7F28;
  --brand-light: #FFB35C;
  --brand-tint: #F2F2F0;
  --green: #1C7C4F;   /* semantic only — "positive"/on-target data, not brand */
  --red: #C0472F;     /* semantic only — "negative" data */
  --orange: var(--brand);   /* alias: AI Engine report-category kicker */
  --teal: #55534d;          /* AI Engine report-category kicker, second category */

  /* Bold-black accent surfaces (design brief: "Accent Sections: High-contrast dark
     theme — bold black background with light typography"). Used for the mid-page
     banner, the footer, the dark CTA band and the featured pricing tier only —
     never as a general section background. */
  --navy: #0A0A0A;
  --navy-deep: #000000;
  --navy-soft: #161616;
  --navy-line: #2c2c2c;

  --ink: #0A0A0A;
  --ink-soft: #1A1A1A;
  --text: #33322f;
  --text-muted: #55534d;
  --text-mute2: #726f68;
  --text-mute3: #8f8c84;

  --line: #E7E6E2;
  --line-soft: #EFEEEA;
  --line-strong: #D6D4CD;

  --paper: #FFFFFF;
  --paper-tint: #F7F7F5;
  --paper-alt: #F2F2EF;

  /* neutral section tonal ladder — white -> light grey steps only, no warm/peach
     tints, so the "coffee" warmth called out in the design brief is gone site-wide. */
  --wash-cream: #FAFAF8;
  --wash-peach: #F5F5F3;
  --wash-apricot: #F0F0ED;
  --wash-apricot-deep: #E9E9E5;
  /* accessible "orange" for TEXT on light grounds — the brand orange itself is a
     fill/accent colour and never passes 4.5:1 as small text. */
  --brand-text: #A15A0A;
  /* RADIUS SCALE (uniformity pass). Before this there was one --radius at 2px used by
     every older component, while everything built recently hard-coded 16/18/20/24px —
     square-cornered tiers, FAQ and buttons sitting beside rounded feature cards on the
     same page. Four steps now cover every surface and nothing hard-codes its own. */
  --radius: 12px;        /* buttons, inputs, chips, small surfaces */
  --radius-card: 18px;   /* standard content card */
  --radius-panel: 24px;  /* large panels and banners */
  --radius-pill: 999px;
  /* TYPE SCALE (uniformity pass). The site rendered 41 distinct font sizes — mostly
     half-pixel drift (14.5 vs 15, 16.5 vs 16, 17.5 vs 18) between components built at
     different times, plus four different H1 sizes on four pages. Every font-size in
     styles.css and variants.css now resolves to one of these. Add a step here rather
     than hard-coding a size in a component.
     The two --fs-mock-* steps exist only for text INSIDE product illustrations on the
     AI Engine page (a dashboard drawn inside a card); nothing else should use them. */
  --fs-mock-xs: 8px;
  --fs-mock: 10px;
  --fs-2xs: 11px;    /* mono tags, legal/meta */
  --fs-xs: 12px;     /* eyebrows, pills */
  --fs-sm: 13px;     /* captions, notes, ticker */
  --fs-md: 14px;     /* secondary UI, table text */
  --fs-base: 15px;   /* card body copy */
  --fs-ui: 16px;     /* buttons, nav, emphasized body */
  --fs-lg: 18px;     /* small card titles, leads in cards */
  --fs-xl: 20px;     /* card titles, hero lede */
  --fs-2xl: 24px;    /* large card / panel titles */
  --fs-3xl: 28px;    /* big figures */
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  /* display — responsive, one size per role on every page */
  --fs-h1: clamp(36px, 5.2vw, 60px);
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h2-sm: clamp(24px, 3vw, 32px);
  --fs-stat: clamp(38px, 5vw, 56px);
  --fs-lede: clamp(16px, 1.4vw, 18px);
  --fs-lede-lg: clamp(18px, 1.6vw, 20px);
  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --shadow-sm: 0 1px 3px rgba(10,10,10,.08);
  --shadow-md: 0 8px 24px rgba(10,10,10,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon.ic-solid { fill: currentColor; stroke: none; }
.icon.ic-wa-green { color: #25D366; }

@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes pulseRing { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sweepY { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes barGrow { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.header-inner { padding: 18px 28px; display: flex; align-items: center; gap: 32px; }
.site-header .wrap { max-width: 1360px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--ink); }
.brand-logo { height: 52px; min-height: 50px; max-height: 55px; width: auto; display: block; }
.brand-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--text-mute3); }
.footer-logo { height: 38px; width: auto; display: block; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); letter-spacing: -.02em; color: var(--ink); }
.brand-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .22em; color: var(--brand); text-transform: uppercase; }
.foot-meltix { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.mono-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--brand); letter-spacing: .1em; }

.main-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; font-size: var(--fs-ui); font-weight: 500; flex-wrap: wrap; }
.main-nav a { color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a.active { border-bottom-color: var(--brand); }

.header-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px; color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); border-radius: var(--radius); padding: 15px 26px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
/* Sharper CTA (client reference: veilsun.com's "Book a discovery call" button) —
   left-to-right deep-to-light orange gradient, bigger radius, bolder weight, a
   soft colored shadow for lift. Kept in-palette: same brand oranges, just a
   punchier treatment than the flat-fill button. Scoped to .btn-primary only. */
.btn-primary { background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-light) 100%); color: #fff; font-weight: 700; border-radius: var(--radius); box-shadow: 0 10px 24px rgba(204,127,40,.32); }
.btn-primary:hover { background: linear-gradient(90deg, #B56E20 0%, var(--brand) 100%); box-shadow: 0 12px 28px rgba(204,127,40,.42); transform: translateY(-1px); color: #fff; }
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { font-size: var(--fs-base); padding: 11px 20px; white-space: nowrap; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- mobile nav */
@media (max-width: 900px) {
/* BUGFIX (site-wide, pre-existing): the closed menu is a fixed panel parked off-screen
   with translateX(100%), and that phantom panel made EVERY page horizontally
   scrollable into ~390px of empty space on phones. Taking it out of flow with
   display:none is the only fix that actually clears the overflow — visibility:hidden
   and content-visibility:hidden both leave it, and overflow-x:clip/hidden on <html>
   clears it but breaks the sticky header. Verified in-browser, all three pages. */
  .main-nav { position: fixed; inset: 0; top: 66px; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; margin: 0; transform: translateX(100%); transition: transform .25s ease; z-index: 55; overflow-y: auto; display: none; }
  .main-nav.open { display: flex; transform: translateX(0); }
  .main-nav a { padding: 16px 28px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-ui); }
  .main-nav a.active { background: var(--brand-tint); }

  /* Progressive enhancement: browsers that support discrete transitions still get the
     slide-in; older ones just open instantly, which is fine for a small overlay. */
  @supports (transition-behavior: allow-discrete) {
    .main-nav { transition: transform .25s ease, display .25s allow-discrete; }
    .main-nav.open { transition: transform .25s ease, display 0s; }
    @starting-style { .main-nav.open { transform: translateX(100%); } }
  }
  .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------------------------------------------------------------- eyebrow / badge */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .18em; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.eyebrow.orange { color: var(--brand); }
.eyebrow-dot { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.badge-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: 999px; padding: 7px 14px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; box-shadow: var(--shadow-sm); }
.badge-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; padding: 48px 0 60px; overflow: hidden; background: radial-gradient(900px 520px at 72% 6%, rgba(249,155,49,.14), transparent 70%), radial-gradient(700px 440px at 10% 100%, rgba(10,10,10,.08), transparent 70%), var(--paper); }
/* Wave-style hero: readable copy column pinned to the page gutter on the left, the
   animation taking every remaining pixel AND bleeding past the right viewport edge
   (clipped by .hero's overflow:hidden, so the page never scrolls sideways). */
/* Client revision: the visual column got taller once the animation was sized up,
   so align-items:center vertically centered the (shorter) text column against
   that taller row height — pushing the headline well below the header with a
   big empty gap above it. Top-align both columns instead. */
.hero-grid { display: grid; grid-template-columns: minmax(360px, 520px) 1fr; gap: 20px; align-items: start; max-width: none; margin: 0; padding: 0 0 0 max(28px, calc((100vw - 1280px) / 2 + 28px)); }
.hero h1 { font-size: var(--fs-h1); line-height: 1.03; margin: 22px 0 0; text-wrap: balance; font-weight: 800; letter-spacing: -.035em; }
/* Two orange stops, no ink stop: the highlighted word is now "AI-Powered" (short),
   and the old 3-stop gradient faded a short word to black by its last letters.
   The AI Engine hero keeps the 3-stop version — its phrase is long enough. */
.hero h1 .grad { background: linear-gradient(100deg, var(--brand-deep), var(--brand) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: var(--fs-lede-lg); line-height: 1.62; color: var(--text-muted); max-width: 560px; margin: 22px 0 0; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-ctas .btn { width: 246px; padding-left: 16px; padding-right: 16px; white-space: nowrap; }

.hero-visual { position: relative; min-width: 0; }
.video-card { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--brand-deep), var(--brand)); box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.video-card .frame { position: relative; aspect-ratio: 16/9; width: 100%; }
.video-card .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-card .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(10,10,10,.15), rgba(10,10,10,.55)); border: none; padding: 0; }
.video-card .play-btn .disc { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(249,155,49,.18); animation: floatY 4s ease-in-out infinite; }
.video-card .play-btn .disc svg { width: 22px; height: 22px; color: #fff; fill: currentColor; stroke: none; margin-left: 3px; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card .caption { position: absolute; left: 18px; bottom: 16px; color: #fff; font-size: var(--fs-sm); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); display: flex; align-items: center; gap: 8px; }
.video-card .caption .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ---------------------------------------------------------------- marquee ticker + client logos */
.ticker-section { padding: 22px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-tint); overflow: hidden; }
.ticker-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; gap: 46px; animation: marquee 26s linear infinite; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .14em; color: var(--ink); font-weight: 600; text-transform: uppercase; }
.ticker-track > div { flex: none; }
.ticker-item { display: flex; align-items: center; gap: 8px; }
.ticker-ic { width: 14px; height: 14px; flex: none; }
.ticker-dot { color: var(--text-mute3); font-weight: 400; }

.clients-section { padding: 56px 28px 64px; }
.clients-label { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--text-mute3); margin-bottom: 30px; }
.marquee-viewport { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 52px; padding: 0 26px; animation: marquee 55s linear infinite; }
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
.client-tile { flex: 0 0 auto; height: 52px; display: flex; align-items: center; justify-content: center; }
.client-tile img { width: auto; height: auto; max-height: 100%; max-width: 168px; object-fit: contain; filter: grayscale(100%); opacity: .6; transition: filter .25s ease, opacity .25s ease; }
.client-tile:hover img { filter: grayscale(0%); opacity: 1; }
.client-tile.text-tile { height: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--text); text-align: center; white-space: nowrap; padding: 8px 2px; border-bottom: 2px dotted var(--line-strong); }
.clients-more { text-align: center; margin-top: 30px; font-size: var(--fs-md); }
.clients-more a { font-weight: 600; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .ticker-track { animation: none !important; }
  .marquee-viewport, .ticker-mask { overflow-x: auto; }
}

/* ---------------------------------------------------------------- sections generic */
.section { padding: 92px 28px; }
.section.tint { background: var(--paper-tint); border-top: 1px solid var(--line); }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: left; }
/* ALIGNMENT FIX. A left-aligned head was a 720px block centred with margin:auto, so its
   text floated ~250px in from the content edge with nothing lined up under it (AI Engine
   "Reporting"). Left-aligned heads now sit on the content edge; .center heads still centre.
   Same pass: .ai-hero-grid / .ocr-grid / .walk-grid gained the 28px inner gutter that .wrap
   has, so every section on every page shares one content edge (108px at 1440px). */
.section-head:not(.center) { margin-left: 0; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.14; margin: 14px 0 0; }
/* promoted eyebrow -> section headline (client revision): big display type, sentence
   case as written, no mono / uppercase / letter-spacing treatment. */
.section-head h2:first-child, .section-head h2.section-lead { margin-top: 0; }
h2.section-lead { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -.02em; color: var(--ink); }
.section-head p { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-muted); margin: 16px 0 0; }
/* "Sharp block" demo (client reference: powercontrol.co / quicko.com) — plain white
   background, solid black text throughout, no muted grays. Scoped to the USP section
   only for now; roll out site-wide once confirmed. */
.usp-title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.03em; margin-top: 12px; }
.usp-head-sharp p { color: var(--ink); }
/* The ticker strip directly above already provides a visual break, so the section's
   default 92px top padding reads as a dead gap here — tighten it for this section only. */
#usp.section { padding-top: 52px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 22px; }
/* The Ask AI section's two-column grid (copy + chatbot mockup) used auto-fit's own
   floor (340px per column) to decide when to stack -- which meant anywhere from about
   700px to 900px of window width, BOTH columns got squeezed toward that 340px floor
   at the same time instead of the layout switching to single-column. That's exactly
   what "the chatbot window comes very very thin" was: on a narrowed browser window
   (not full mobile-narrow, just a smaller desktop window), the ask-panel was fighting
   the copy column for space instead of getting the full row. Force the stack to
   happen earlier so the demo widget gets full section width as soon as room gets
   tight, rather than being squeezed down to a sliver first. */
@media (max-width: 900px) {
  #ask-ai .grid-2 { grid-template-columns: 1fr; }
}


.feat-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 26px; box-shadow: var(--shadow-sm); }
.feat-card .ic-tile { width: 44px; height: 44px; border-radius: var(--radius); background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feat-card .ic-tile .icon { width: 22px; height: 22px; }
.feat-card h3 { font-size: var(--fs-xl); margin-bottom: 10px; }
.feat-card p { font-size: var(--fs-base); line-height: 1.6; color: var(--text-mute2); }

/* ---------------------------------------------------------------- pricing */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap: 22px; }
.plan-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.plan-card.featured { border: 1px solid var(--brand); box-shadow: var(--shadow-md); }
.plan-flag { position: absolute; top: -13px; left: 28px; background: var(--brand); color: #fff; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius); }
.plan-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 5px 10px; align-self: flex-start; }
.plan-tag.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-card h3 { font-size: var(--fs-2xl); margin: 16px 0 8px; }
.plan-desc { font-size: var(--fs-base); line-height: 1.55; color: var(--text-mute2); min-height: 44px; }
.plan-price { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--brand); text-transform: uppercase; margin: 16px 0 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.plan-card ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.plan-card li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); color: var(--text); line-height: 1.4; }
.plan-card li .icon { flex: none; width: 16px; height: 16px; color: var(--brand); margin-top: 2px; }

/* ---------------------------------------------------------------- quote / testimonial cards */
.quote-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Solid, not glass. The contact page's cards blur a real orange gradient behind
     them; this one sat on a near-plain background, so the blur did nothing but make
     the quote text sit on a slightly muddy surface. Glass is now only on the sticky
     header and the contact page, where there is something behind it. */
  background: var(--paper);
  padding: 28px;
  box-shadow: 0 4px 20px -4px rgba(10,10,10,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.quote-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -6px rgba(10,10,10,.12); }
.quote-card .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); line-height: 1; color: var(--brand); opacity: .35; }
.quote-text { font-size: var(--fs-base); line-height: 1.65; color: var(--text); margin-top: 8px; }
.quote-who { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); margin-top: 16px; color: var(--ink); }
.quote-role { font-size: var(--fs-sm); color: var(--text-mute3); margin-top: 2px; }

/* ---------------------------------------------------------------- blog cards */
.blog-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.blog-card .thumb { height: 140px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ink), var(--ink-soft)); color: var(--brand-light); }
.blog-card .thumb .icon { width: 40px; height: 40px; }
.blog-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card .tag { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.blog-card h3 { font-size: var(--fs-xl); line-height: 1.3; }
.blog-card p { font-size: var(--fs-md); line-height: 1.55; color: var(--text-mute2); flex: 1; }
.blog-card .readmore { font-size: var(--fs-md); font-weight: 600; color: var(--brand); }

/* ---------------------------------------------------------------- cta band */
.cta-band { border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: radial-gradient(700px 320px at 15% 0%, rgba(249,155,49,.14), transparent 70%), var(--paper); padding: clamp(24px,3vw,52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: 40px; align-items: center; }
.cta-band h2 { font-size: var(--fs-4xl); margin: 12px 0 0; }
.cta-band p { font-size: var(--fs-ui); line-height: 1.6; color: var(--text-muted); margin: 14px 0 0; max-width: 480px; }
.cta-assurances { display: flex; flex-direction: column; gap: 12px; }
.assure-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 16px 18px; }
.assure-card .t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); color: var(--ink); }
.assure-card .d { font-size: var(--fs-base); color: var(--text-mute2); margin-top: 5px; line-height: 1.5; }

.dark-band { border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--ink); color: rgba(255,255,255,.72); padding: 72px 40px; }
.dark-band h2, .dark-band h3 { color: #fff; }
.dark-band p { color: rgba(255,255,255,.68); }
.dark-band .eyebrow { color: rgba(255,255,255,.55); }
.dark-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.dark-band h2 { color: #fff; font-size: var(--fs-4xl); margin: 10px 0 0; }
.dark-band p { color: rgba(255,255,255,.68); font-size: var(--fs-ui); line-height: 1.6; margin: 14px 0 0; max-width: 500px; }
.dark-band .assure-card.dark { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); border-radius: var(--radius); box-shadow: none; }
.dark-band .assure-card.dark .t { color: #fff; }
.dark-band .assure-card.dark .d { color: rgba(255,255,255,.6); }
.dark-band .ac-eyebrow.brand { color: var(--brand-light); }
.dark-band .ac-eyebrow.green { color: #6fcf97; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--paper-tint); border-top: 1px solid var(--line); padding: 56px 28px 26px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px), 1fr)); gap: 40px; }
.footer-brand p { font-size: var(--fs-base); line-height: 1.6; color: var(--text-mute2); margin: 12px 0 0; max-width: 320px; }
.foot-h { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .16em; color: var(--text-mute3); text-transform: uppercase; }
.footer-grid ul { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; font-size: var(--fs-base); }
.footer-grid ul li { color: var(--text); }
.footer-grid ul a { color: var(--text); }
.footer-grid ul a:hover { color: var(--brand); }
.foot-link { display: inline-block; margin-top: 4px; font-size: var(--fs-md); font-weight: 600; }
.social-row { display: flex; gap: 12px; margin-top: 16px; }
.social-row a { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text); }
.social-row a:hover { border-color: var(--brand); color: var(--brand); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-mute2); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); color: #fff; }
.wa-float .icon { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- AI Engine page specific */
.ai-hero { position: relative; padding: 92px 28px 0; overflow: hidden; background: radial-gradient(900px 520px at 72% 6%, rgba(249,155,49,.14), transparent 70%), radial-gradient(700px 440px at 10% 100%, rgba(10,10,10,.08), transparent 70%), var(--paper); }
.ai-hero-grid { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,400px), 1fr)); gap: 56px; align-items: center; padding-bottom: 84px; }
.ai-hero h1 { font-size: var(--fs-h1); line-height: 1.03; margin: 24px 0 0; text-wrap: balance; font-weight: 800; letter-spacing: -.035em; }
.ai-hero h1 .grad { background: linear-gradient(100deg, var(--brand-deep), var(--brand) 55%, var(--ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-hero .lede { font-size: var(--fs-lede-lg); line-height: 1.62; color: var(--text-muted); max-width: 580px; margin: 22px 0 0; }
/* Hero proof chips (AI Engine). This rule existed in the early icast-erp-redesign build
   and was lost from v9 onward, so these five claims rendered as bare stacked lines that
   also sat flush against the CTA buttons. Light-theme version of the original pills. */
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 600px; }
.hero-chip { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); background: var(--paper); border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--radius-pill); line-height: 1.3; white-space: nowrap; }

.orbit-wrap { position: relative; min-width: 0; height: 440px; display: flex; align-items: center; justify-content: center; }
.orbit-ring { position: absolute; border-radius: 50%; }
.orbit-ring.r1 { width: 380px; height: 380px; border: 1px solid var(--line); animation: pulseRing 6s ease-in-out infinite; }
.orbit-ring.r2 { width: 276px; height: 276px; border: 1px dashed var(--line-strong); animation: orbit 26s linear infinite; }
.orbit-ring.r2 .dot-a { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 18px var(--brand); }
.orbit-ring.r2 .dot-b { position: absolute; bottom: -6px; left: 22%; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 14px var(--brand); }
.orbit-ring.r3 { width: 172px; height: 172px; border: 1px solid var(--line-strong); animation: orbitRev 18s linear infinite; }
.orbit-ring.r3 .dot-c { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-deep); box-shadow: 0 0 14px var(--brand-deep); }
.orbit-core { position: relative; width: 142px; height: 142px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--brand-light), var(--brand) 60%, var(--brand-deep)); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 36px rgba(249,155,49,.30); }
.orbit-core .big { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.orbit-core .small { font-family: var(--font-mono); font-size: var(--fs-mock); letter-spacing: .16em; color: #fff; }
.orbit-card { position: absolute; width: 178px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); padding: 12px 13px; animation: floatY 6s ease-in-out infinite; }
.orbit-card .k { font-family: var(--font-mono); font-size: var(--fs-mock); letter-spacing: .12em; color: var(--brand); }
.orbit-card .t { font-size: var(--fs-sm); color: var(--ink); margin-top: 5px; line-height: 1.35; }

.num-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .18em; color: var(--brand); text-transform: uppercase; }
.num-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); }

.ask-panel { border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--paper), var(--paper-alt)); overflow: hidden; box-shadow: var(--shadow-sm); }
.ask-panel .bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--paper-alt); }
.ask-panel .bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.ask-panel .bar .label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--text-mute3); }
.ask-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; min-height: 436px; }
.ask-q-row { display: flex; justify-content: flex-end; }
.ask-q { max-width: 78%; background: var(--paper-alt); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 16px; font-size: var(--fs-base); line-height: 1.5; color: var(--ink); }
.ask-a-row { display: flex; gap: 12px; align-items: flex-start; }
.ask-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--brand-light), var(--brand-deep)); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-2xs); color: #fff; }
.ask-a-box { flex: 1; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.ask-a-text { font-size: var(--fs-ui); line-height: 1.62; color: var(--ink-soft); white-space: pre-wrap; }
.caret { color: var(--brand); animation: caret 1s step-end infinite; }
.ask-table { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: none; }
.ask-table.show { display: block; }
.ask-table .thead { display: grid; grid-template-columns: 1.5fr 1fr 1fr; background: var(--wash-apricot); border-bottom: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--text-muted); padding: 10px 14px; }
.ask-table .thead div:not(:first-child) { text-align: right; }
.ask-table .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-top: 1px solid var(--line-soft); padding: 11px 14px; font-size: var(--fs-md); color: var(--text); }
.ask-table .row div:nth-child(2) { text-align: right; font-family: var(--font-mono); }
.ask-table .row div:nth-child(3) { text-align: right; font-family: var(--font-mono); }
.ask-actions { display: none; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.ask-actions.show { display: flex; }
.ask-actions .a1 { font-size: var(--fs-sm); color: #fff; background: var(--brand); border-radius: var(--radius); padding: 8px 12px; font-weight: 600; }
.ask-actions .a2 { font-size: var(--fs-sm); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 12px; }
.ask-input-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt); padding: 12px 14px; margin-top: auto; }
.ask-input-row .prompt { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--brand); }
.ask-input-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); }
.ask-input-row button { flex: none; border: 0; border-radius: var(--radius); background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); padding: 9px 14px; }

.ask-points { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ask-points > div { display: flex; gap: 12px; align-items: flex-start; }
.ask-points .b { flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.ask-points span.tx { font-size: var(--fs-ui); line-height: 1.55; color: var(--text); }
.ask-suggestions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.ask-chip { cursor: pointer; font-size: var(--fs-md); line-height: 1.35; padding: 10px 13px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--text-muted); background: var(--paper); }
.ask-chip.active { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); }

.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 22px; margin-top: 40px; }
.report-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.report-card .rc-head { padding: 26px 26px 20px; }
.report-card .rc-kicker { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; }
.report-card h3 { font-size: var(--fs-2xl); margin: 12px 0 0; }
.report-card p { font-size: var(--fs-ui); line-height: 1.6; color: var(--text-mute2); margin: 12px 0 0; }
.mis-mock { position: relative; margin: 0 26px 26px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper-alt); height: 250px; overflow: hidden; }
.mis-sweep { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(249,155,49,.28), transparent); height: 40%; animation: sweepY 3.6s linear infinite; }
.mis-inner { padding: 18px 20px; position: relative; z-index: 1; }
.mis-title-row { display: flex; justify-content: space-between; align-items: baseline; }
.mis-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.mis-auto { font-family: var(--font-mono); font-size: var(--fs-mock-xs); color: var(--text-mute2); }
.mis-rule { height: 1px; background: var(--line); margin: 9px 0 12px; }
.mis-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mis-stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 9px; background: #fff; }
.mis-stat .k { font-family: var(--font-mono); font-size: var(--fs-mock-xs); color: var(--text-mute3); letter-spacing: .08em; }
.mis-stat .v { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin-top: 3px; }
.mis-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mis-lines .ln { height: 5px; border-radius: 2px; background: var(--line); }
.mis-bars { margin-top: 12px; display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.mis-bars .bar { flex: 1; border-radius: 2px; transform-origin: bottom; animation: barGrow .8s cubic-bezier(.2,.8,.2,1) both; }

.dash-mock { margin: 0 26px 26px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); min-height: 250px; overflow: hidden; }
.dash-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.dash-bar .d1 { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-light); }
.dash-bar .d2 { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.dash-bar .d3 { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.dash-bar .url { font-family: var(--font-mono); font-size: var(--fs-mock-xs); color: var(--text-mute3); margin-left: 6px; }
.dash-grid { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt); padding: 11px 12px; }
.dash-tile .k { font-family: var(--font-mono); font-size: var(--fs-mock-xs); letter-spacing: .1em; color: var(--text-mute3); }
.dash-tile .v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--ink); margin-top: 4px; }
.dash-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 8px; }
.dash-spark div { flex: 1; border-radius: 2px; opacity: .85; }

.ocr-grid { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 52px; align-items: center; }
.ocr-panel { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 22px; position: relative; }
.ocr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap: 16px; align-items: stretch; }
.ocr-doc { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper-alt); padding: 14px; position: relative; min-height: 280px; overflow: hidden; }
.ocr-scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand); box-shadow: 0 0 14px var(--brand); animation: sweepY 2.8s linear infinite; }
.ocr-doc-title { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; color: var(--ink); }
.ocr-doc-sub { font-family: var(--font-mono); font-size: var(--fs-mock-xs); color: var(--text-mute2); margin-top: 3px; }
.ocr-doc-rule { height: 1px; background: var(--line); margin: 9px 0; }
.ocr-doc-line { height: 5px; border-radius: 2px; background: var(--line-strong); margin-top: 7px; }
.ocr-fields { display: flex; flex-direction: column; gap: 9px; }
.ocr-fields-label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--brand); }
.ocr-field { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-alt); padding: 9px 11px; }
.ocr-field .k { font-family: var(--font-mono); font-size: var(--fs-mock-xs); letter-spacing: .1em; color: var(--text-mute3); }
.ocr-field .v { font-size: var(--fs-md); color: var(--ink); margin-top: 3px; }
.ocr-matched { margin-top: auto; font-size: var(--fs-sm); color: var(--brand); font-family: var(--font-mono); }
.ocr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.ocr-stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 16px; }
.ocr-stat .v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); }
.ocr-stat .k { font-size: var(--fs-md); color: var(--text-mute2); margin-top: 5px; line-height: 1.4; }

.predict-section { padding: 100px 28px; background: linear-gradient(180deg, var(--paper-tint), var(--paper)); border-top: 1px solid var(--line); }
.predict-head { max-width: 780px; }
.predict-head h2 { font-size: var(--fs-h2); line-height: 1.1; margin: 16px 0 0; text-wrap: balance; }
.predict-head p { font-size: var(--fs-lg); line-height: 1.62; color: var(--text-muted); margin: 18px 0 0; }
.predict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: 22px; margin-top: 44px; align-items: stretch; }
.risk-card { border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--paper); padding: 26px; box-shadow: var(--shadow-sm); }
.risk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.risk-head .t { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.risk-head .m { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-mute3); letter-spacing: .1em; }
.risk-chart { position: relative; height: 250px; margin-top: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; gap: 12px; }
.risk-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 8px; }
.risk-bar { border-radius: 2px; transform-origin: bottom; animation: barGrow .8s cubic-bezier(.2,.8,.2,1) both; }
.risk-bar.actual { background: linear-gradient(180deg, var(--ink-soft), var(--ink)); }
.risk-bar.pred { background: linear-gradient(180deg, #E8968A, var(--brand)); opacity: .92; border: 1px dashed rgba(10,10,10,.18); }
.risk-lbl { font-family: var(--font-mono); font-size: var(--fs-mock); color: var(--text-mute3); text-align: center; }
.risk-target { position: absolute; left: 0; right: 0; top: 38%; border-top: 1px dashed var(--line-strong); }
.risk-target-lbl { position: absolute; right: 0; top: 31%; font-family: var(--font-mono); font-size: var(--fs-mock); color: var(--green); }
.risk-legend { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-mute3); }
.risk-legend > div { display: flex; align-items: center; gap: 7px; }
.risk-legend .sw { width: 9px; height: 9px; border-radius: 2px; }
.risk-legend .sw.actual { background: var(--ink); }
.risk-legend .sw.pred { background: var(--brand); }

.presc-list { display: flex; flex-direction: column; gap: 14px; }
.presc-card { border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--paper); padding: 20px; flex: 1; }
.presc-card:hover { border-color: var(--brand); }
.presc-top { display: flex; align-items: center; gap: 9px; }
.presc-pill { font-family: var(--font-mono); font-size: var(--fs-mock); letter-spacing: .12em; padding: 4px 8px; border-radius: var(--radius); color: #fff; }
.presc-pill.high { background: var(--ink); }
.presc-pill.medium { background: var(--brand); }
.presc-pill.low { background: var(--text-muted); }
.presc-when { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-mute3); letter-spacing: .1em; }
.presc-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.015em; margin-top: 11px; line-height: 1.3; }
.presc-body { font-size: var(--fs-base); line-height: 1.55; color: var(--text-mute2); margin-top: 8px; }
.presc-action { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: var(--fs-md); color: var(--brand); }

.predict-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 18px; margin-top: 22px; }
.pu-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 22px; }
.pu-card .k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--brand); }
.pu-card h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin-top: 10px; letter-spacing: -.015em; }
.pu-card p { font-size: var(--fs-md); line-height: 1.55; color: var(--text-mute2); margin-top: 8px; }

.walk-grid { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 48px; align-items: center; }
.chapters { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }
.chapter { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line-soft); padding-top: 11px; font-size: var(--fs-base); color: var(--text); }
.chapter .t { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--brand); }
.walk-video { background: var(--paper-tint); border-radius: var(--radius); }

.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-mute2); }
/* Audit cleanup: small static presentation choices that were sitting in style="" attributes
   in index.html / ai-engine.html. Per-element DATA values (chart bar heights/widths/opacity,
   the --i stacking index on .advisor-avatar) are left inline on purpose — those are content,
   not styling, the same way an SVG's x/y/width attributes are. */
.c-ink { color: var(--ink); }
.eyebrow.on-dark, .ac-eyebrow.brand { color: var(--brand-text); }
.ac-eyebrow.green { color: var(--green); }
.dark-band .hero-ctas { margin-top: 26px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* AI Engine page cleanup: one-off headline sizes / spacing that were sitting in
   style="" attributes. Per-bar chart data (heights, widths, opacity, colour,
   animation-delay on the report-card / MIS mockups) is left inline on purpose --
   that's content driving geometry, the same as an SVG's own x/y/width. */
.grid-2.align-center { align-items: center; }
.fs-38 { font-size: var(--fs-5xl); }
.fs-40 { font-size: var(--fs-5xl); }
.fs-42 { font-size: var(--fs-5xl); }
.mt-14 { margin-top: 14px; }
.mt-8 { margin-top: 8px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.max-w-520 { max-width: 520px; }
.d-block { display: block; }
.brand-name.sm { font-size: var(--fs-xl); }
.mono-tag.on-dark-block { display: block; margin-top: 8px; }
.rc-kicker.orange { color: var(--orange); }
.rc-kicker.teal { color: var(--teal); }
/* the two lede paragraphs under AI Engine section heads only differed by a
   copy-paste rounding slip (17.5px/1.65 vs 17px/1.62) -- unified on one class. */
.ai-lede { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-muted); margin-top: 16px; }
.ai-cta-row { margin-top: 26px; font-size: var(--fs-xs); letter-spacing: .06em; }


/* =================================================================================
   HERO ANIMATION — point #1. Shyamal's Claude Design export, now a TRUE INLINE embed:
   the React composition mounts directly into #icast-hero-anim in this page's own DOM
   (no iframe). Everything the export's own base stylesheet did is ported here SCOPED
   UNDER #icast-hero-anim — deliberately no global html/body/a/* rules, so none of the
   animation's styling can leak out and restyle the warm espresso theme.
   ================================================================================= */
/* No panel: no background, no border, no radius, no shadow — the animation sits
   directly on the hero's own warm background, Wave-style.
   Client revision (2026-09-05, new composition swap): the OLD composition held a
   near-constant framing throughout its timeline, so a static ~15% crop-zoom (scaled
   up, shifted up-left) could safely crop its fixed blank margin without ever cutting
   real content. The NEW composition's own camera zooms continuously — pulled back
   and edge-on at the start, straight-on mid-timeline, then pushing all the way in
   until the "Melting Register" dialog fills the frame — so the dashboard's on-canvas
   size is not constant. A static crop tuned to any one of those moments cuts real
   content (table text, card edges, the dialog's close button) at the others. Verified
   at t=0.3s/8s/14s: the composition already fills the frame well on its own once left
   uncropped, so .ha-stage/.ha-embed now show the full 1600x900 canvas as authored
   (no extra scale/offset) — small breathing-room margins during the pulled-back
   Assemble phase beat cropping the full-screen Register dialog. The frame itself
   still sits near the "Discover AI Features" button and its top lines up with the
   badge pill above the headline. */
.ha-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Grows the frame purely toward the LEFT (width and the pull cancel out on the
     right edge, which already sits at the true viewport edge — see hero-grid's own
     padding — so bleeding further right would just be clipped, invisibly, by
     .hero's overflow:hidden and push the on-frame replay button off-screen with it).
     Client revision: this used to pull -40px, which ate the whole 20px hero-grid
     column gap AND overlapped another 20px past it, leaving almost no breathing
     room between the "Discover AI Features" button and the frame. Pulls only -6px
     now, so the visible gap (20px column gap - 6px) is 14px — the same as the gap
     between the two hero buttons (.hero-ctas gap). */
  width: calc(100% + 6px);
  margin-left: -6px;
}
.ha-embed {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Icon-only replay control, overlaid directly on the animation frame (replaces the old
   text button that sat below it). Client revision: the animation now plays once and
   holds — this restarts it. */
.ha-replay-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10,10,10,.20);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ha-replay-fab:hover { transform: scale(1.07); box-shadow: 0 8px 22px rgba(10,10,10,.28); border-color: var(--brand); }
.ha-replay-fab .icon { width: 17px; height: 17px; color: var(--brand); margin-left: 2px; }

/* The composition's root is position:absolute; inset:0 (the export mounted it with that
   inline style), so the container must establish a containing block and clip anything
   that would otherwise spill over the page. Position itself now comes from .ha-embed
   above (absolute, scaled/offset for the crop) — this rule only adds the rest. */
#icast-hero-anim {
  overflow: hidden;
  isolation: isolate;
  background: transparent;        /* was #F6F8FB (the export's own html/body colour) —
                                     killed so the hero's background shows straight through */
  color: #3D4551;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}
/* Manrope now comes from the site's own Google Fonts request in build.py's page()
   head, instead of six base64 woff2 blobs inlined in the export. */
#icast-hero-anim, #icast-hero-anim * { box-sizing: content-box; }
#icast-hero-anim svg { display: block; }
/* the composition canvas <svg> carries an inline `box-shadow: 0 20px 60px rgba(0,0,0,.4)`
   (dc runtime Stage) which would draw a panel edge around the now-transparent embed. */
#icast-hero-anim > * > * > svg, #icast-hero-anim [data-om-exportable-video-with-duration-secs] { box-shadow: none !important; }
/* the runtime's <foreignObject> wrapper paints the stage `bg` prop — now "transparent". */
#icast-hero-anim foreignObject > div { background: transparent !important; }
/* Anchor colours from the export's base CSS, scoped so the site's links are untouched. */
#icast-hero-anim a { color: #2F6FBF; text-decoration: none; }
#icast-hero-anim a:hover { color: #E88B1E; }
/* Kill the export's playback chrome: the transport/scrubber bar under the stage and the
   draggable tweaks panel both carry data-omelette-chrome. MUST stay — this is what makes
   the embed autoplay-and-loop with no visible player UI. */
#icast-hero-anim [data-omelette-chrome] { display: none !important; }
/* …but the stage still *reserves* 44px of height for that bar when it computes its
   fit-scale, which would shrink the 1600x900 composition and leave black letterbox
   bars inside our 16:9 frame. Bleed the stage 22px past the top and bottom edges
   (clipped by the overflow:hidden above) so its measured height is the 900-unit
   height + 44, cancelling the reservation exactly and keeping the frame centred.
   !important is required: the export sets inset:0 as an inline style. */
#icast-hero-anim [data-om-starter="animations-v3"] {
  top: -22px !important;
  bottom: -22px !important;
  background: transparent !important;  /* was #E9EBEF over the stage's inline #0a0a0a —
                                          both are now gone, so the page shows through */
}

/* ---------------------------------------------------------------- USP interactive (WaveApps-style list + panel, point #16/#17) */
.usp-interactive { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; box-shadow: var(--shadow-sm); }
.usp-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper-alt); }
.usp-item { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; border: none; border-bottom: 1px solid var(--line-soft); background: transparent; cursor: pointer; padding: 20px 22px; font-family: inherit; color: var(--ink-soft); transition: background .15s ease, border-color .15s ease; }
.usp-item:last-child { border-bottom: none; }
.usp-item:hover { background: var(--brand-tint); }
.usp-item-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-strong); color: var(--text-mute2); display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.usp-item-ic .icon { width: 18px; height: 18px; }
.usp-item-label { flex: 1; font-weight: 600; font-size: var(--fs-base); line-height: 1.35; }
.usp-item-arrow { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-mute3); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.usp-item.active { background: var(--paper); border-left: 3px solid var(--brand); padding-left: 19px; }
.usp-item.active .usp-item-ic { background: var(--brand); border-color: var(--brand); color: #fff; }
.usp-item.active .usp-item-label { color: var(--ink); }
.usp-item.active .usp-item-arrow { opacity: 1; transform: translateX(0); color: var(--brand); }
.usp-stage { position: relative; padding: 40px; min-height: 420px; display: flex; }
.usp-panel { display: none; flex-direction: column; gap: 18px; opacity: 1; }
.usp-panel.active { display: flex; }
.usp-panel h3 { font-size: var(--fs-2xl); margin: 0; color: var(--ink); }
.usp-panel p { font-size: var(--fs-ui); line-height: 1.65; color: var(--ink); max-width: 46ch; }
.usp-panel p a { font-weight: 600; }
.usp-panel {
  padding: 0;
}
.usp-visual { flex: 1; min-height: 220px; border-radius: var(--radius); background: linear-gradient(160deg, var(--paper-tint), var(--wash-apricot)); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; }
/* Vectorised "Least Cost Charge Calculation" mockup (point #6) — a redrawn, on-brand
   stand-in for the real Meltix screen, framed inside the same soft gradient box as
   the other USP visuals. */
.usp-visual-vector { width: 100%; height: 100%; padding: 14px; }
/* The vector mockup has a fixed aspect ratio and doesn't need to stretch to fill the
   tall placeholder box's height — let it size to its own content instead of leaving
   dead space above/below it. */
.usp-visual:has(.usp-visual-vector) { flex: 0 0 auto; min-height: 0; }
/* Wave-style split for a panel carrying a vector visual: copy on the left, the
   illustration on the right, instead of stacked top/bottom. */
.usp-panel:has(.usp-visual-vector) { flex-direction: row; align-items: flex-start; gap: 32px; }
.usp-panel:has(.usp-visual-vector) .usp-copy { flex: 0 0 300px; display: flex; flex-direction: column; gap: 18px; }
.usp-panel:has(.usp-visual-vector) .usp-visual { flex: 1; margin: 0; }
@media (max-width: 860px) {
  .usp-panel:has(.usp-visual-vector) { flex-direction: column; }
  .usp-panel:has(.usp-visual-vector) .usp-copy { flex: none; }
}
.melt-visual-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(10,10,10,.10)); }
.melt-pulse-cell { fill: var(--brand-tint); animation: meltPulse 2.4s ease-in-out infinite; }
@keyframes meltPulse { 0%, 100% { fill: var(--brand-tint); } 50% { fill: var(--brand-light); } }
@media (prefers-reduced-motion: reduce) {
  .melt-pulse-cell { animation: none; fill: var(--brand-tint); }
}
.usp-visual-placeholder { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-mute3); text-align: center; padding: 20px; }
.usp-visual-placeholder .icon-tile { width: 56px; height: 56px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px -4px rgba(10,10,10,.10); display: flex; align-items: center; justify-content: center; }
.usp-visual-placeholder .icon { width: 26px; height: 26px; color: var(--brand); }
.usp-visual-placeholder span { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; max-width: 26ch; }
/* Desktop/tablet: the click-a-title / right-panel pattern. On phones this reads as
   a wall of six stacked titles with only one panel shown below, so under 860px we hide
   it entirely and show .usp-mobile-stack instead — one feature's title, write-up and
   visual as a self-contained section per scroll stop (client revision: mobile USP flow). */
.usp-mobile-stack { display: none; }
@media (max-width: 860px) {
  .usp-interactive { display: none; }
  .usp-mobile-stack { display: flex; flex-direction: column; }
  .usp-mobile-item { display: flex; flex-direction: column; gap: 16px; padding: 44px 0; border-bottom: 1px solid var(--line); }
  .usp-mobile-item:first-child { padding-top: 8px; }
  .usp-mobile-item:last-child { border-bottom: none; padding-bottom: 8px; }
  .usp-mobile-head { display: flex; align-items: center; gap: 12px; }
  .usp-mobile-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); background: var(--brand); border: 1px solid var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
  .usp-mobile-ic .icon { width: 20px; height: 20px; }
  .usp-mobile-item h3 { font-size: var(--fs-xl); margin: 0; }
  .usp-mobile-item p { font-size: var(--fs-base); line-height: 1.62; color: var(--ink); margin: 0; }
  .usp-mobile-item .usp-visual { min-height: 200px; }
}

/* ---------------------------------------------------------------- experimental dark belt (client reference: veilsun.com) */
/* Mid-page dark accent banner (design brief point #3) — bold black background,
   the core value statement set in large-format type, and a minimalist animated
   data-flow illustration alongside it. */
.ai-belt { position: relative; overflow: hidden; background: var(--navy); padding: 104px 28px; }
.ai-belt-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 56px; text-align: left; }
.ai-belt-copy { max-width: 720px; }
.ai-belt h3 { color: #fff; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 12px 0 0; }
.ai-belt h3 span { color: var(--brand-light); }
.ai-belt p { color: rgba(255,255,255,.6); font-size: var(--fs-lg); line-height: 1.6; margin: 20px 0 0; max-width: 560px; }
.ai-belt .eyebrow { color: rgba(255,255,255,.5); }
.ai-belt-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--brand-light), var(--brand-deep)); pointer-events: none; opacity: .12; }
.ai-belt-dot-1 { width: 260px; height: 260px; right: -80px; top: -130px; }
.ai-belt-dot-2 { width: 160px; height: 160px; left: -60px; bottom: -80px; }
.dataflow { width: 240px; height: 200px; flex: none; }
.dataflow .df-line { stroke: rgba(255,255,255,.22); stroke-width: 1.4; fill: none; }
.dataflow .df-line.live { stroke: var(--brand); stroke-dasharray: 4 6; animation: dataflowDash 6s linear infinite; }
.dataflow .df-node { fill: var(--navy); stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.dataflow .df-node.on { fill: var(--brand); stroke: var(--brand); }
.dataflow .df-pulse { fill: var(--brand); opacity: 0; animation: dataflowPulse 3s ease-in-out infinite; }
.dataflow .df-pulse:nth-child(11) { animation-delay: 1s; }
.dataflow .df-pulse:nth-child(12) { animation-delay: 2s; }
@keyframes dataflowDash { to { stroke-dashoffset: -100; } }
@keyframes dataflowPulse { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@media (max-width: 760px) {
  .ai-belt { padding: 64px 28px; }
  .ai-belt-inner { flex-direction: column; text-align: center; gap: 36px; }
  .ai-belt-copy { text-align: center; }
  .ai-belt p { margin-left: auto; margin-right: auto; }
  .dataflow { width: 200px; height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .dataflow .df-line.live, .dataflow .df-pulse { animation: none; }
}

/* ---------------------------------------------------------------- trust cluster (point #18/#19) */
.trust-cluster { border-top: 1px solid var(--line); }
.tc-banner {
  /* very light / near-white (client revision), with a soft orange "starburst" of thin
     radiating rings behind the copy — decorative only, kept in-palette (brand orange on
     white), never the panel-grey or blue/purple treatments used for reference. */
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--text);
  padding: 64px 28px;
  border-top: 1px solid var(--line-strong);
}
.tc-banner::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0 64px, rgba(249,155,49,.16) 65px 68px, transparent 69px 96px, rgba(249,155,49,.13) 97px 100px, transparent 101px 130px, rgba(249,155,49,.10) 131px 134px, transparent 135px 166px, rgba(249,155,49,.07) 167px 170px, transparent 171px);
}
.tc-banner::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(249,155,49,.12), transparent 72%);
}
.tc-banner-inner, .tc-banner .tc-slider { position: relative; z-index: 1; }
/* Client revision: was align-items:center, which vertically floated the (shorter)
   video block in the middle of the (taller) copy column's row height — a big dead
   band of white space above/below the video, reading as a broken layout. Top-align
   both columns instead so the video sits flush with the eyebrow/heading. */
.tc-banner-inner { display: grid; grid-template-columns: minmax(240px,340px) 1fr; gap: 44px; align-items: start; }
.tc-video { display: flex; flex-direction: column; }
.tc-video-frame { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--paper), var(--wash-peach) 55%, var(--wash-apricot)); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); }
.tc-avatar { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--brand-light), var(--brand-deep)); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); display: flex; align-items: center; justify-content: center; }
.tc-video-frame .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(249,155,49,.14)); border: none; padding: 0; }
.tc-video-frame .play-btn .disc { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(249,155,49,.2); }
.tc-video-frame .play-btn .disc svg { width: 18px; height: 18px; color: #fff; fill: currentColor; stroke: none; margin-left: 2px; }
.tc-video-cap { margin-top: 12px; }
.tc-video-cap .who { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); }
.tc-video-cap .who { color: var(--ink); }
.tc-video-cap .role { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.tc-banner-copy h2 { color: var(--ink); font-size: var(--fs-h2); line-height: 1.14; margin: 12px 0 0; }
.tc-banner-copy p { color: var(--text); font-size: var(--fs-ui); line-height: 1.62; margin: 14px 0 0; max-width: 520px; }
.tc-body { padding: 56px 0 64px; }
.tc-stat-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; text-align: left; }
.tc-stat { display: flex; align-items: baseline; gap: 12px; }
.tc-stat .num { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.tc-stat .lbl { font-size: var(--fs-ui); color: var(--text-muted); }
.tc-see { font-weight: 600; text-decoration: underline; font-size: var(--fs-base); white-space: nowrap; }
.tc-marquee { margin-top: 34px; }
.tc-quotes { margin-top: 44px; }
.tc-cta { text-align: center; margin-top: 40px; }

/* ---------------------------------------------------------------- advisor / onboarding card (point #15) */
.advisor-card { display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; border-radius: var(--radius-card); background: linear-gradient(135deg, var(--brand-tint), var(--wash-apricot)); border: 1px solid var(--line); padding: clamp(28px,4vw,48px); }
.advisor-copy h2 { font-size: var(--fs-h2-sm); margin: 12px 0 0; text-wrap: balance; }
.advisor-copy p { font-size: var(--fs-ui); line-height: 1.62; color: var(--text); margin: 14px 0 0; max-width: 580px; }
.advisor-copy .foot-link { display: inline-block; margin-top: 18px; font-weight: 700; }
.advisor-photos { display: flex; }
/* Real team photos: 96px so a face is recognisable (the 66px initials discs were too small
   for a photo), overlapping stack, white ring to separate each face from its neighbour
   and a soft shadow — the old orange ring on four overlapping faces read as heavy. */
.advisor-avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin-left: -22px; background: var(--paper-alt); box-shadow: 0 0 0 4px var(--paper), 0 8px 22px rgba(10,10,10,.14); position: relative; z-index: calc(10 - var(--i)); }
.advisor-avatar:first-child { margin-left: 0; }
.advisor-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 420px) { .advisor-avatar { width: 76px; height: 76px; margin-left: -18px; } }
@media (max-width: 720px) { .advisor-card { grid-template-columns: 1fr; text-align: center; } .advisor-photos { justify-content: center; } .advisor-copy p { margin-left: auto; margin-right: auto; } }

/* ---------------------------------------------------------------- FAQ (point #11) */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 4px 22px; }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { flex: none; width: 18px; height: 18px; color: var(--brand); transition: transform .2s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 0 20px; }
.faq-a p { font-size: var(--fs-base); line-height: 1.62; color: var(--text-mute2); }

/* ---------------------------------------------------------------- footer restyle (point #7/#8/#9) */
/* Client revision: black footer, white text (was navy). Scoped to the footer only —
   the rest of the site keeps the light tonal-ladder backgrounds. */
.site-footer { background: #0A0A0A; color: #FFFFFF; border-top: 1px solid #262626; }
.site-footer .foot-h { color: #FFFFFF; opacity: .55; }
.footer-grid ul li, .footer-grid ul a { color: #FFFFFF; opacity: .88; }
.footer-grid ul a:hover { color: var(--brand-light); opacity: 1; }
.footer-brand p { color: #FFFFFF; opacity: .78; }
.site-footer .brand-name { color: #fff; }
.site-footer .mono-tag { color: var(--brand-light); }
.site-footer .foot-link { color: var(--brand-light); }
.site-footer .foot-link:hover { color: #fff; }
.footer-caption { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; color: #FFFFFF; opacity: .55; margin-top: 6px; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-badge { display: flex; align-items: center; gap: 7px; border: 1px solid #333333; border-radius: var(--radius); padding: 8px 12px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em; color: #FFFFFF; background: rgba(255,255,255,.06); }
.footer-badge .icon { width: 15px; height: 15px; color: var(--brand-light); }
.social-row a { border-color: #333333; background: rgba(255,255,255,.06); color: #FFFFFF; }
.social-row a:hover { border-color: var(--brand); color: var(--brand-light); }
.footer-bottom { border-top-color: #262626; color: #FFFFFF; opacity: .55; }
.site-footer .brand-name { color: #fff; }

/* ---------------------------------------------------------------- tagline + CTA banner (point #10/#12) */
.cta-banner .wrap,
.dark-band.cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.dark-band.cta-banner .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; }
.btn-ghost.light { border-color: var(--line-strong); background: rgba(255,255,255,.6); color: var(--ink); }
.btn-ghost.light:hover { border-color: var(--brand); color: var(--brand-text); }
/* Sharp bordered card (client reference: veilsun.com's thin-orange-outline, icon-eyebrow
   card pattern) — applied only to the 4 "assurance" cards in the demo-CTA band. Kept
   in the brand orange/green palette; no new hues introduced. */
.assure-card.dark { background: var(--paper); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 22px 20px; box-shadow: none; }
.assure-card.dark .ac-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.assure-card.dark .ac-eyebrow .icon { width: 16px; height: 16px; }
.assure-card.dark .t { color: var(--ink); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.assure-card.dark .d { color: var(--text-muted); margin-top: 6px; }

/* ---------------------------------------------------------------- trust-cluster banner enlarge + watch cue (client revision #4) */
.tc-banner { padding: 96px 28px 104px; }
.tc-banner-inner { grid-template-columns: minmax(280px,420px) 1fr; gap: 56px; }
.tc-video-frame { aspect-ratio: 1/1; }
.tc-avatar { width: 92px; height: 92px; font-size: var(--fs-3xl); }
.tc-video-frame .play-btn .disc { width: 68px; height: 68px; }
.tc-video-frame .play-btn .disc svg { width: 22px; height: 22px; }
.tc-watch-cue { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-shadow: 0 1px 4px rgba(255,255,255,.75); }
.tc-watch-cue .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.tc-banner-copy h2 { font-size: var(--fs-h2); }
.tc-banner-copy p { font-size: var(--fs-ui); max-width: 560px; }
.tc-watch-line { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--brand-text); }
.tc-watch-line .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }

/* ---------------------------------------------------------------- testimonial slider (client revision #5) */
.tc-slider { margin-top: 44px; }
.tc-slider-viewport { overflow: hidden; }
.tc-slider-track { display: flex; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tc-slide-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 22px; }
.tc-slider-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.tc-nav { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.tc-nav .icon { width: 17px; height: 17px; }
.tc-nav.prev .icon { transform: rotate(180deg); }
.tc-nav:hover { border-color: var(--brand); color: var(--brand); }
.tc-nav:disabled { opacity: .35; cursor: default; }
.tc-nav:disabled:hover { border-color: var(--line-strong); color: var(--ink); }
.tc-dots { display: flex; align-items: center; gap: 9px; }
.tc-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); }
.tc-dot.active { background: var(--brand); width: 22px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) {
  .tc-slider-track { transition: none; }
  .tc-dot { transition: none; }
}

/* ---------------------------------------------------------------- pricing ecosystem ladder (client revision #2) */
.tier-ladder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0 18px; align-items: stretch; }
.tier-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 30px 26px; display: flex; flex-direction: column; }
.tier-stage.featured { border-color: var(--ink); box-shadow: var(--shadow-md); background: var(--ink); color: #fff; }
.tier-stage.featured h3, .tier-stage.featured .plan-tag, .tier-stage.featured .plan-desc { color: #fff; }
.tier-stage.featured .plan-desc { color: rgba(255,255,255,.68); }
.tier-stage.featured .tier-index { color: rgba(255,255,255,.4); }
.tier-stage.featured .tier-ic { background: rgba(255,255,255,.12); color: var(--brand-light); }
.tier-top { display: flex; align-items: center; justify-content: space-between; }
.tier-index { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; color: var(--text-mute3); }
.tier-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--brand-light); display: flex; align-items: center; justify-content: center; }
.tier-ic .icon { width: 17px; height: 17px; }
.tier-stage h3 { font-size: var(--fs-2xl); margin: 14px 0 8px; }
.tier-stage .plan-tag { margin-top: 4px; }
.tier-stage .plan-desc { min-height: 0; }
.tier-callout { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 22px; padding: 12px 14px; border-radius: var(--radius); background: var(--paper-alt); border: 1px solid var(--line-soft); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); font-weight: 600; }
.tier-stage.featured .tier-callout { background: rgba(255,255,255,.1); color: #fff; }
.tier-callout .icon { flex: none; width: 15px; height: 15px; color: var(--brand); margin-top: 1px; }
.tier-stage .btn { margin-top: auto; }
.tier-connector { display: flex; align-items: center; justify-content: center; color: var(--line-strong); }
.tier-connector .icon { width: 26px; height: 26px; color: var(--brand); }
@media (max-width: 980px) {
  .tier-ladder { grid-template-columns: 1fr; gap: 14px; }
  .tier-connector { transform: rotate(90deg); margin: -2px 0; }
}

/* ---------------------------------------------------------------- contact / demo form section (client revision #6) */
.demo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; margin-top: 8px; }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 30px; box-shadow: var(--shadow-sm); }
.demo-form .field { display: flex; flex-direction: column; gap: 7px; }
.demo-form .field-full { grid-column: 1 / -1; }
.demo-form label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute3); }
.demo-form input, .demo-form textarea { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-alt); padding: 12px 13px; font-size: var(--fs-base); color: var(--ink); font-family: var(--font-body); resize: vertical; }
.demo-form input:focus, .demo-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.demo-form button { grid-column: 1 / -1; margin-top: 6px; }
.demo-video .video-card { height: 100%; }
.demo-video .video-card .frame { aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-form { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .tc-banner-inner { grid-template-columns: 1fr; }
  .ha-mid { grid-template-columns: 1fr; }
}

/* ================================================================================
   SECTION TONAL LADDER (client revision #3): the dark espresso bands are gone, so
   the page's rhythm now comes from warm tonal steps — white -> cream -> peach ->
   apricot — plus the hero's own soft orange radials. No new hue families.
   ================================================================================ */
#usp.section.tint { background: radial-gradient(1100px 480px at 88% -8%, rgba(249,155,49,.10), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
#advisors.section { background: var(--paper); }
#contact.section.tint { background: var(--wash-cream); }
#pricing.section { background: var(--paper); }
#faq.section.tint { background: radial-gradient(900px 460px at 8% 105%, rgba(10,10,10,.06), transparent 65%), linear-gradient(180deg, var(--wash-peach), var(--wash-cream)); }
#demo-cta.section.tint { background: var(--paper); }
#meltix-cta.section.tint { background: var(--wash-cream); }
.trust-cluster .tc-body {
  /* Client revision: the flat wash-cream fill plus the banner's border-bottom above
     it read as a hard, disconnected seam between the two blocks — a visible line with
     an abrupt color change right under it. Fading paper -> wash-cream over the first
     ~140px (no border at all now) blends the two sections into one continuous panel
     instead of two stacked ones. Faint squiggle-line motif kept, in-palette orange. */
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0, var(--wash-cream) 140px, var(--wash-cream) 100%);
}
/* Bug fix: this section's background used to live on the SAME element as .wrap
   (max-width:1280px, centered) — so the cream fill only ever painted that narrow
   centered column, leaving raw white gutters down both sides of the section on
   any viewport wider than ~1280px+padding (visible edge-to-edge on wide desktop
   screens). Background now lives on .tc-body itself (full width, no max-width),
   with a plain nested .wrap purely for content centering — the fix below. The
   decorative squiggle moves onto that nested .wrap so it stays anchored near the
   content's edge instead of the raw viewport edge. */
.trust-cluster .tc-body > .wrap { position: relative; }
.trust-cluster .tc-body > .wrap::before {
  content: "";
  position: absolute;
  right: -60px;
  top: 18px;
  width: 340px;
  height: 120px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='120' viewBox='0 0 340 120'%3E%3Cpath d='M0 60 C 40 10, 80 110, 120 60 S 200 10, 240 60 S 320 110, 340 60' fill='none' stroke='%23F99B31' stroke-width='3' stroke-linecap='round' opacity='.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.trust-cluster .tc-body > * { position: relative; z-index: 1; }

/* =====================================================================
   v10 REBUILD — Apple.com-style pass: light/white surfaces, big bold
   black type, orange reserved for buttons/borders/accents only, sparing
   glassmorphism (nav bar only — a surface that genuinely has content
   scrolling behind it). Deliberately NOT applied to body content cards:
   translucent white over an already-white page produced the washed-out
   text bug fixed earlier in this project, so glass stays where it does
   real work instead of being decorative everywhere.
   ===================================================================== */
.site-header {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* ---- USP feature carousel (replaces the old 6-tab/panel widget) ---- */
.usp-carousel { position: relative; margin-top: 44px; }
.usp-cards-viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.usp-cards-viewport::-webkit-scrollbar { display: none; }
.usp-cards-track { display: flex; gap: 20px; padding: 6px 2px 18px; }
.usp-card {
  scroll-snap-align: start;
  /* 3.5 cards visible: the half card is the whole point — a partial card is the
     strongest 'there is more' cue there is. At 4-up the peek was only the next
     card's padding, so it read as an empty box rather than as content. */
  flex: 0 0 calc((100% - 60px) / 3.5);
  min-width: 250px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.usp-card-tag {
  position: absolute; top: -12px; left: 20px;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 7px;
}
/* Icon tile above the title removed (client revision) — the card's visual slot below
   already carries the same icon, so the tile was duplicating it and eating the space
   the title needed. Title steps up in size and a hairline rule replaces the tile as
   the separator between the heading and the body copy. */
.usp-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 4px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* Titles run 1–3 lines depending on the feature name; reserving three lines' height
   on desktop keeps every card's hairline rule on the same baseline across the row
   instead of stepping up and down card by card. */
@media (min-width: 861px) {
  .usp-card h3 { min-height: calc(21px * 1.25 * 3); }
}
.usp-card p { font-size: var(--fs-base); line-height: 1.55; color: var(--ink); margin: 0; }
.usp-card-visual { margin-top: 18px; }

/* ---- animated feature mark (replaces the per-card vector screens) ----
   One mark per card: the glyph breathes, two rings radiate out behind it. Kept
   MONOCHROME on purpose -- brand colour on the WhatsApp mark alone would break the
   row, which is the same reason the colour-filled logo was pulled out of the ticker
   strip earlier. Swap `color` on one [data-anim] below if a brand colour is ever
   wanted. Motion is slow, low-amplitude and staggered; anything faster turns a row
   of seven into a distraction. */
.usp-card-anim {
  flex: 1; min-height: 132px; border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--brand-tint), rgba(255,255,255,.4));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.uca-ic {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 4px 14px rgba(10,10,10,.08);
  color: var(--brand-deep);
  animation: ucaBreathe 4.2s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}
.uca-ic svg { width: 27px; height: 27px; }
.uca-ring {
  position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; border: 1.5px solid var(--brand);
  opacity: 0; z-index: 1;
  animation: ucaRing 4.2s ease-out infinite;
  animation-delay: var(--anim-delay, 0s);
}
.uca-ring.r2 { animation-delay: calc(var(--anim-delay, 0s) + 1.4s); }
@keyframes ucaBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes ucaRing {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* Two cards read better with a motion that matches what they describe. */
.usp-card-anim[data-anim="thirdparty"] .uca-ic { animation: ucaNudge 3.6s ease-in-out infinite; }
@keyframes ucaNudge {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}
.usp-card-anim[data-anim="mobile"] .uca-ic { animation: ucaTilt 4.6s ease-in-out infinite; }
@keyframes ucaTilt {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
/* The site already respects this elsewhere; a row of seven looping marks is exactly
   the kind of thing that makes motion-sensitive users leave. */
@media (prefers-reduced-motion: reduce) {
  /* The two [data-anim=...] rules above out-specify a bare `.uca-ic`, so they have to
     be named here as well or those two cards keep animating. Verified: without these
     selectors, 2 of 21 elements were still running. */
  .uca-ic,
  .uca-ring,
  .usp-card-anim[data-anim="thirdparty"] .uca-ic,
  .usp-card-anim[data-anim="mobile"] .uca-ic { animation: none; transform: none; }
  .uca-ring { opacity: .28; }
}

/* Parked: full-width vector treatment, unused while the cards use animated marks. */
.usp-card-visual-vector { padding-top: 6px; }
.usp-card-visual-vector .melt-visual-svg { filter: drop-shadow(0 8px 18px rgba(10,10,10,.10)); }
/* Arrows sit ON the row's edges, vertically centred, rather than in a row underneath
   where they were below the eye line and easy to miss. They overhang the gutter, not
   the card text, so nothing readable is covered. */
.usp-carousel-controls { position: static; }
.usp-nav {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(10,10,10,.14);
  transition: background .15s, border-color .15s, opacity .18s, box-shadow .15s;
}
.usp-nav svg { width: 17px; height: 17px; }
.usp-nav.prev { left: -21px; }
.usp-nav.next { right: -21px; }
.usp-nav.prev svg { transform: rotate(180deg); }
.usp-nav:hover { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 8px 24px rgba(10,10,10,.18); }
/* An arrow pointing at nothing is worse than no arrow — hide each end when there is
   nothing further that way. Toggled from the carousel's scroll handler. */
.usp-carousel.at-start .usp-nav.prev,
.usp-carousel.at-end .usp-nav.next { opacity: 0; pointer-events: none; }

/* Edge fade: a narrow gradient at the container edge only. Deliberately NOT a fade
   across the whole half-card — dimming the card's own text makes it look broken
   instead of continuing. The card stays fully legible; only the last ~70px dissolves. */
.usp-cards-viewport { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent 100%); }
.usp-carousel:not(.at-start) .usp-cards-viewport { mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); }
.usp-carousel.at-end .usp-cards-viewport { mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 100%); }
.usp-carousel.at-start.at-end .usp-cards-viewport { mask-image: none; -webkit-mask-image: none; }
@media (max-width: 860px) {
  .usp-card { flex-basis: 78%; min-width: 240px; }
  /* No gutter to overhang on a phone, so tuck the arrows just inside the edges. */
  .usp-nav.prev { left: 2px; }
  .usp-nav.next { right: 2px; }
  .usp-nav { width: 40px; height: 40px; background: rgba(255,255,255,.94); }
}

/* ---- "Let's Digitalise Your Foundry Together" wave banner (Quicko reference, ICAST palette) ---- */
.wave-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  padding: 84px 40px;
  text-align: center;
}
.wave-banner-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-banner-lines path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.4; }
.wave-banner-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.wave-banner h2 { color: #fff; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.wave-banner p { color: rgba(255,255,255,.9); font-size: var(--fs-ui); line-height: 1.6; margin: 16px 0 30px; }
.btn-wave { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand-deep); font-weight: 700; border-radius: 999px; padding: 15px 30px; }
.btn-wave:hover { background: var(--ink); color: #fff; }
.light-assurances { flex-direction: row; flex-wrap: wrap; margin-top: 28px; }
.light-assurances .assure-card { flex: 1 1 220px; }

/* =====================================================================
   CONTACT PAGE (contact.html) — standalone page behind the header/footer
   "Contact" link. Field set follows meltix.net; layout keeps the v10
   Apple-ish light surfaces, big black type, orange only on the button,
   focus ring and required marks.
   ===================================================================== */
.contact-top { padding-top: 64px; }
.contact-title { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; margin-top: 12px; }
.contact-top .section-head p { color: var(--ink); max-width: 620px; margin-left: auto; margin-right: auto; }
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; margin-top: 48px; }

.contact-form { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); padding: 34px; box-shadow: var(--shadow-sm); }
.contact-form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form .field { display: flex; flex-direction: column; gap: 7px; }
.contact-form .field-full { grid-column: 1 / -1; }
.contact-form label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute3); }
.contact-form .req { color: var(--brand); font-weight: 700; }
.contact-form .opt { color: var(--text-mute3); text-transform: none; letter-spacing: 0; font-size: var(--fs-2xs); }
.contact-form input, .contact-form textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-alt);
  padding: 13px 14px; font-size: var(--fs-base); color: var(--ink); font-family: var(--font-body); resize: vertical;
  transition: border-color .15s, background .15s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); background: var(--paper); }
.contact-form .field.invalid input, .contact-form .field.invalid textarea { border-color: var(--red); background: #fdf6f4; }
.field-error { font-size: var(--fs-sm); color: var(--red); line-height: 1.4; min-height: 0; }
.contact-form .field.invalid .field-error { margin-top: -1px; }
.contact-form button[type="submit"] { grid-column: 1 / -1; margin-top: 8px; }
.form-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-mute2); margin: 0; line-height: 1.5; }
.form-note .req { color: var(--brand); font-weight: 700; }
/* Honeypot — off-screen for people, still fillable by naive bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-success { text-align: center; padding: 18px 6px 8px; }
.contact-success:focus { outline: none; }
.cs-tick { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.cs-tick svg { width: 26px; height: 26px; stroke-width: 2.2; }
.contact-success h2 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.contact-success p { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; max-width: 420px; margin: 0 auto 24px; }
.cs-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.contact-info { display: flex; flex-direction: column; gap: 14px; }
.info-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 22px; box-shadow: var(--shadow-sm); }
.ic-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute3); margin-bottom: 12px; }
.ic-head svg { width: 16px; height: 16px; color: var(--brand); }
.info-card p { font-size: var(--fs-base); line-height: 1.65; color: var(--ink); margin: 0; }
/* BUGFIX: this underline rule used to match .btn links too, and the override that
   cancelled it was removing the BUTTON's own bottom border — which is why the
   "Chat on WhatsApp" button rendered with only three sides. Scoping the underline to
   non-button links fixes it at the source instead of patching over it. */
.info-card a:not(.btn) { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.info-card a:not(.btn):hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
.wa-card .btn { margin-top: 14px; }
.info-map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--fs-sm); color: var(--brand-deep); }
.info-map-link svg { width: 13px; height: 13px; }
.info-note { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--text-muted); padding: 4px 6px; }
.info-note svg { width: 16px; height: 16px; color: var(--green); flex: none; }

@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .contact-form { padding: 24px; }
  .contact-form-body { grid-template-columns: 1fr; }
}

/* =====================================================================
   CONTACT PAGE — glassmorphism pass.
   Glass only reads as glass when there is something behind it to blur, so
   the soft orange gradient blobs below are the point, not decoration: the
   form and info cards are translucent and blur THEM. Text stays solid
   --ink and inputs stay near-opaque, which is what keeps this from
   repeating the washed-out-text problem we hit earlier in the project.
   ===================================================================== */
.contact-top { position: relative; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cb-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .8; }
.cb-1 { width: 560px; height: 560px; top: -160px; left: -110px; background: radial-gradient(circle, rgba(249,155,49,.62), rgba(249,155,49,0) 70%); }
.cb-2 { width: 640px; height: 640px; top: 90px; left: 24%; background: radial-gradient(circle, rgba(255,179,92,.45), rgba(255,179,92,0) 70%); }
.cb-3 { width: 560px; height: 560px; top: 40px; right: -180px; background: radial-gradient(circle, rgba(249,155,49,.40), rgba(249,155,49,0) 70%); }
.cb-4 { position: absolute; bottom: -140px; left: 30%; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .5; background: radial-gradient(circle, rgba(10,10,10,.16), rgba(10,10,10,0) 70%); }
.contact-top > .wrap { position: relative; z-index: 1; }

.contact-form,
.contact-info .info-card {
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 20px 54px rgba(10,10,10,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Safari/Firefox builds without backdrop-filter get a near-solid card instead of an
   unreadable transparent one. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .contact-form, .contact-info .info-card { background: rgba(255,255,255,.94); }
}
.contact-form input, .contact-form textarea {
  background: rgba(255,255,255,.78);
  border-color: rgba(10,10,10,.14);
}
.contact-form input:focus, .contact-form textarea:focus { background: #fff; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-mute3); }

/* ---- bot check field ---- */
.captcha-box { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.78); border: 1px solid rgba(10,10,10,.14); border-radius: var(--radius); padding: 10px 12px; }
.captcha-q { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); letter-spacing: .04em; user-select: none; }
.captcha-box input { flex: 1 1 84px; min-width: 0; padding: 9px 12px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.captcha-refresh { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.captcha-refresh:hover { color: var(--brand-deep); border-color: var(--brand); }
.captcha-refresh svg { width: 15px; height: 15px; }
.captcha-field.invalid .captcha-box { border-color: var(--red); background: #fdf6f4; }
.g-recaptcha { margin-top: 2px; }

/* ---- "what happens next" ---- */
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.ns-item { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 28px 26px; box-shadow: var(--shadow-sm); }
.ns-num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; color: var(--brand); }
.ns-item h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; margin: 12px 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.ns-item p { font-size: var(--fs-base); line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ---- trust strip ---- */
.ct-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.contact-trust .tc-marquee { margin-top: 0; }

@media (max-width: 940px) {
  .next-steps { grid-template-columns: 1fr; gap: 16px; }
}

/* =====================================================================
   v11 — USP section as a static two-row grid (replaces the carousel).
   4 columns; the flagship card spans 2 so seven cards fill 2 x 4 exactly.
   Text only: title, hairline rule, description. The .usp-card base rules
   above still apply; these override the carousel-specific sizing.
   ===================================================================== */
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.usp-grid .usp-card { flex: none; min-width: 0; padding: 30px 26px 32px; }
.usp-grid .usp-card-wide { grid-column: span 2; }
.usp-grid .usp-card h3 { min-height: 0; font-size: var(--fs-xl); }
.usp-grid .usp-card-wide h3 { font-size: var(--fs-2xl); }
.usp-grid .usp-card-wide p { font-size: var(--fs-base); max-width: 560px; }
@media (max-width: 1080px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .usp-grid { grid-template-columns: 1fr; gap: 14px; }
  .usp-grid .usp-card-wide { grid-column: auto; }
}
/* Reserve two title lines on desktop so every hairline rule in a row sits on the
   same baseline, whether the title wraps or not. */
@media (min-width: 1081px) {
  .usp-grid .usp-card h3 { min-height: 66px; display: flex; align-items: flex-end; } /* 2 lines @20px + 14px padding + 1px rule (border-box) */
}
/* Inline links inside a feature card (e.g. the Meltix link) — underlined in brand
   colour so they read as links without shouting inside body copy. */
.usp-card p a { color: var(--brand-deep); border-bottom: 1px solid var(--brand); font-weight: 600; }
.usp-card p a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Pricing ladder -> full variant comparison */
.pricing-compare-cta { text-align: center; margin-top: 38px; }
.pricing-compare-cta p { font-size: var(--fs-md); color: var(--text-mute2); margin: 12px 0 0; }
/* Variants page: section shell spacing + footer CTAs */
.vdetail { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px; }
.matrix-head-copy { display: flex; flex-direction: column; gap: 10px; }
.vfoot-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* MOBILE GUTTERS (uniformity pass). On phones most sections stacked two 28px gutters
   (.section + .wrap) = 56px each side, a 278px text column on a 390px screen, while the
   home hero and the variants page used 28px — so the left edge jumped as you scrolled.
   One 20px gutter everywhere on small screens. (.vwrap's override lives in variants.css,
   which loads after this file.) */
@media (max-width: 640px) {
  .section, .ai-hero { padding-left: 0; padding-right: 0; }
  .wrap, .ai-hero-grid, .ocr-grid, .walk-grid { padding-left: 20px; padding-right: 20px; }
  .hero-grid { padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1fr); }  /* was a 360px minimum column: text ran 10px from the right edge */
  .tc-banner { padding-left: 0; padding-right: 0; }          /* was 28px + the .wrap gutter */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }                           /* full-width, thumb-reachable CTAs */
  /* Forms on the smallest phones (320px): inputs carry an intrinsic minimum width and a
     plain 1fr column will not shrink below its content, so both forms ran past the screen
     edge (Contact clipped its right side). Columns may now shrink, inputs fill them. */
  .demo-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-form, .contact-form-body { grid-template-columns: minmax(0, 1fr); }
  .demo-form input, .demo-form textarea, .contact-form input, .contact-form textarea { width: 100%; min-width: 0; }
  .captcha-box { flex-wrap: wrap; }
}


/* =====================================================================
   BALANCE PASS — two-column layouts. Found by measuring rendered text (not element
   boxes) against the space beside it, site-wide at 1440/1280/1024px. Rule applied:
   content anchors to an edge; empty space only where it is deliberate.
   ===================================================================== */
/* Support card: text was capped at 480px (six short lines) with ~350px of empty card
   before the photos. Wider readable measure (~70 characters), photos larger and
   anchored to the right edge. */
.advisor-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; }
.advisor-photos { justify-self: end; }
/* Meltix band: a 50/50 split left the button stranded mid-card with ~310px empty to
   its right. Text takes the free width; the button anchors to the card's right edge. */
#meltix-cta .cta-band { grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; }
#meltix-cta .cta-band > div:last-child { justify-self: end; }
#meltix-cta .cta-band p { max-width: 640px; }
/* Rejection-risk chart: the card stretched to the prescriptions column beside it,
   leaving a ~250px empty band under the chart. The chart now fills the card. */
.risk-card { display: flex; flex-direction: column; }
.risk-chart { flex: 1; height: auto; min-height: 250px; }
/* Flagship USP card: stretched to its row, ~140px empty at the bottom. Lead-size text
   for the flagship, and a footer link pinned to the bottom (card-footer pattern). */
.usp-grid .usp-card-wide p { font-size: var(--fs-lg); line-height: 1.6; }
.usp-card-foot { margin-top: auto; padding-top: 18px; font-weight: 700; font-size: var(--fs-md); color: var(--brand-deep); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.usp-card-foot:hover { color: var(--ink); }
.usp-card-foot svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  #meltix-cta .cta-band { grid-template-columns: minmax(0, 1fr); }
  #meltix-cta .cta-band > div:last-child { justify-self: start; }
  .advisor-card { grid-template-columns: minmax(0, 1fr); }
  .advisor-photos { justify-self: center; }
}
@media (max-width: 420px) { .advisor-avatar { width: 80px; height: 80px; margin-left: -18px; } }

/* HEADER FIT (901-1180px). The desktop nav appeared from 901px but did not fit until
   ~1080px: links wrapped to a second row and the header grew to 131px on common 1024px
   laptops / iPad landscape. In this band: tighter link spacing, tagline kept on one
   line, and the secondary "Meltix Analytics" button hidden (Meltix stays linked in the
   footer and the home page's Meltix band). */
@media (min-width: 901px) and (max-width: 1180px) {
  .main-nav { gap: 18px; flex-wrap: nowrap; }
  .main-nav a { white-space: nowrap; }
  .header-cta .btn-ghost { display: none; }
  .brand-sub { white-space: nowrap; }
}

/* ---------------------------------------------------------------- assurance-card + squiggle polish (v11 review)
   1. Light assurance cards had no eyebrow layout, so the icon sat on its own line
      above the label in some cards. Same flex/mono treatment as the dark variant.
   2. Labels alternated orange/green with no meaning; one accent per component.
   (.brand is also the header-logo class, which set flex-direction:column here.)
   3. Decorative squiggle sat behind the "Read client stories" link; pushed into the
      right gutter, above the content line. */
.assure-card .ac-eyebrow { display:flex; flex-direction:row; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px; line-height:1.2; }
.assure-card .ac-eyebrow .icon { width:16px; height:16px; flex:none; }
.assure-card .ac-eyebrow.green { color: var(--brand-text); }
.trust-cluster .tc-body > .wrap::before { top:-62px; right:-170px; width:300px; }
@media (max-width:900px){ .trust-cluster .tc-body > .wrap::before { display:none; } }

/* ---------------------------------------------------------------- price line + modelled savings (20 Oct 2026) */
.price-from { display:inline-flex; align-items:baseline; gap:6px; margin:18px 0 0; padding:8px 16px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--paper); font-size:var(--fs-md); color:var(--text-muted); }
.price-from strong { font-family:var(--font-display); font-size:var(--fs-xl); color:var(--ink); letter-spacing:-.01em; }
.price-from span { font-size:var(--fs-sm); }
.section-head.center .price-from { margin-left:auto; margin-right:auto; }

.sv-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:64px; align-items:start; }
.sv-copy h2 { font-size:var(--fs-h2); line-height:1.14; margin:14px 0 0; text-wrap:balance; }
.sv-copy > p { font-size:var(--fs-lede); line-height:1.6; color:var(--text-muted); margin:16px 0 0; max-width:520px; }
.sv-total { display:flex; flex-direction:column; gap:4px; margin:28px 0 0; padding:22px 24px; border-left:4px solid var(--brand); background:var(--wash-cream); border-radius:0 var(--radius) var(--radius) 0; }
.sv-total-num { font-family:var(--font-display); font-size:var(--fs-stat); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.sv-total-lbl { font-size:var(--fs-md); color:var(--text-muted); }
.sv-assume { margin:18px 0 26px; font-size:var(--fs-sm); color:var(--text-muted); }
.sv-assume summary { cursor:pointer; font-weight:600; color:var(--brand-text); width:max-content; }
.sv-assume ul { margin:10px 0 0; padding-left:18px; line-height:1.7; }
.sv-assume p { margin:8px 0 0; font-style:italic; }
.sv-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.sv-row { padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.sv-row-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.sv-name { font-weight:700; font-size:var(--fs-ui); color:var(--ink); }
.sv-val { font-family:var(--font-mono); font-weight:700; font-size:var(--fs-md); color:var(--brand-text); white-space:nowrap; }
.sv-bar { height:6px; border-radius:var(--radius-pill); background:var(--brand-tint); margin:10px 0 8px; overflow:hidden; }
.sv-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand-deep),var(--brand)); }
.sv-note { margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--text-muted); }
@media (max-width:900px){ .sv-grid { grid-template-columns:minmax(0,1fr); gap:36px; } }

.foot-addr { line-height:1.6; max-width:300px; }
.foot-addr strong { font-weight:600; }
/* small-phone header: keep the "By Ellipsis Infotech" line on one row next to the CTA */
@media (max-width:640px){ .brand-sub{white-space:nowrap} .header-cta .btn-primary.btn-sm{padding:9px 14px;font-size:var(--fs-sm)} }
@media (max-width:360px){ .brand-logo{height:40px;min-height:0;max-height:40px} .brand-sub{display:none} .header-cta .btn-primary.btn-sm{padding:8px 11px} }

/* ---------------------------------------------------------------- what every plan includes (21 Oct 2026) */
.price-block { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:18px; }
.section-head.center .price-block { align-items:center; }
.price-block .price-from { margin:0; }
.price-incl-h { margin:6px 0 0; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.price-incl { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; max-width:720px; }
.section-head.center .price-incl { justify-content:center; }
.price-incl li { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill); background:var(--paper); border:1px solid var(--line); font-size:var(--fs-sm); font-weight:500; color:var(--ink); }
.price-incl li .icon { width:14px; height:14px; color:var(--green, #2E7D32); flex:none; }
.price-note { margin:0; font-size:var(--fs-xs); color:var(--text-muted); max-width:620px; line-height:1.5; }
/* support card now has two short paragraphs */
.advisor-copy p + p { margin-top:12px; }
/* the home plans block sits inside .section-head, whose generic <p> rule is larger */
.section-head .price-block .price-incl-h { font-size:var(--fs-2xs); line-height:1.4; margin:6px 0 0; color:var(--text-muted); }
.section-head .price-block .price-note { font-size:var(--fs-xs); line-height:1.5; margin:0; }
.section-head .price-block .price-from { font-size:var(--fs-md); margin:0; }
/* home Plans header (21 Oct): use the width — heading on one line, inclusions on one row */
#pricing .section-head { max-width:1180px; }
#pricing .section-head > p { max-width:860px; margin-left:auto; margin-right:auto; }
#pricing .price-incl { max-width:none; }

/* ---------------------------------------------------------------- home Pro card = Plans page Pro card (21 Oct 2026)
   Was a solid black card. Now: white card, 2px brand border, faint orange wash, orange icon + tag,
   centred pill badge, same as .vwrap .tier.pro on the Plans page. */
.tier-stage.featured { background: linear-gradient(180deg, #FFF8F0 0%, var(--paper) 55%); color: var(--ink); border: 2px solid var(--brand); box-shadow: 0 14px 34px rgba(204,127,40,.16); }
.tier-stage.featured h3 { color: var(--ink); }
.tier-stage.featured .plan-desc { color: var(--text-muted); }
.tier-stage.featured .tier-index { color: var(--brand-text); }
.tier-stage.featured .tier-ic { background: var(--brand-tint); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tier-stage.featured .plan-tag { color: var(--brand-text); background: #FFF1E0; border-color: #F6D2A8; }
.tier-stage.featured .tier-callout { background: #FFF4E6; border-color: #F6D2A8; color: var(--ink-soft); }
.tier-stage.featured .plan-flag { left: 50%; transform: translateX(-50%); border-radius: var(--radius-pill); padding: 5px 14px; white-space: nowrap; }

/* ---------------------------------------------------------------- support team grid (21 Oct 2026)
   Replaces the overlapping avatar row: 3 x 2 grid, each photo with the person's name under it.
   One block owns every size; earlier overlap rules are neutralised here. */
.advisor-photos { display:grid; grid-template-columns:repeat(3, auto); gap:22px 28px; justify-content:center; }
.advisor-person { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.advisor-person .advisor-avatar { width:96px; height:96px; margin-left:0; position:static; box-shadow:0 0 0 4px var(--paper), 0 8px 20px rgba(10,10,10,.12); }
.advisor-person figcaption { font-size:var(--fs-sm); font-weight:600; color:var(--ink); text-align:center; line-height:1.3; }
.advisor-person figcaption span { display:block; font-weight:400; font-size:var(--fs-xs); color:var(--text-muted); }
.advisor-avatar.is-pending { display:flex; align-items:flex-end; justify-content:center; background:linear-gradient(180deg,#ECEAE6,#DEDBD6); }
.advisor-avatar.is-pending svg { width:78%; height:78%; fill:#B9B5AE; }
@media (min-width:721px) and (max-width:1180px){ .advisor-person .advisor-avatar{width:80px;height:80px} .advisor-photos{gap:18px 20px} }
@media (max-width:420px){ .advisor-person .advisor-avatar{width:72px;height:72px} .advisor-photos{gap:16px 18px} }
/* plan flags on the home ladder: centred pills, matching the Plans page badges */
.tier-stage .plan-flag { left:50%; transform:translateX(-50%); border-radius:var(--radius-pill); padding:5px 14px; white-space:nowrap; }
.tier-stage .plan-flag.alt { background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); }
.tier-stage.start { border-color:var(--ink); }

/* ---------------------------------------------------------------- integrations hub (21 Oct 2026)
   ICAST in the centre; Shop Floor & Lab left, Business & Compliance right, People & Alerts below.
   Connector lines are decorative <i> elements on the core; hidden when the layout stacks. */
.ihub { display:grid; grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); grid-template-areas:"floor core biz" "people people people"; gap:48px 48px; align-items:center; }
.ihub-floor { grid-area:floor; } .ihub-biz { grid-area:biz; } .ihub-people { grid-area:people; }
.ihub-core { grid-area:core; position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; align-self:stretch; justify-content:center; }
.ihub-ring { width:184px; height:184px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 10px rgba(249,155,49,.10), 0 0 0 22px rgba(249,155,49,.05), 0 18px 40px rgba(10,10,10,.10); }
.ihub-ring img { width:120px; height:auto; }
.ihub-core-label { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-text); font-weight:700; }
.ihub-line { position:absolute; background:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 11px); height:2px; top:calc(50% - 14px); width:48px; }
.ihub-line.l { right:100%; } .ihub-line.r { left:100%; }
.ihub-line.d { width:2px; height:48px; top:100%; left:calc(50% - 1px); background:repeating-linear-gradient(180deg,var(--brand) 0 6px,transparent 6px 11px); }
.ihub-group { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); padding:22px 22px 18px; box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.ihub-group h3 { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:var(--fs-lg); }
.ihub-group h3 .icon { width:30px; height:30px; padding:6px; border-radius:var(--radius); background:var(--brand-tint); color:var(--brand); flex:none; }
.ihub-group ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ihub-group li { display:flex; gap:10px; align-items:flex-start; }
.ihub-group li > .icon { width:18px; height:18px; color:var(--brand); flex:none; margin-top:2px; }
.ihub-group li strong { display:block; font-size:var(--fs-md); color:var(--ink); font-weight:600; }
.ihub-group li span { display:block; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.45; margin-top:2px; }
.ihub-people ul { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ihub-compact .ihub-group ul { gap:10px; }
.ihub-compact .ihub-group li strong { font-weight:500; }
@media (max-width:1000px){
  .ihub { grid-template-columns:minmax(0,1fr); grid-template-areas:"core" "floor" "biz" "people"; gap:22px; }
  .ihub-line { display:none; }
  .ihub-ring { width:150px; height:150px; } .ihub-ring img { width:96px; }
  .ihub-people ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){ .ihub-people ul { grid-template-columns:minmax(0,1fr); } }
.center-link { text-align:center; margin-top:32px; }

/* ---------------------------------------------------------------- industries strip (home + industries page) */
.ind-mini-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:8px; }
.ind-mini { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:22px 14px 18px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); color:var(--ink); transition:border-color .2s, transform .2s, box-shadow .2s; }
.ind-mini:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 10px 24px rgba(204,127,40,.12); color:var(--ink); }
.ind-mini strong { font-size:var(--fs-md); font-weight:700; }
.ind-mini > span:last-child { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.4; }
.ind-ill { width:64px; height:64px; border-radius:50%; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.ind-ill svg, .proc-ill svg { width:40px; height:40px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ind-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; }
.ind-chip { padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--paper); font-size:var(--fs-sm); font-weight:500; color:var(--ink); }
.ind-chip:hover { border-color:var(--brand); color:var(--brand-text); }
@media (max-width:1000px){ .ind-mini-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .ind-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* hero AI film (21 Oct 2026) */
.hero-video { position:relative; border-radius:var(--radius-panel); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 24px 60px rgba(10,10,10,.12); aspect-ratio:16/9; }
.hero-video video { display:block; width:100%; height:100%; object-fit:cover; }
.hero-video-toggle { position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.9); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.75; transition:opacity .2s; }
.hero-video-toggle:hover, .hero-video-toggle:focus-visible { opacity:1; }
.hero-video-toggle .icon { width:14px; height:14px; }
@media (max-width:900px){ .hero-grid { grid-template-columns:minmax(0,1fr); } .hero-video { max-width:640px; margin:0 auto; } }

/* ---------------------------------------------------------------- home plan cards = Plans page cards (21 Oct 2026)
   Same words (sections.PLANS) and the same look as .vwrap .tier on the Plans page:
   centred badge, tag, logo + full name; Pro = orange border + warm wash. */
.hp-ladder { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:0 16px; align-items:stretch; }
.hp-arrow { display:flex; align-items:center; color:var(--brand); }
.hp-arrow .icon { width:24px; height:24px; }
.hp-card { position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 24px 24px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); box-shadow:0 1px 2px rgba(10,10,10,.04); }
.hp-card.start { border:1.5px solid var(--ink); }
.hp-card.pro { border:2px solid var(--brand); background:linear-gradient(180deg,#FFF8F0 0%, var(--paper) 55%); box-shadow:0 14px 34px rgba(204,127,40,.16); }
.hp-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:5px 13px; border-radius:var(--radius-pill); background:var(--brand); color:#fff; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hp-badge.alt { background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); }
.hp-tag { align-self:center; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--line-soft, #F0EFEC); padding:3px 10px; border-radius:6px; text-align:center; }
.hp-card.pro .hp-tag { color:var(--brand-text); background:#FFF1E0; }
.hp-name { margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; line-height:1; }
.hp-name .plogo { height:52px; width:auto; display:block; color:var(--ink); }
.hp-name span { font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); }
.hp-card.pro .hp-name span { color:var(--brand); }
.hp-for { margin:0; font-size:var(--fs-base); line-height:1.55; color:var(--text-muted); }
.hp-callout { margin:0; display:flex; gap:9px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius); background:var(--paper-alt); border:1px solid var(--line-soft, #EEE); font-size:var(--fs-sm); line-height:1.4; font-weight:600; color:var(--ink-soft, var(--ink)); }
.hp-card.pro .hp-callout { background:#FFF4E6; border-color:#F6D2A8; }
.hp-callout .icon { width:15px; height:15px; color:var(--brand); flex:none; margin-top:1px; }
.hp-pts { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:var(--fs-md); line-height:1.45; }
.hp-pts li { display:flex; gap:8px; align-items:flex-start; }
.hp-pts li .icon { width:15px; height:15px; color:var(--green, #2E7D32); flex:none; margin-top:2px; }
.hp-pts li.hp-lead { font-weight:600; color:var(--ink); }
.hp-card .btn { margin-top:auto; }
@media (max-width:980px){ .hp-ladder { grid-template-columns:minmax(0,1fr); gap:22px; } .hp-arrow { justify-content:center; transform:rotate(90deg); } }
/* Home: client logo strip under the hero (22 Oct 2026) */
.logo-strip { padding:22px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.logo-strip-inner { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:36px; padding:0; }
.logo-strip-label { margin:0; font-size:var(--fs-sm); line-height:1.4; color:var(--text-muted); white-space:nowrap; }
.logo-strip-label strong { display:block; font-family:var(--font-display); font-size:var(--fs-lg); color:var(--ink); }
.logo-strip .client-tile { height:48px; }
@media (max-width:720px){
  .logo-strip { padding:18px 16px; }
  .logo-strip-inner { grid-template-columns:minmax(0,1fr); gap:12px; text-align:center; }
  .logo-strip-label strong { display:inline; }
}
/* Client logos in full colour (22 Oct 2026) */
.client-tile img { filter:none; opacity:1; }
.logo-strip .client-tile { height:60px; }
.logo-strip .client-tile img { max-width:none; max-height:none; }
.logo-strip .marquee-track { gap:56px; animation-duration:70s; }
/* ================================================================================
   HOME BACKGROUND LADDER v2 (22 Oct 2026) — new block order, strict alternation:
   hero(white+radials) > logos(white band) > hub(TINT) > ticker(white band) > USP(TINT)
   > processes(white) > support(TINT) > worth(white) > stories(TINT) > demo form(white)
   > FAQ(TINT) > final CTA(white) > Meltix(TINT). Scoped with ".hero ~" = home page only.
   ================================================================================ */
.hero ~ #integrations.section { background: radial-gradient(1000px 460px at 92% -10%, rgba(249,155,49,.09), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); border-top: 0; }
.hero ~ .ticker-section { background: var(--paper); }
.hero ~ #industries.section { background: var(--paper); }
.hero ~ #advisors.section { background: radial-gradient(900px 420px at 6% 0%, rgba(249,155,49,.07), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
.hero ~ #savings.section { background: var(--paper); }
.hero ~ #stories.trust-cluster { border-top: 0; }
.hero ~ #stories .tc-banner { background: var(--wash-cream); border-top: 0; }
.hero ~ #stories .tc-body { background: linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
.hero ~ #contact.section { background: var(--paper); }
.hero ~ #faq.section.tint { background: radial-gradient(900px 460px at 8% 105%, rgba(249,155,49,.07), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
.hero ~ #demo-cta.section { background: var(--paper); }
.hero ~ #meltix-cta.section.tint { background: var(--wash-cream); }
/* Home price signals (22 Oct 2026): hero line + price card under "What ICAST Is Worth" */
.hero-price { margin:18px 0 0; font-size:var(--fs-md); color:var(--text-muted); }
.hero-price strong { color:var(--ink); }
.hero-price a { color:var(--brand-text); font-weight:600; text-decoration:none; white-space:nowrap; }
.hero-price a:hover { text-decoration:underline; }
.sv-price { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; margin-top:32px; padding:18px 24px; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-card); background:var(--paper-tint); color:var(--ink); text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
.sv-price:hover { border-color:var(--brand); box-shadow:0 10px 28px rgba(249,155,49,.16); transform:translateY(-1px); }
.sv-price:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.sv-price-tag { padding:4px 12px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--brand-text); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.sv-price-main strong { display:block; font-family:var(--font-display); font-size:var(--fs-xl); letter-spacing:-.01em; }
.sv-price-main span { display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--text-muted); }
.sv-price-go { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-text); white-space:nowrap; }
.sv-price-go .icon { width:16px; height:16px; transition:transform .2s; }
.sv-price:hover .sv-price-go .icon { transform:translateX(3px); }
@media (max-width:720px){ .sv-price { grid-template-columns:minmax(0,1fr); gap:10px; padding:18px; } .sv-price-tag { justify-self:start; } }
/* ================================================================================
   HOME: "Connected foundry" explorer (22 Oct 2026) — tabs + animated hub
   ================================================================================ */
.eyebrow-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:var(--radius-pill); background:rgba(249,155,49,.12); color:var(--brand-text); font-size:var(--fs-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.eyebrow-pill .icon { width:16px; height:16px; }
.section-head h2 .grad { background:linear-gradient(100deg, var(--brand-deep), var(--brand) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ix { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; margin-top:8px; }
.ix-tabs { display:grid; gap:10px; }
.ix-tabs [role=tab] { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-card); background:var(--paper); color:var(--ink); text-align:left; font:inherit; cursor:pointer; transition:border-color .2s, box-shadow .2s, background .2s; }
.ix-tabs [role=tab]:hover { border-color:rgba(249,155,49,.6); }
.ix-tabs [role=tab][aria-selected=true] { border-color:var(--brand); box-shadow:0 10px 26px rgba(249,155,49,.16); }
.ix-tabs [role=tab]:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.ix-tab-ic { flex:0 0 42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--paper-tint); color:var(--ink); transition:background .2s, color .2s; }
.ix-tab-ic .icon { width:20px; height:20px; }
[aria-selected=true] .ix-tab-ic { background:var(--brand); color:#fff; }
.ix-tabs b { display:block; font-size:var(--fs-md); }
.ix-tabs small { display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--text-muted); }
.ix-panel { margin-top:20px; padding:20px 22px; border-radius:var(--radius-card); background:var(--paper); border:1px solid var(--line); animation:ix-in .35s ease; }
@keyframes ix-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.ix-head { margin:0; font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; line-height:1.35; color:var(--ink); }
.ix-chain { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 0; padding:0; }
.ix-chain li { padding:5px 12px; border-radius:var(--radius-pill); background:rgba(249,155,49,.12); color:var(--brand-text); font-size:var(--fs-sm); font-weight:600; }
.ix-pts { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.ix-pts li { display:flex; gap:10px; font-size:var(--fs-md); line-height:1.5; color:var(--text); }
.ix-pts .icon { flex:0 0 18px; width:18px; height:18px; margin-top:3px; color:var(--green,#2E7D32); }
.ix-plan { margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:var(--fs-sm); color:var(--text-muted); }
.ix-visual { position:relative; }
.ix-svg { display:block; width:100%; height:auto; overflow:visible; }
.ix-rail { stroke:var(--line); stroke-width:2; fill:none; transition:stroke .3s; }
.ix-flow { stroke:var(--brand); stroke-width:5; stroke-linecap:round; stroke-dasharray:0 14; fill:none; opacity:0; transition:opacity .3s; animation:ix-dash 1.1s linear infinite; }
@keyframes ix-dash { to { stroke-dashoffset:-14; } }
.ix-pill rect { fill:var(--paper); stroke:var(--line); stroke-width:1.5; transition:fill .3s, stroke .3s; }
.ix-pill text { font-family:var(--font-display); font-size:12px; font-weight:600; fill:var(--text-muted); text-anchor:middle; transition:fill .3s; }
.ix-node circle { fill:var(--paper); stroke:var(--line); stroke-width:2; transition:fill .3s, stroke .3s; }
.ix-node use { color:var(--text-muted); transition:color .3s; }
.ix-core circle { fill:#fff; stroke:var(--brand); stroke-width:3; }
.ix-core .ix-pulse { fill:rgba(249,155,49,.18); stroke:none; transform-box:fill-box; transform-origin:center; animation:ix-pulse 2.4s ease-out infinite; }
@keyframes ix-pulse { from { transform:scale(1); opacity:.9; } to { transform:scale(1.45); opacity:0; } }
.ix-core text { font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; fill:var(--brand-text); text-anchor:middle; }
.ix[data-active=floor] .g-floor.ix-rail, .ix[data-active=biz] .g-biz.ix-rail, .ix[data-active=people] .g-people.ix-rail { stroke:rgba(249,155,49,.35); }
.ix[data-active=floor] .g-floor.ix-flow, .ix[data-active=biz] .g-biz.ix-flow, .ix[data-active=people] .g-people.ix-flow { opacity:1; }
.ix[data-active=floor] .g-floor.ix-node circle, .ix[data-active=biz] .g-biz.ix-node circle, .ix[data-active=people] .g-people.ix-node circle { fill:var(--brand); stroke:var(--brand); }
.ix[data-active=floor] .g-floor.ix-node use, .ix[data-active=biz] .g-biz.ix-node use, .ix[data-active=people] .g-people.ix-node use { color:#fff; }
.ix[data-active=floor] .g-floor.ix-pill rect, .ix[data-active=biz] .g-biz.ix-pill rect, .ix[data-active=people] .g-people.ix-pill rect { fill:#FFF4E6; stroke:var(--brand); }
.ix[data-active=floor] .g-floor.ix-pill text, .ix[data-active=biz] .g-biz.ix-pill text, .ix[data-active=people] .g-people.ix-pill text { fill:var(--brand-text); }
@media (max-width:900px){ .ix { grid-template-columns:minmax(0,1fr); gap:24px; } .ix-visual { order:-1; max-width:460px; margin:0 auto; width:100%; } }
@media (prefers-reduced-motion: reduce){ .ix-flow, .ix-pulse, .ix-panel { animation:none !important; } .ix-flow { stroke-dasharray:0 10; } }
.ix-chain li { position:relative; }
.ix-chain li + li { margin-left:22px; }
.ix-chain li + li::before { content:"\2192"; position:absolute; left:-17px; top:50%; transform:translateY(-50%); color:var(--brand); font-weight:700; }
.ix-chain li:last-child { background:var(--brand); color:#fff; }
/* Section label pills site-wide (22 Oct 2026) */
.section-head .eyebrow-pill, .eyebrow-pill { margin-bottom:2px; }
.section-head.center .eyebrow-pill { margin-left:auto; margin-right:auto; }
/* explorer v2 (22 Oct 2026): full diagram on top, all connections shown; tabs row + panel below */
.ix { display:block; }
.ix-visual { max-width:1000px; margin:0 auto 8px; }
.ix-tabs { grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1000px; margin:0 auto; }
.ix-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:36px; max-width:1000px; margin:16px auto 0; padding:24px 28px; }
.ix-panel[hidden] { display:none; }
.ix-panel .ix-head, .ix-panel .ix-chain, .ix-panel .ix-plan { grid-column:1; }
.ix-panel .ix-pts { grid-column:2; grid-row:1 / span 3; margin-top:0; align-self:center; }
.ix-chips { display:none; }
.ix-pill text { font-size:13.5px; }
.ix-gl { font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; fill:var(--text-muted); text-anchor:middle; transition:fill .3s; }
.ix[data-active=floor] .g-floor .ix-gl, .ix[data-active=biz] .g-biz .ix-gl, .ix[data-active=people] .g-people .ix-gl { fill:var(--brand-text); }
.ix-core text { font-size:11px; }
@media (max-width:900px){ .ix-panel { grid-template-columns:minmax(0,1fr); } .ix-panel .ix-pts { grid-column:1; grid-row:auto; margin-top:14px; } .ix-tabs { grid-template-columns:minmax(0,1fr); } .ix-visual { order:0; max-width:none; } }
@media (max-width:700px){ .ix-visual { display:none; } .ix-chips { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:14px 0 0; padding:0; } .ix-chips li { padding:5px 10px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--fs-xs); background:var(--paper-tint); } }
.ix-gl { paint-order:stroke; stroke:#F8F8F6; stroke-width:7px; stroke-linejoin:round; }
/* explorer: phone diagram (22 Oct 2026) — vertical, one group at a time */
.ix-svg-m { display:none; width:100%; max-width:380px; height:auto; margin:0 auto; overflow:visible; }
.ix-svg-m .ix-rail { stroke:rgba(249,155,49,.35); }
.ix-svg-m .ix-flow { opacity:1; }
.ix-svg-m .ix-pill rect { fill:#FFF4E6; stroke:var(--brand); }
.ix-svg-m .ix-pill text { fill:var(--brand-text); font-size:11.5px; }
.ix-svg-m .ix-node.on circle { fill:var(--brand); stroke:var(--brand); }
.ix-svg-m .ix-node.on use { color:#fff; }
.ix-svg-m .ix-gl { fill:var(--brand-text); font-size:11px; }
@media (max-width:700px){
  .ix-visual { display:block; margin-bottom:16px; }
  .ix-svg { display:none; }
  .ix[data-active=floor] .ixm-floor, .ix[data-active=biz] .ixm-biz, .ix[data-active=people] .ixm-people { display:block; }
  .ix-chips { display:none; }
}

/* 22 Oct 2026 (chat 2): 6 process tiles; USP order on desktop; support card background */
.ind-mini-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1000px){ .ind-mini-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .ind-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1081px){
  .usp-grid [data-usp="costing"] { order:1; } .usp-grid [data-usp="spectro"] { order:2; }
  .usp-grid .usp-card-wide { order:3; } .usp-grid .usp-card:not(.usp-card-wide):not([data-usp="costing"]):not([data-usp="spectro"]) { order:4; }
}
.advisor-card { position:relative; overflow:hidden; isolation:isolate; }
.advisor-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(204,127,40,.22) 1.2px, transparent 1.3px); background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg, transparent 35%, #000 100%); mask-image:linear-gradient(115deg, transparent 35%, #000 100%); }
.advisor-card::after { content:""; position:absolute; z-index:-1; pointer-events:none; width:520px; height:520px; right:-160px; top:-200px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,155,49,.35), rgba(249,155,49,0) 65%); animation:adv-glow 14s ease-in-out infinite alternate; }
@keyframes adv-glow { from { transform:translate(0,0) scale(1); } to { transform:translate(-120px,140px) scale(1.15); } }
@media (prefers-reduced-motion: reduce){ .advisor-card::after { animation:none; } }
/* logo strip identical on contact + client feedback (22 Oct 2026) */
.logo-band { background:var(--paper); padding:16px 0; }
.logo-band .client-tile { height:60px; }
.logo-band .client-tile img { max-width:none; max-height:none; }
.logo-band .marquee-track { gap:56px; animation-duration:70s; }
/* Home demo form: bot check + confirmation (22 Oct 2026) */
.demo-form .captcha-field .captcha-box input { max-width:120px; }
.df-done { margin:12px 0 0; padding:12px 14px; border-radius:var(--radius); background:#EAF6EC; color:#1E5C2A; font-size:var(--fs-sm); line-height:1.5; }
.df-done a { color:inherit; font-weight:700; text-decoration:underline; }
/* FAQ: two columns, numbered, expand/collapse all, graph-paper background (22 Oct 2026) */
#faq.section.tint { position:relative; isolation:isolate; overflow:hidden; }
#faq.section.tint::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(204,127,40,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(204,127,40,.13) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 30% 40%, #000 25%, transparent 80%); mask-image:radial-gradient(ellipse 75% 85% at 30% 40%, #000 25%, transparent 80%); }
.faq-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:56px; align-items:start; }
.faq-side { position:sticky; top:96px; }
.faq-side h2 { font-size:var(--fs-h2); line-height:1.12; margin:12px 0 0; text-wrap:balance; }
.faq-side > p { margin:12px 0 0; color:var(--text); font-size:var(--fs-ui); line-height:1.6; }
.faq-toggle { margin-top:20px; padding:9px 16px; border:1.5px solid var(--ink); border-radius:var(--radius-pill); background:var(--paper); color:var(--ink); font:inherit; font-weight:700; font-size:var(--fs-sm); cursor:pointer; transition:background .2s, color .2s; }
.faq-toggle:hover { background:var(--ink); color:#fff; }
.faq-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.faq-more { font-size:var(--fs-sm) !important; color:var(--text-muted) !important; }
.faq-more a { font-weight:700; color:var(--brand-deep); }
.faq-layout .faq-list { max-width:none; margin:0; gap:8px; counter-reset:faq; }
.faq-layout .faq-item { padding:2px 20px; transition:border-color .2s, box-shadow .2s; }
.faq-layout .faq-item:hover { border-color:rgba(249,155,49,.6); }
.faq-layout .faq-item[open] { border-color:var(--brand); box-shadow:0 10px 26px rgba(249,155,49,.12); }
.faq-layout .faq-item summary { padding:14px 0; justify-content:flex-start; }
.faq-layout .faq-item summary::before { counter-increment:faq; content:counter(faq, decimal-leading-zero); flex:none; font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700; color:var(--brand-deep); }
.faq-layout .faq-item summary > span { flex:1; }
.faq-layout .faq-a { padding:0 0 16px 38px; }
.faq-layout .faq-a p { margin:0; }
@media (max-width:900px){ .faq-layout { grid-template-columns:minmax(0,1fr); gap:24px; } .faq-side { position:static; } .faq-layout .faq-a { padding-left:0; } }
/* Savings calculator (22 Oct 2026) */
.svc-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; margin:24px 0 0; }
.svc-full { grid-column:1 / -1; }
.svc-field label { display:block; margin-bottom:6px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.svc-field select, .svc-unit input { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); font:inherit; color:var(--ink); }
.svc-unit { display:flex; align-items:stretch; }
.svc-unit input { border-radius:var(--radius) 0 0 var(--radius); font-family:var(--font-mono); font-weight:700; }
.svc-unit span { display:flex; align-items:center; padding:0 10px; border:1px solid var(--line-strong); border-left:0; border-radius:0 var(--radius) var(--radius) 0; background:var(--paper-tint); font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; }
.svc-field select:focus, .svc-unit input:focus { outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
.svc-adv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin-top:12px; }
.sv-calc .sv-assume { margin:0; }
.sv-calc .sv-copy > .btn { margin-top:22px; }
.svc-out { position:sticky; top:96px; }
.svc-out .sv-total { margin:0 0 18px; }
.svc-out .sv-list { gap:12px; }
.svc-out .sv-bar span { transition:width .4s ease; }
.svc-tag { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--brand-text); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
.svc-meltix { margin:14px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.svc-meltix a { color:var(--brand-deep); font-weight:700; }
@media (max-width:900px){ .svc-out { position:static; } }
@media (max-width:520px){ .svc-form, .svc-adv { grid-template-columns:minmax(0,1fr); } }
/* KPI strip + collapsible calculator (22 Oct 2026) */
.kpi-strip { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.kpi-strip li { padding:20px 18px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); box-shadow:0 6px 18px rgba(10,10,10,.04); }
.kpi-strip strong { display:block; font-family:var(--font-display); font-size:clamp(26px,2.6vw,34px); font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--brand-deep); }
.kpi-strip span { display:block; margin-top:8px; font-size:var(--fs-sm); line-height:1.45; color:var(--text); }
#svc-panel { margin-top:32px; padding-top:32px; border-top:1px dashed var(--line); }
#svc-panel[hidden] { display:none; }
.svc-h { margin:0; font-size:var(--fs-xl); }
.sv-calc .sv-copy > p { margin-top:8px; }
.svc-meltix { margin:14px 0 0; padding:14px 16px; border:1px dashed var(--brand); border-radius:var(--radius); background:var(--wash-cream); }
.svc-meltix .sv-note { margin-top:6px; }
@media (max-width:1000px){ .kpi-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .kpi-strip li:last-child { grid-column:1 / -1; } }
/* Split KPIs: hero trust row, savings tiles, contact card, Meltix stat (22 Oct 2026) */
.hero-stats { list-style:none; display:flex; flex-wrap:wrap; gap:0; margin:22px 0 0; padding:16px 0 0; border-top:1px solid var(--line); }
.hero-stats li { padding:0 22px; border-left:1px solid var(--line); }
.hero-stats li:first-child { padding-left:0; border-left:0; }
.hero-stats strong { display:block; font-family:var(--font-display); font-size:var(--fs-xl); font-weight:800; line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
.hero-stats span { display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--text-muted); }
@media (max-width:560px){ .hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .hero-stats li { padding:0 10px; } .hero-stats strong { font-size:var(--fs-md); } .hero-stats span { font-size:var(--fs-xs); } }
.kpi-sv { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpi-sv .sv-k-total { background:linear-gradient(135deg, var(--brand-deep), var(--brand)); border-color:transparent; }
.kpi-sv .sv-k-total strong, .kpi-sv .sv-k-total span { color:#fff; }
.kpi-foot { margin:12px 0 18px; text-align:center; font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:1000px){ .kpi-sv { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .kpi-sv .sv-k-total { grid-column:1 / -1; } .kpi-sv li:last-child { grid-column:auto; } }
.why-stats { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.why-stats strong { display:block; font-family:var(--font-display); font-size:var(--fs-xl); font-weight:800; line-height:1.1; color:var(--brand-deep); }
.why-stats span { display:block; margin-top:2px; font-size:var(--fs-xs); line-height:1.4; color:var(--text-muted); }
.mx-stat { padding:14px 18px; border-left:4px solid var(--brand); background:var(--paper); border-radius:0 var(--radius) var(--radius) 0; max-width:280px; margin-bottom:14px; }
.mx-stat strong { display:block; font-family:var(--font-display); font-size:var(--fs-stat); font-weight:800; line-height:1; color:var(--brand-deep); }
.mx-stat span { display:block; margin-top:6px; font-size:var(--fs-xs); line-height:1.45; color:var(--text-muted); }
/* Savings summary card v2 (22 Oct 2026) */
.svh { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; padding:clamp(28px,4vw,44px); border:1px solid var(--line); border-radius:var(--radius-card); background:linear-gradient(135deg, var(--wash-cream), var(--paper) 70%); }
.svh-main h2 { margin:12px 0 0; font-size:var(--fs-h2); line-height:1.12; }
.svh-num { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-top:22px; }
.svh-num strong { font-family:var(--font-display); font-size:clamp(44px,5.5vw,68px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--brand-deep); }
.svh-num span { font-size:var(--fs-ui); color:var(--text); }
.svh-foot { margin:10px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.svh-list { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:14px; }
.svh-list div { display:flex; justify-content:space-between; gap:16px; font-size:var(--fs-ui); }
.svh-list span { color:var(--ink); font-weight:600; }
.svh-list b { font-family:var(--font-display); font-weight:800; color:var(--brand-text); white-space:nowrap; }
.svh-list i { display:block; height:6px; margin-top:8px; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--brand-deep),var(--brand)); }
.svh-side .btn { width:100%; justify-content:center; }
@media (max-width:860px){ .svh { grid-template-columns:minmax(0,1fr); gap:28px; } }
.hero-price { white-space:normal; }
/* Savings calculator as a pop-up (22 Oct 2026) */
.svc-dialog { width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:24px 26px 26px; border:0; border-radius:var(--radius-card); background:var(--paper); color:var(--ink); box-shadow:0 30px 80px rgba(10,10,10,.28); overflow:auto; }
.svc-dialog::backdrop { background:rgba(15,12,8,.55); backdrop-filter:blur(3px); }
.svc-dialog[open] { animation:svc-in .25s ease; }
@keyframes svc-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.svc-dhead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.svc-dhead h3 { margin:0; font-size:var(--fs-xl); }
.svc-x { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; }
.svc-x:hover { border-color:var(--brand); color:var(--brand-deep); }
.svc-x .icon { width:16px; height:16px; }
.svc-sub { margin:4px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
.svc-dialog .svc-form { margin-top:16px; }
.svc-dialog .sv-assume { margin:0; }
.svc-dialog .svc-out { position:static; margin-top:20px; }
.svc-dialog .sv-total { margin:0 0 12px; padding:14px 18px; }
.svc-dialog .sv-total-num { font-size:clamp(30px,5vw,40px); }
.svc-dialog .sv-list { gap:8px; }
.svc-dialog .sv-row { padding:10px 14px; }
.svc-dialog .sv-note { display:none; }
.svc-dialog .svc-meltix .sv-note { display:block; }
.svc-dialog .sv-bar { margin:6px 0 0; }
.svc-cta { width:100%; justify-content:center; margin-top:18px; }
@media (max-width:560px){ .svc-dialog { width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; margin:0; border-radius:0; padding:18px 16px 22px; } }
.svc-dialog .sv-row { padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.svc-dialog .sv-row:nth-child(2) { order:-1; }
.svc-dialog .sv-val { font-family:var(--font-display); font-weight:800; }
.svc-dialog .sv-bar { height:5px; }
.svc-grp { grid-column:1 / -1; margin:8px 0 -4px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text); }
.svc-adv > .svc-grp:first-child { margin-top:0; }
.svc-field { position:relative; }
.svc-info { display:inline-grid; place-items:center; width:17px; height:17px; margin-left:6px; vertical-align:1px; border:0; border-radius:50%; background:var(--brand); color:#fff; font:700 11px/1 var(--font-display); cursor:help; }
.svc-tip { position:absolute; z-index:5; left:0; right:0; bottom:calc(100% + 4px); padding:12px 14px; border-radius:var(--radius); background:var(--ink); color:#fff; font-size:var(--fs-xs); line-height:1.5; box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; visibility:hidden; transition:opacity .15s; }
.svc-info:hover + .svc-tip, .svc-info:focus + .svc-tip { opacity:1; visibility:visible; }
.svc-dialog .svc-meltix { margin:0 0 12px; }
.svc-field label { display:flex; align-items:center; }
.svc-adv { align-items:end; }
/* info icons on every field + Meltix mode switch (22 Oct 2026) */
.svc-lbl { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.svc-lbl label { margin:0 !important; }
.svc-info { flex:none; display:inline-grid; place-items:center; width:15px; height:15px; margin:0; padding:0; border:1px solid #9A9590; border-radius:50%; background:none; color:#8A857F; font:400 10px/1 Georgia, "Times New Roman", serif; font-style:italic; cursor:help; }
.svc-info:hover, .svc-info:focus-visible { border-color:var(--brand); color:var(--brand-deep); outline:none; }
.svc-lbl .svc-tip { bottom:auto; top:calc(100% + 2px); }
.svc-lbl:has(.svc-info:hover) .svc-tip, .svc-lbl:has(.svc-info:focus) .svc-tip { opacity:1; visibility:visible; }
.svc-mode { display:inline-flex; margin-top:14px; padding:4px; border-radius:var(--radius-pill); background:var(--paper-tint); border:1px solid var(--line); }
.svc-mode label { position:relative; cursor:pointer; }
.svc-mode input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.svc-mode span { display:block; padding:7px 16px; border-radius:var(--radius-pill); font-size:var(--fs-sm); font-weight:700; color:var(--text-muted); transition:background .2s, color .2s; }
.svc-mode input:checked + span { background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(249,155,49,.3); }
.svc-mode input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.svc-lbl { position:relative; } .svc-lbl .svc-tip { left:0; right:auto; width:min(300px, 80vw); }
/* Beyond the rupees tags (22 Oct 2026) */
.beyond { margin-top:28px; }
.beyond-h { margin:0 0 14px; text-align:center; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); }
.beyond-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.beyond-grid li { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); transition:border-color .2s, transform .2s, box-shadow .2s; }
.beyond-grid li:hover { border-color:rgba(249,155,49,.6); transform:translateY(-2px); box-shadow:0 10px 22px rgba(204,127,40,.10); }
.beyond-ic { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--brand-tint); color:var(--brand-deep); }
.beyond-ic .icon { width:18px; height:18px; }
.beyond-grid b { display:block; font-size:var(--fs-md); line-height:1.3; color:var(--ink); }
.beyond-grid small { display:block; margin-top:3px; font-size:var(--fs-xs); line-height:1.45; color:var(--text-muted); }
@media (max-width:1000px){ .beyond-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .beyond-grid { grid-template-columns:minmax(0,1fr); } }
/* Pop-up v3: sticky header + result, input cards, no bars (22 Oct 2026) */
.svc-dialog { padding:0 0 20px; width:min(560px, calc(100vw - 32px)); }
.svc-top { position:sticky; top:0; z-index:6; padding:18px 22px 14px; background:var(--paper); border-bottom:1px solid var(--line); }
.svc-res { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-top:10px; }
.svc-res strong { display:block; font-family:var(--font-display); font-size:clamp(28px,4.5vw,36px); font-weight:800; line-height:1; color:var(--brand-deep); letter-spacing:-.02em; }
.svc-res span#svc-total-lbl { display:block; margin-top:4px; font-size:var(--fs-xs); color:var(--text-muted); }
.svc-dialog .svc-mode { margin:0; }
.svc-dialog .svc-form { margin:0; padding:16px 22px 0; gap:10px; }
.svc-dialog .svc-form > .svc-field { padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-tint); }
.svc-dialog .svc-form > .svc-field.svc-full { grid-column:1 / -1; }
.svc-dialog.no-mx .svc-mxf { display:none; }
.svc-dialog .sv-assume { padding:4px 2px 0; }
.svc-dialog .svc-adv .svc-field { padding:0; border:0; background:none; }
.svc-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 22px 0; }
.svc-actions .btn { justify-content:center; }
@media (max-width:560px){ .svc-dialog { padding:0 0 18px; } .svc-top { padding:14px 16px 12px; } .svc-dialog .svc-form, .svc-actions { padding-left:16px; padding-right:16px; } }
.ls-sub { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:700; color:var(--brand-text); }
/* stories block button spacing (22 Oct 2026) */
.tc-banner-copy > .btn { margin-top:22px; }
.tc-banner-inner { align-items:center; }
@media (max-width:560px){ .tc-banner-copy > .btn { width:100%; justify-content:center; } }
/* tighter integrations block (22 Oct 2026) */
#integrations .section-head { margin-bottom:6px; }
#integrations .ix { margin-top:0; }
#integrations .ix-svg { margin-top:-28px; margin-bottom:-6px; }
#integrations .ix-tabs { margin-top:4px; }
#integrations .center-link { margin-top:18px; }
.tc-hear { font-weight:600; color:var(--ink) !important; }
#integrations.section { padding-top:56px; padding-bottom:56px; }
#integrations .section-head { max-width:940px; }
#integrations .ix-visual { max-width:840px; }
#integrations .ix-tabs { max-width:940px; }
/* mobile menu: full-height vertical list (22 Oct 2026) */
@media (max-width: 900px) {
  .main-nav { bottom:auto; height:calc(100vh - 66px); height:calc(100dvh - 66px); flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; }
  .main-nav a { white-space:normal; }
}
/* Meltix band layout + mobile menu Meltix link (22 Oct 2026) */
#meltix-cta .cta-band { align-items:center; }
.mx-side { display:flex; flex-direction:column; align-items:stretch; gap:16px; width:300px; }
.mx-side .mx-stat { margin:0; max-width:none; }
.mx-side .btn { justify-content:center; }
@media (max-width:900px){ .mx-side { width:100%; max-width:420px; } }
.nav-mx { display:none; }
@media (max-width:900px){ .main-nav .nav-mx { display:flex; align-items:center; gap:6px; color:var(--brand-deep); font-weight:700; } .nav-mx .icon { width:14px; height:14px; } }
/* pop-up: no horizontal scroll (22 Oct 2026) */
.svc-dialog { overflow-x:hidden; overflow-y:auto; }
.svc-lbl .svc-tip { left:0; right:0; width:auto; }
/* pop-up: sticky header flush with the top edge (22 Oct 2026) */
#svc-panel.svc-dialog { padding:0 0 20px; border:0; }
@media (max-width:560px){ #svc-panel.svc-dialog { padding:0 0 18px; } }
@media (max-width:560px){ #svc-panel.svc-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; } }
/* Industries hero: soft grey dot grid (22 Oct 2026) */
.ind-hero { position:relative; isolation:isolate; overflow:hidden; }
.ind-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(10,10,10,.16) 1.1px, transparent 1.3px); background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 85%); mask-image:radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 85%); }
.ind-hero .ind-mini { background:var(--paper); }
.ind-hero .crumbs { display:flex; gap:6px; margin-bottom:16px; font-size:var(--fs-sm); color:var(--text-muted); }
.ind-hero h1 { margin:14px 0 0; }
.ind-hero .lede { margin:14px 0 28px; max-width:820px; color:var(--text); }
#usp .sv-price { background:var(--paper); margin-top:28px; }
/* Home page background rhythm after re-ordering (22 Oct 2026):
   white / cream alternate, with one warm band for the client video */
.hero ~ #stories .tc-banner { background: radial-gradient(900px 420px at 92% 0%, rgba(249,155,49,.16), transparent 65%), linear-gradient(180deg, #FFF7EE, #FFEFDF) !important; }
.hero ~ #stories.trust-cluster { border-top:0; border-bottom:0; }
.hero ~ #advisors.section { background: var(--paper) !important; }
.hero ~ #industries.section { background: radial-gradient(1000px 460px at 8% 0%, rgba(249,155,49,.08), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)) !important; }
.hero ~ #contact.section { background: var(--paper) !important; }
.hero ~ #industries .ind-mini { background: var(--paper); }
/* v13: smaller second line inside an H1 (Plans page) */
h1 .h1-sub { display:block; margin-top:10px; font-size:.5em; font-weight:600; line-height:1.3; letter-spacing:0; color:var(--text-muted); }
.bvb-teaser { background:var(--paper); margin:28px 0 8px; }
/* FAQ graph-paper background on white sections (Industries) */
.faq-grid-bg { position:relative; isolation:isolate; overflow:hidden; }
.faq-grid-bg::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(204,127,40,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(204,127,40,.12) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 30% 40%, #000 25%, transparent 80%); mask-image:radial-gradient(ellipse 75% 85% at 30% 40%, #000 25%, transparent 80%); }
/* Plans page: add-on modules (v13) */
.addons { margin:56px auto 8px; padding:44px clamp(18px,3vw,40px); border:1px solid var(--line); border-radius:var(--radius-card); background:linear-gradient(180deg, var(--wash-cream), var(--paper)); }
.addons-head { max-width:720px; }
.addons-head h2 { margin:12px 0 0; font-size:var(--fs-h2-sm, 32px); line-height:1.15; }
.addons-head p { margin:10px 0 0; color:var(--text); }
.addon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:26px; }
.addon-card { padding:20px 20px 18px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); transition:border-color .2s, box-shadow .2s, transform .2s; }
.addon-card:hover { border-color:rgba(249,155,49,.6); box-shadow:0 10px 24px rgba(204,127,40,.10); transform:translateY(-2px); }
.addon-ic { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--brand-tint); color:var(--brand-deep); }
.addon-ic .icon { width:19px; height:19px; }
.addon-card h3 { margin:12px 0 0; font-size:var(--fs-lg); }
.addon-card p { margin:6px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--text); }
.addon-card ul { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.addon-card li { position:relative; padding-left:18px; font-size:var(--fs-sm); line-height:1.45; color:var(--text-muted); }
.addon-card li::before { content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.addons-note { margin:18px 0 0; font-size:var(--fs-sm); }
.addons-note a { color:var(--brand-deep); font-weight:700; }
.vwrap > .addons { width:100%; max-width:1224px; align-self:center; box-sizing:border-box; }
.addon-grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.addon-card h3 { font-size:18px !important; line-height:1.3; letter-spacing:0; }
.addons-head h2 { font-size:clamp(26px,3vw,34px) !important; }
/* Client logo strip: city under each logo (23 Oct 2026) */
.logo-strip .client-tile, .logo-band .client-tile { height:78px; flex-direction:column; justify-content:flex-start; gap:4px; }
.logo-strip .client-tile img, .logo-band .client-tile img { margin:auto 0; }
.ct-city { flex:none; font-size:11px; line-height:1.2; font-weight:600; letter-spacing:.02em; color:var(--text-muted); white-space:nowrap; }
@media (max-width:720px){ .logo-strip-label { white-space:normal; } }
/* AI Engine: Ask AI Support block (23 Oct 2026) */
.sup-table { width:100%; margin-top:22px; border-collapse:collapse; font-size:var(--fs-sm); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.sup-table th, .sup-table td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); line-height:1.35; }
.sup-table thead th { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); background:var(--paper-alt); }
.sup-table tbody th { font-weight:700; color:var(--ink); width:22%; }
.sup-table td { color:var(--text-muted); }
.sup-table td:last-child { color:var(--brand-deep); font-weight:700; }
.sup-table tbody tr:last-child > * { border-bottom:0; }
.sup-body { min-height:0; }
.sup-panel .bar { flex-wrap:wrap; }
.sup-lang { margin-left:auto; display:flex; gap:4px; }
.sup-lang span { font-size:var(--fs-2xs); padding:2px 8px; border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--text-muted); background:var(--paper); }
.sup-lang span.on { border-color:var(--brand); color:var(--brand-deep); background:var(--brand-tint); }
.sup-panel .ask-input-row input:disabled, .sup-panel .ask-input-row button:disabled { opacity:1; cursor:default; }
.sup-table caption.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:720px){ .orbit-card.oc-sup { display:none; } }
/* AI Engine: language tabs, Auto MIS solo card, Talk-to-Dashboard (23 Oct 2026) */
.sup-lang button { font:inherit; font-size:var(--fs-2xs); padding:3px 9px; border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--text-muted); background:var(--paper); cursor:pointer; }
.sup-lang button.on { border-color:var(--brand); color:var(--brand-deep); background:var(--brand-tint); }
.sup-lang button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.report-cards.rc-solo { grid-template-columns:minmax(0,1fr); }
.rc-solo .report-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:center; }
.rc-solo .report-card .mis-mock { margin:26px 26px 26px 0; }
@media (max-width:820px){ .rc-solo .report-card { grid-template-columns:minmax(0,1fr); } .rc-solo .report-card .mis-mock { margin:0 26px 26px; } }
.dash-wrap .dash-mock { margin:0; box-shadow:var(--shadow-sm); }
.tok-strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:12px; padding:10px 14px; border:1px dashed var(--line-strong); border-radius:var(--radius); font-size:var(--fs-sm); color:var(--text-muted); background:var(--paper); }
.tok-strip .z { color:var(--brand-deep); font-weight:700; }
.soon-pill { display:inline-block; vertical-align:middle; margin-left:6px; padding:4px 10px; border-radius:var(--radius-pill); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); border:1px solid currentColor; }
/* ===== AI Engine redesign pass 2 (23 Oct 2026): backgrounds, MIS, Prompt-to-Dashboard ===== */
@media (max-width:720px){ .orbit-card.oc-mid { display:none; } }
/* richer backgrounds taken from the home theme: dots+glow, graph paper, warm radial wash */
.ai-bg-dots { position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--line);
  background:radial-gradient(900px 420px at 95% 0%, rgba(249,155,49,.10), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
.ai-bg-dots::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(204,127,40,.22) 1.2px, transparent 1.3px); background-size:18px 18px;
  -webkit-mask-image:linear-gradient(110deg, #000 0%, transparent 45%); mask-image:linear-gradient(110deg, #000 0%, transparent 45%); }
#reporting.faq-grid-bg { background:var(--paper); border-top:1px solid var(--line); }
.ai-bg-glow { position:relative; overflow:hidden; border-top:1px solid var(--line);
  background:radial-gradient(1100px 480px at 85% -10%, rgba(249,155,49,.12), transparent 65%), radial-gradient(800px 400px at 0% 100%, rgba(10,10,10,.04), transparent 70%), linear-gradient(180deg, var(--wash-cream), var(--wash-apricot)); }
/* support: chat panel runs the full height of the left column */
#ask-ai-support .grid-2 { align-items:stretch; }
#ask-ai-support .sup-panel { display:flex; flex-direction:column; }
#ask-ai-support .sup-body { flex:1; }
#ask-ai-support .sup-body .ask-input-row { margin-top:auto; }
/* MIS */
.mis-grid { align-items:center; gap:40px; }
.mis-steps { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mis-steps li { display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.88); }
.mis-steps .n { flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); color:#fff; background:linear-gradient(135deg, var(--brand-light), var(--brand-deep)); }
.mis-steps h3 { font-size:var(--fs-base); margin:2px 0 0; }
.mis-steps p { font-size:var(--fs-sm); line-height:1.5; color:var(--text-muted); margin:4px 0 0; }
.mis-visual { position:relative; display:flex; flex-direction:column; gap:0; max-width:480px; justify-self:center; width:100%; }
.sched-card { position:relative; z-index:1; width:88%; border:1px solid var(--line-strong); border-radius:var(--radius-card); background:var(--paper); box-shadow:var(--shadow-sm); padding:16px 18px; }
.sc-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; color:var(--text-mute3); margin-bottom:8px; }
.sc-on { font-family:inherit; color:var(--green); border:1px solid currentColor; border-radius:var(--radius-pill); padding:2px 8px; letter-spacing:.06em; }
.sc-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:var(--fs-sm); }
.sc-row .k { color:var(--text-muted); } .sc-row .v { color:var(--ink); font-weight:600; text-align:right; display:inline-flex; align-items:center; gap:6px; }
.wa-ic { width:15px; height:15px; color:#25D366; }
.mis-visual .wa-card { position:relative; align-self:flex-end; width:82%; margin-top:-18px; border-radius:var(--radius-card); overflow:hidden; box-shadow:0 18px 40px rgba(10,10,10,.12); border:1px solid var(--line); }
.wa-head { display:flex; align-items:center; gap:10px; padding:11px 14px; background:#075E54; color:#fff; }
.wa-head small { display:block; font-size:var(--fs-2xs); opacity:.8; } .wa-head b { font-size:var(--fs-sm); }
.wa-av { width:30px; height:30px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:700; }
.wa-body { padding:16px 14px 18px; background:#ECE5DD; }
.wa-bubble { position:relative; max-width:92%; background:#DCF8C6; border-radius:10px 10px 2px 10px; padding:8px 10px 18px; margin-left:auto; font-size:var(--fs-sm); color:var(--ink); }
.wa-bubble p { margin:8px 0 0; line-height:1.45; }
.wa-file { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); border-radius:8px; padding:8px 10px; }
.wa-file .icon { width:22px; height:22px; color:var(--red); } .wa-file small { display:block; font-size:var(--fs-2xs); color:var(--text-muted); }
.wa-time { position:absolute; right:8px; bottom:4px; font-size:10px; color:#53BDEB; }
/* Prompt-to-Dashboard */
.dash-head { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px; align-items:end; }
.dash-side .ask-points { margin-top:0; }
.prompt-bar { margin-top:28px; display:flex; align-items:center; gap:14px; padding:12px 12px 12px 16px; border:1px solid var(--brand); border-radius:var(--radius-card); background:var(--paper); box-shadow:0 0 0 4px rgba(249,155,49,.12); }
.prompt-bar p { margin:0; flex:1; font-size:var(--fs-sm); line-height:1.5; color:var(--ink-soft); }
.pb-k { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; color:var(--brand-text); }
.pb-btn { flex:none; padding:9px 16px; border-radius:var(--radius); color:#fff; font-weight:700; font-size:var(--fs-sm); background:linear-gradient(135deg, var(--brand-light), var(--brand-deep)); }
.app-frame { margin-top:16px; border:1px solid var(--line-strong); border-radius:var(--radius-panel); background:var(--paper); box-shadow:0 24px 60px rgba(10,10,10,.10); overflow:hidden; }
.af-top { display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid var(--line); background:var(--paper-alt); font-size:var(--fs-sm); }
.af-logo { font-weight:800; letter-spacing:.04em; color:var(--ink); }
.af-crumb { color:var(--text-muted); } .af-crumb b { color:var(--ink); }
.af-badge { margin-left:auto; font-size:var(--fs-2xs); padding:2px 8px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); color:var(--text-muted); }
.af-tok { font-size:var(--fs-2xs); font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); color:var(--green); background:rgba(28,124,79,.10); }
.af-body { display:grid; grid-template-columns:150px minmax(0,1fr); }
.af-nav { display:flex; flex-direction:column; gap:2px; padding:14px 10px; border-right:1px solid var(--line); background:var(--paper-tint); font-size:var(--fs-sm); color:var(--text-muted); }
.af-nav span { padding:7px 10px; border-radius:8px; } .af-nav .on { background:var(--brand-tint); color:var(--brand-deep); font-weight:700; } .af-nav .sub { font-size:var(--fs-xs); padding:4px 10px 4px 18px; }
.af-nav .sub:first-of-type { color:var(--ink); font-weight:600; }
.af-main { padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.af-filters { display:flex; flex-wrap:wrap; gap:8px; } .af-filters span { font-size:var(--fs-xs); padding:6px 11px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink-soft); }
.af-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.af-kpis > div { border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; background:var(--paper-tint); }
.af-kpis small { display:block; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--text-mute3); }
.af-kpis b { display:block; font-size:var(--fs-2xl); color:var(--ink); margin-top:4px; }
.af-kpis em { font-style:normal; font-size:var(--fs-xs); color:var(--text-muted); } .af-kpis em.up, .af-kpis em.dn { color:var(--green); }
.af-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; }
.af-card { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--paper); min-width:0; }
.af-ct { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin-bottom:10px; }
.af-ct .lg { font-weight:500; font-size:var(--fs-2xs); color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; }
.af-ct .lg i, .dg-bars i { display:inline-block; }
.af-ct .lg i { width:9px; height:9px; border-radius:2px; }
.s0 { background:#3A2317; } .s1 { background:var(--brand); } .s2 { background:#C9B8A6; }
.dg { position:relative; display:flex; align-items:flex-end; gap:18px; height:190px; padding:0 4px; border-bottom:1px solid var(--line-strong); background:repeating-linear-gradient(180deg, transparent 0 46px, var(--line-soft) 46px 47px); }
.dg-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.dg-bars { display:flex; align-items:flex-end; gap:4px; height:calc(100% - 20px); width:100%; justify-content:center; }
.dg-bars i { width:22%; max-width:22px; border-radius:4px 4px 0 0; }
.dg-col span { font-size:var(--fs-2xs); color:var(--text-muted); height:20px; line-height:20px; }
.dg-pop { position:absolute; left:43%; top:2px; padding:9px 11px; border-radius:var(--radius); background:var(--ink); color:#fff; font-size:var(--fs-xs); line-height:1.45; box-shadow:var(--shadow-sm); }
.dg-pop b, .dg-pop span, .dg-pop u { display:block; } .dg-pop u { text-decoration:none; color:var(--brand-light); margin-top:2px; }
.af-table { width:100%; border-collapse:collapse; font-size:var(--fs-xs); }
.af-table th { text-align:left; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; color:var(--text-mute3); font-weight:500; padding:0 0 6px; border-bottom:1px solid var(--line); }
.af-table td { padding:8px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); } .af-table td.hi { color:var(--red); font-weight:700; }
.af-table th:not(:first-child), .af-table td:not(:first-child) { text-align:right; }
@media (max-width:900px){ .dash-head { grid-template-columns:minmax(0,1fr); gap:18px; } .af-body { grid-template-columns:minmax(0,1fr); } .af-nav { display:none; } .af-grid { grid-template-columns:minmax(0,1fr); } .af-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .mis-steps { grid-template-columns:minmax(0,1fr); } .prompt-bar { flex-direction:column; align-items:flex-start; } .af-top { flex-wrap:wrap; } .af-badge { margin-left:0; } .sched-card, .mis-visual .wa-card { width:100%; } .mis-visual .wa-card { margin-top:12px; } }
.mis-visual .wa-card { margin-top:14px; }
.dg-bars i.hl { box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.dg-pop { left:auto; right:26%; top:4px; }
.dg-pop::after { content:""; position:absolute; left:18px; bottom:-6px; border:6px solid transparent; border-bottom:0; border-top-color:var(--ink); }
#ask-ai-support .sup-sugg { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#ask-ai-support .sup-sugg + .ask-input-row { margin-top:0; }
.sup-sugg .sl { width:100%; font-size:var(--fs-2xs); font-family:var(--font-mono); letter-spacing:.08em; color:var(--text-mute3); }
.sup-sugg .sc { font-size:var(--fs-sm); padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--text-muted); }
.dg-pop { left:57%; right:auto; }
/* ===== AI Engine pass 3 (23 Oct 2026): OCR capture + predictive alerts ===== */
.ai-bg-soft { background:radial-gradient(900px 420px at 10% 0%, rgba(249,155,49,.07), transparent 65%), var(--paper); border-top:1px solid var(--line); }
.ocx-grid { gap:40px; }
.ocx-stage { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
.ocx-inv { position:relative; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius); background:#fff; padding:16px; font-size:11px; color:var(--ink-soft); box-shadow:0 18px 40px rgba(10,10,10,.08); transform:rotate(-1deg); }
.ocx-scan { position:absolute; left:0; right:0; height:46px; top:-46px; background:linear-gradient(180deg, transparent, rgba(249,155,49,.28), transparent); animation:ocx-scan 3.2s linear infinite; pointer-events:none; }
@keyframes ocx-scan { to { top:100%; } }
.inv-top { display:flex; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:2px solid var(--ink); }
.inv-sup { font-size:13px; font-weight:800; color:var(--ink); } .inv-small { color:var(--text-muted); margin-top:2px; }
.inv-tt { text-align:right; font-weight:800; letter-spacing:.08em; color:var(--ink); } .inv-tt span { display:block; font-weight:500; letter-spacing:0; color:var(--text-muted); margin-top:2px; }
.inv-bill { margin:8px 0; color:var(--text-muted); } .inv-bill span { font-weight:700; color:var(--ink); margin-right:4px; }
.inv-tbl { width:100%; border-collapse:collapse; margin-top:4px; }
.inv-tbl th { text-align:left; font-weight:700; background:var(--paper-alt); padding:5px 4px; } .inv-tbl td { padding:5px 4px; border-bottom:1px solid var(--line-soft); }
.inv-tbl th:nth-child(n+3), .inv-tbl td:nth-child(n+3) { text-align:right; }
.inv-sum { margin-top:8px; margin-left:auto; width:72%; } .inv-sum > div { display:flex; justify-content:space-between; padding:3px 4px; } .inv-sum .tot { border-top:1px solid var(--ink); font-weight:800; color:var(--ink); font-size:12px; margin-top:2px; }
.inv-sample { position:absolute; right:-34px; bottom:18px; transform:rotate(-28deg); font-size:10px; letter-spacing:.2em; font-weight:800; color:rgba(192,71,47,.35); border:1px solid rgba(192,71,47,.3); padding:2px 30px; }
.ocx-inv [data-f] { border-radius:4px; transition:background .25s, box-shadow .25s; }
.ocx-inv .hl { background:rgba(249,155,49,.22); box-shadow:0 0 0 2px rgba(249,155,49,.55); }
.ocx-out { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper); padding:14px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:6px; position:relative; }
.ocx-lbl { font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; color:var(--text-mute3); display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.ocx-lbl .dot { width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 8px var(--brand); }
.ocx-f { display:flex; flex-direction:column; padding:6px 9px; border-radius:8px; background:var(--paper-tint); opacity:.25; transform:translateX(6px); transition:opacity .35s, transform .35s, background .35s; }
.ocx-f.on { opacity:1; transform:none; } .ocx-f .k { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute3); } .ocx-f .v { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.ocx-f[data-f="7"].on { background:rgba(28,124,79,.10); } .ocx-f[data-f="7"].on .v { color:var(--green); }
.ocx-btn { margin-top:4px; border:0; border-radius:var(--radius); padding:10px; font:inherit; font-weight:700; color:#fff; background:linear-gradient(90deg, var(--brand-deep), var(--brand-light)); opacity:.4; cursor:default; transition:transform .15s, opacity .3s, box-shadow .3s; }
.ocx-stage.done .ocx-btn { opacity:1; box-shadow:0 0 0 4px rgba(249,155,49,.25); animation:ocx-pulse 1s ease-in-out infinite; }
.ocx-stage.clicked .ocx-btn { animation:none; transform:scale(.96); box-shadow:none; }
@keyframes ocx-pulse { 50% { box-shadow:0 0 0 9px rgba(249,155,49,.12); } }
.ocx-toast { position:absolute; left:14px; right:14px; bottom:-14px; padding:9px 12px; border-radius:var(--radius); background:var(--green); color:#fff; font-weight:700; font-size:var(--fs-sm); text-align:center; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; box-shadow:0 10px 24px rgba(28,124,79,.3); }
.ocx-stage.clicked .ocx-toast { opacity:1; transform:none; }
.ocx-ways { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px; }
.ocx-ways > div { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.ocx-ways .icon { width:20px; height:20px; color:var(--brand-text); margin-bottom:4px; } .ocx-ways b { color:var(--ink); } .ocx-ways span { font-size:var(--fs-xs); color:var(--text-muted); }
.ocx-docs-lbl { margin-top:18px; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute3); }
.ocx-docs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ocx-docs span { padding:8px 12px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--ink); font-size:var(--fs-sm); font-weight:600; } .ocx-docs em { font-style:normal; font-weight:400; color:var(--text-muted); }
@media (max-width:640px){ .ocx-stage { grid-template-columns:minmax(0,1fr); } .ocx-inv { transform:none; } .ocx-ways { grid-template-columns:minmax(0,1fr); } }
/* predictive */
.predict-section { position:relative; overflow:hidden; background:radial-gradient(1000px 460px at 90% 0%, rgba(249,155,49,.10), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-apricot)); }
.predict-head .eyebrow-pill { margin-bottom:12px; }
.alert-stage { display:flex; flex-direction:column; gap:12px; border:1px solid var(--line-strong); border-radius:var(--radius-panel); background:var(--paper); padding:18px; box-shadow:0 24px 60px rgba(10,10,10,.08); }
.as-entry { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); background:var(--paper-tint); border:1px solid var(--line); font-size:var(--fs-sm); }
.as-entry .ok { width:24px; height:24px; flex:none; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.as-entry small { display:block; color:var(--text-muted); } .as-entry .as-time { margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-mute3); }
.as-ct { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin-bottom:6px; } .as-ct span { font-weight:500; font-size:var(--fs-2xs); color:var(--text-mute3); }
.run-svg { width:100%; height:auto; display:block; }
.run-svg .band { fill:rgba(28,124,79,.07); } .run-svg .ucl { stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 4; } .run-svg .ucl-t { fill:var(--red); font-size:9px; font-weight:700; letter-spacing:.06em; }
.run-svg .rl { fill:none; stroke:#3A2317; stroke-width:2; } .run-svg .rp { fill:#3A2317; stroke:#fff; stroke-width:2; }
.run-svg .pl { stroke:var(--red); stroke-width:2; stroke-dasharray:4 4; } .run-svg .pp { fill:var(--red); stroke:#fff; stroke-width:2; } .run-svg .pp-t { fill:var(--red); font-size:9px; font-weight:800; }
.run-svg text { fill:var(--text-mute3); font-size:9px; font-family:var(--font-mono); }
.as-wa { border-radius:12px 12px 12px 3px; background:#DCF8C6; padding:10px 12px; font-size:var(--fs-sm); color:var(--ink); box-shadow:0 8px 20px rgba(10,10,10,.08); }
.as-wa-h { display:flex; align-items:center; gap:6px; font-weight:700; color:#075E54; } .as-wa-h .icon { width:16px; height:16px; color:#25D366; } .as-wa-h small { margin-left:auto; font-weight:400; color:var(--text-mute3); }
.as-wa p { margin:6px 0 0; line-height:1.45; } .as-wa .do { color:#075E54; font-weight:600; }
/* looped reveal: chart points -> prediction -> WhatsApp alert */
.alert-stage .rp, .alert-stage .rl, .alert-stage .pl, .alert-stage .pp, .alert-stage .pp-t, .alert-stage .as-wa { animation:as-show 8s infinite both; }
.alert-stage .rp { animation-delay:var(--d); } .alert-stage .rl { animation-delay:1.9s; } .alert-stage .pl, .alert-stage .pp, .alert-stage .pp-t { animation-delay:2.6s; } .alert-stage .as-wa { animation-name:as-wa; animation-delay:3.4s; }
@keyframes as-show { 0% { opacity:0; } 6% { opacity:1; } 70% { opacity:1; } 78%,100% { opacity:0; } }
@keyframes as-wa { 0% { opacity:0; transform:translateY(12px); } 8% { opacity:1; transform:none; } 52% { opacity:1; } 60%,100% { opacity:0; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ocx-scan, .alert-stage *, .ocx-btn { animation:none !important; } .alert-stage .as-wa { opacity:1; } }
.wa-av { background:#fff; overflow:hidden; } .wa-av img { width:100%; height:100%; object-fit:contain; display:block; }
/* Prompt-to-Dashboard: lighter background (23 Oct 2026) */
.ai-bg-glow { background:radial-gradient(1100px 480px at 85% -10%, rgba(249,155,49,.09), transparent 65%), linear-gradient(180deg, var(--paper), var(--wash-cream)); }
.ai-bg-glow { background:radial-gradient(1100px 480px at 85% -10%, rgba(249,155,49,.08), transparent 65%), linear-gradient(180deg, var(--wash-cream), var(--wash-peach)); }
.ocx-stage { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.inv-tbl td, .inv-tbl th { white-space:nowrap; } .inv-tbl td:first-child { white-space:normal; }
.ocx-toast { bottom:14px; transform:scale(.96); }
.ocx-stage.clicked .ocx-toast { transform:none; }
.run-svg text { font-size:8px; } .run-svg .ucl-t, .run-svg .pp-t { font-size:8.5px; }
.alert-stage .as-wa { margin-top:auto; }
.as-checks { display:flex; flex-wrap:wrap; gap:6px; }
.as-checks span { font-size:var(--fs-xs); font-weight:600; padding:5px 10px; border-radius:var(--radius-pill); }
.as-checks .ok { color:var(--green); background:rgba(28,124,79,.09); } .as-checks .warn { color:var(--red); background:rgba(192,71,47,.10); }
.alert-stage { justify-content:space-between; } .alert-stage .as-wa { margin-top:0; }
/* AI Engine pass 4 (23 Oct 2026): predictive section fits one screen; demo + BYOK block */
.predict-section { padding:56px 28px; }
.predict-head.ph-2 { max-width:none; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:end; }
.predict-head.ph-2 h2 { font-size:clamp(26px,2.7vw,36px); margin-top:12px; }
.predict-head.ph-2 p { font-size:var(--fs-ui); margin:0; }
.predict-section .predict-grid { margin-top:24px; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.predict-section .alert-stage { padding:14px; gap:10px; }
.predict-section .run-svg { max-height:150px; }
.predict-section .presc-list { gap:10px; }
.predict-section .presc-card { padding:13px 16px; }
.predict-section .presc-title { font-size:var(--fs-base); margin-top:7px; }
.predict-section .presc-body { font-size:var(--fs-sm); line-height:1.45; margin-top:4px; }
.predict-section .presc-action { font-size:var(--fs-sm); margin-top:8px; padding-top:7px; color:var(--brand-text); }
@media (max-width:860px){ .predict-head.ph-2, .predict-section .predict-grid { grid-template-columns:minmax(0,1fr); gap:16px; } }
.demo-q-lbl { margin-top:20px; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute3); }
.cta-assurances.ca-6 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ca-6 .assure-card { padding:14px 16px; }
@media (max-width:600px){ .cta-assurances.ca-6 { grid-template-columns:minmax(0,1fr); } }
.cta-assurances.ca-6 { display:grid; }
.predict-section { padding:40px 28px 44px; }
.predict-section .run-svg { max-height:none; }
.predict-section .predict-grid { margin-top:18px; }
.predict-section .as-wa p { margin-top:4px; }
.run-svg text { font-size:10px; } .run-svg .ucl-t, .run-svg .pp-t { font-size:10px; }
.predict-section { padding:30px 28px 34px; }
.predict-head.ph-2 h2 { font-size:clamp(24px,2.4vw,32px); }
.predict-section .predict-grid { margin-top:16px; }
.predict-section .alert-stage { gap:8px; padding:12px 14px; }
.predict-section .as-entry { padding:8px 10px; }
.predict-section .presc-card { padding:11px 15px; }
.predict-section .presc-action { margin-top:6px; padding-top:6px; }
/* ===== AI Engine pass 5 (23 Oct 2026): spacing, orbit layout, language demos, compact dashboard ===== */
.ai-hero { padding-top:28px; }
.ai-hero .hero-chips { margin-top:20px; }
.ai-hero ~ .section { padding-top:60px; padding-bottom:60px; }
/* orbit: 1 top, 1 bottom, 2 left, 2 right, gently swaying around the core */
.orbit-sway { position:absolute; inset:0; transform-origin:50% 50%; animation:orbit-sway 8s ease-in-out infinite alternate; }
@keyframes orbit-sway { from { transform:rotate(-4deg); } to { transform:rotate(4deg); } }
.orbit-card.oc-t { top:0; left:calc(50% - 89px); }
.orbit-card.oc-b { bottom:0; left:calc(50% - 89px); }
.orbit-card.oc-lt { top:100px; left:-14px; } .orbit-card.oc-lb { bottom:100px; left:-14px; }
.orbit-card.oc-rt { top:100px; right:-14px; } .orbit-card.oc-rb { bottom:100px; right:-14px; }
@media (max-width:720px){ .orbit-card.oc-lt, .orbit-card.oc-lb, .orbit-card.oc-rt, .orbit-card.oc-rb { display:none; } }
@media (prefers-reduced-motion: reduce){ .orbit-sway { animation:none; } }
/* Ask AI: tap hint, nudging chip, language tabs in the panel bar */
.ask-hint { margin-top:22px; display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; color:var(--brand-text); }
.ask-hint .hand { display:inline-block; font-size:18px; animation:ask-tap 1.3s ease-in-out infinite; }
.ask-hint.used .hand { animation:none; }
@keyframes ask-tap { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.ask-chip { transition:border-color .2s, box-shadow .2s, transform .2s; }
.ask-chip:hover { border-color:var(--brand); color:var(--brand-deep); transform:translateY(-1px); }
.ask-chip.nudge { animation:ask-nudge 1.6s ease-in-out infinite; }
@keyframes ask-nudge { 0%,100% { box-shadow:0 0 0 0 rgba(249,155,49,0); } 50% { box-shadow:0 0 0 5px rgba(249,155,49,.22); border-color:var(--brand); } }
#ask-ai-widget .bar { flex-wrap:wrap; } #ask-ai-widget .sup-lang { margin-left:auto; display:flex; gap:4px; }
/* language tabs: 5-second progress bar while auto-rotating */
.sup-lang.auto button.on { position:relative; overflow:hidden; }
.sup-lang.auto button.on::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--brand); transform-origin:left; animation:lang-prog 5s linear forwards; }
@keyframes lang-prog { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* Prompt-to-Dashboard: fits one screen */
.dash-h2 { font-size:clamp(26px,2.6vw,34px); line-height:1.15; }
#dashboards .ai-lede { font-size:var(--fs-ui); margin-top:10px; }
#dashboards .dash-head { gap:28px; }
#dashboards .dash-side .ask-points { gap:7px; } #dashboards .dash-side .ask-points span.tx { font-size:var(--fs-sm); }
#dashboards .tok-strip { margin-top:10px; padding:8px 12px; }
#dashboards .prompt-bar { margin-top:16px; padding:8px 8px 8px 14px; }
#dashboards .app-frame { margin-top:10px; }
#dashboards .af-top { padding:8px 16px; }
#dashboards .af-nav { padding:10px 8px; } #dashboards .af-nav span { padding:5px 10px; }
#dashboards .af-main { padding:12px; gap:9px; }
#dashboards .af-kpis > div { padding:8px 11px; } #dashboards .af-kpis b { font-size:var(--fs-xl); margin-top:2px; }
#dashboards .af-card { padding:10px 12px; }
#dashboards .dg { height:132px; }
#dashboards .af-table td { padding:6px 0; }
/* AI Engine pass 6: one-screen sections, aligned "Coming soon" labels */
.eyebrow-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.eyebrow-row .eyebrow-pill { margin-bottom:0; }
.eyebrow-row .soon-pill { margin-left:0; vertical-align:baseline; }
.predict-head .eyebrow-row { margin-bottom:12px; } .predict-head .eyebrow-row .eyebrow-pill { margin-bottom:0; }
.key-line { color:var(--ink); background:linear-gradient(transparent 58%, rgba(249,155,49,.28) 58%); font-weight:700; }
/* hero fits one laptop screen */
.ai-hero h1 { font-size:clamp(38px,4.3vw,58px); }
.ai-hero .lede { margin-top:16px; }
.ai-hero .hero-ctas { margin-top:22px; }
.ai-hero .hero-chips { margin-top:16px; gap:7px; }
.ai-hero .hero-chip { padding:5px 11px; font-size:var(--fs-xs); }
.ai-hero .orbit-wrap { height:420px; }
.ai-hero .ai-hero-grid { padding-bottom:28px; }
/* AI page section headings a step smaller so sections fit one screen */
.ai-hero ~ .section h2.fs-42, .ai-hero ~ .section h2.fs-40, .ai-hero ~ .section h2.fs-38 { font-size:clamp(28px,2.7vw,36px); line-height:1.15; }
#ask-ai-support .sup-table th, #ask-ai-support .sup-table td { padding:7px 12px; }
#ask-ai-support .ask-points, #ask-ai .ask-points { margin-top:18px; gap:8px; }
/* dashboard: tighter still */
#dashboards.section { padding-top:44px; padding-bottom:44px; }
#dashboards .af-kpis b { display:inline; } #dashboards .af-kpis em { margin-left:6px; }
#dashboards .dg { height:120px; }
#dashboards .dg-pop { top:2px; left:57%; padding:6px 9px; font-size:10.5px; line-height:1.35; }
#dashboards.section { padding-top:36px; padding-bottom:36px; }
#ask-ai.section, #ask-ai-support.section { padding-top:48px; padding-bottom:48px; }
#dashboards .dash-head { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); } #dashboards .dash-h2 { font-size:clamp(26px,2.35vw,32px); }
/* Ask AI demo: fixed size so the page never jumps while the demo cycles (23 Oct 2026) */
#ask-ai-widget .ask-body { height:570px; min-height:0; }
#ask-ai-widget .ask-a-row { flex:1; min-height:0; }
#ask-ai-widget .ask-a-box { overflow-y:auto; max-height:100%; }
#ask-ai-widget .ask-input-row { margin-top:auto; }
#ask-ai .ask-suggestions { min-height:196px; align-content:flex-start; }
@media (max-width:760px){ #ask-ai-widget .ask-body { height:640px; } #ask-ai .ask-suggestions { min-height:246px; } }
#ask-ai-support .sup-body .ask-a-box { overflow-y:auto; }
#ask-ai-support .sup-body { flex:none; height:560px; overflow:hidden; }
#ask-ai-support .sup-body .ask-a-row { min-height:0; flex:1; }
#ask-ai-support .sup-body .ask-a-box { max-height:100%; }
@media (max-width:1100px){ #ask-ai-support .sup-body { height:620px; } }
@media (max-width:760px){ #ask-ai-support .sup-body { height:660px; } }
/* ===== Cinema-size videos (23 Oct 2026): real faces at full block width ===== */
/* Home: client story fills the whole section, copy over a dark fade */
.vid-hero { border-top:0; padding:0; background:#0A0A0A; }
.vid-hero .vh-card { border:0; border-radius:0; box-shadow:none; background:#0A0A0A; }
.vid-hero .vh-card .frame { aspect-ratio:auto; height:clamp(480px, 70vh, 660px); }
.vid-hero .poster { opacity:1; object-position:center 30%; }
.vh-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 36%, rgba(10,10,10,.12) 66%, rgba(10,10,10,0) 100%), linear-gradient(0deg, rgba(10,10,10,.45), transparent 40%); }
.vh-copy { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; max-width:1224px; pointer-events:none; }
.vh-copy > * { max-width:520px; pointer-events:auto; }
.vh-copy h2 { color:#fff; font-size:var(--fs-h2); line-height:1.12; margin:12px 0 0; }
.vh-copy p { color:rgba(255,255,255,.80); font-size:var(--fs-ui); line-height:1.6; margin:12px 0 0; }
.vh-copy .tc-hear { color:#fff; font-weight:600; }
.vh-copy .eyebrow-pill { background:rgba(249,155,49,.20); color:#FFC985; }
.vh-copy .vh-watch { margin-top:22px; display:inline-flex; align-items:center; gap:8px; }
.vh-copy .vh-watch .icon { width:16px; height:16px; fill:currentColor; stroke:none; }
.vh-copy .vh-more { margin-top:10px; color:#fff; border-color:rgba(255,255,255,.45); background:transparent; }
.vh-copy .vh-who { margin-top:18px; font-size:var(--fs-sm); color:rgba(255,255,255,.7); } .vh-copy .vh-who b { color:#fff; }
.vid-hero .play-btn.vh-play { inset:auto; left:auto; right:16%; top:50%; transform:translateY(-50%); width:auto; height:auto; background:none; flex-direction:column; gap:12px; z-index:3; cursor:pointer; }
.vid-hero .play-btn.vh-play .disc { width:92px; height:92px; box-shadow:0 0 0 16px rgba(249,155,49,.22), 0 12px 40px rgba(0,0,0,.4); }
.vid-hero .play-btn.vh-play .disc svg { width:28px; height:28px; }
.vh-play-t { color:#fff; font-weight:700; font-size:var(--fs-sm); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.vid-hero .vh-card iframe { z-index:4; }
@media (max-width:860px){
  .vid-hero .vh-card .frame { height:auto; display:flex; flex-direction:column; }
  .vid-hero .poster { position:relative; aspect-ratio:16/9; height:auto; }
  .vh-shade { display:none; }
  .vid-hero .play-btn.vh-play { right:50%; top:0; transform:translateX(50%); margin-top:calc(28vw - 46px); }
  .vid-hero .play-btn.vh-play .disc { width:72px; height:72px; }
  .vh-copy { padding-top:24px; padding-bottom:32px; height:auto; background:#0A0A0A; }
  .vid-hero .vh-card:has(iframe) .frame { aspect-ratio:16/9; display:block; }
}
/* Client Feedback: featured testimonial at full width, the others below */
#videos .vt-grid { grid-template-columns:minmax(0,1fr); }
#videos .vt-feature .video-card .frame { aspect-ratio:21/9; }
#videos .vt-feature .poster { opacity:1; object-position:center 30%; }
#videos .vt-feature .play-btn .disc { width:92px; height:92px; }
#videos .vt-side { flex-direction:row; flex-wrap:wrap; }
#videos .vt-side .vt-card { flex:1 1 280px; }
@media (max-width:760px){ #videos .vt-feature .video-card .frame { aspect-ratio:16/9; } }
/* AI Engine "See it running": text on top, video across the full block */
#ai-demo .walk-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 48px; align-items:start; }
#ai-demo .walk-grid > div:first-child { display:contents; }
#ai-demo .walk-grid > div:first-child > .eyebrow-pill, #ai-demo .walk-grid > div:first-child > h2, #ai-demo .walk-grid > div:first-child > .ai-lede { grid-column:1; }
#ai-demo .walk-grid > div:first-child > .demo-q-lbl, #ai-demo .walk-grid > div:first-child > .chapters, #ai-demo .walk-grid > div:first-child > .hero-ctas { grid-column:2; }
#ai-demo .walk-grid > div:first-child > .demo-q-lbl { grid-row:1; margin-top:0; }
#ai-demo .walk-grid > div:first-child > .chapters { grid-row:2 / span 2; margin-top:0; }
#ai-demo .walk-grid > div:first-child > .hero-ctas { grid-row:4; margin-top:0; }
#ai-demo .walk-video { grid-column:1 / -1; grid-row:5; margin-top:8px; }
#ai-demo .video-card .frame { aspect-ratio:21/9; } #ai-demo .poster { opacity:1; object-position:center 30%; }
#ai-demo .video-card .play-btn .disc { width:92px; height:92px; }
@media (max-width:860px){ #ai-demo .walk-grid { grid-template-columns:minmax(0,1fr); } #ai-demo .walk-grid > div:first-child > * { grid-column:1 !important; grid-row:auto !important; } #ai-demo .walk-video { grid-row:auto; } #ai-demo .video-card .frame { aspect-ratio:16/9; } }
.vid-hero .vh-copy p.tc-hear { color:#fff !important; }
.vid-hero .vh-card .frame { height:clamp(540px, 76vh, 680px); }
.vh-copy > * { max-width:min(520px, 100%); }
@media (max-width:860px){ .vid-hero .vh-card .frame { height:auto; } }
#ai-demo .walk-grid > div:first-child > .eyebrow-pill { justify-self:start; } #ai-demo .walk-grid > div:first-child > .hero-ctas { justify-self:start; }
/* Header: AI Engine dropdown (desktop only; on mobile the link opens the page in one tap) */
.nav-dd { position:relative; display:flex; align-items:center; }
.nav-dd > a { display:inline-flex; align-items:center; gap:4px; }
.nav-dd-chev { width:14px; height:14px; transition:transform .2s; }
.nav-dd-menu { position:absolute; top:100%; left:-18px; min-width:300px; padding:8px; margin-top:8px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:0 18px 44px rgba(10,10,10,.12); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s; z-index:80; }
.nav-dd-menu::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity:1; visibility:visible; transform:none; }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform:rotate(180deg); }
.main-nav .nav-dd-menu a { display:flex; flex-direction:column; gap:1px; padding:9px 12px; border:0; border-radius:var(--radius); white-space:normal; }
.main-nav .nav-dd-menu a:hover { background:var(--brand-tint); }
.nav-dd-menu b { font-size:var(--fs-sm); color:var(--ink); font-weight:600; }
.nav-dd-menu span { font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:900px){ .nav-dd { display:block; } .nav-dd > a { display:flex; } .nav-dd-menu, .nav-dd-chev { display:none !important; } }
html { scroll-padding-top:96px; }
/* Header: Home as an icon on desktop, icon + word in the mobile drawer */
.main-nav a.nav-home { display:inline-flex; align-items:center; gap:8px; }
.nav-home-ic { display:block; }
.nav-home-t { display:none; }
@media (max-width:900px){ .main-nav a.nav-home { display:flex; } .nav-home-t { display:inline; } }

/* ===== AI demo band (compact, no video) ===== */
#ai-demo.section{padding:56px 0}
.demo-band{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:36px 40px;box-shadow:0 10px 30px -18px rgba(10,10,10,.18)}
.demo-band h2{margin:14px 0 0}
.demo-band .ai-lede{margin:12px 0 22px;max-width:520px}
.db-btn{display:inline-flex;align-items:center;gap:8px}
.db-qs{background:var(--paper-tint);border:1px solid var(--line-soft);border-radius:14px;padding:22px 24px}
.db-qs .demo-q-lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);font-weight:600;margin-bottom:10px}
.db-qs ol{margin:0;padding-left:20px;display:grid;gap:9px;color:var(--ink-soft);font-size:15px;line-height:1.45}
.db-qs li::marker{color:var(--brand);font-weight:700}
@media(max-width:860px){.demo-band{grid-template-columns:1fr;gap:22px;padding:26px 20px}.db-btn{width:100%;justify-content:center}}

/* ===== Client Feedback hero v2 ===== */
.cf-hero2{position:relative;overflow:hidden;padding:56px 0 60px;background:radial-gradient(600px 340px at 88% 20%,rgba(249,155,49,.20),transparent 70%),radial-gradient(500px 300px at 0% 100%,rgba(249,155,49,.10),transparent 70%),linear-gradient(180deg,#FFF8EF 0%,#FFFFFF 100%)}
.cf-hero2::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.cf2-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.cf-hero2 .crumbs{display:flex;gap:6px;margin-bottom:16px;font-size:var(--fs-sm);color:var(--text-muted)}
.cf-hero2 .crumbs a{color:var(--text-muted)}
.cf-hero2 h1{margin:14px 0 0}
.cf-hero2 .lede{font-size:var(--fs-lede-lg);line-height:1.6;color:var(--text-muted);max-width:540px;margin:16px 0 0}
.cf2-cta{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:28px}
.cf2-link{color:var(--ink);font-weight:600;font-size:15px;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.cf2-link:hover{color:var(--brand-deep);border-color:var(--brand)}
.cf2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cf2-stat{background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px}
.cf2-stat .num{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.cf2-stat .lbl{font-size:13px;line-height:1.35;color:var(--text-muted)}
.cf2-stat.big{grid-column:1/-1;background:var(--ink);border-color:var(--ink);padding:22px 24px;flex-direction:row;align-items:center;gap:18px}
.cf2-stat.big .num{font-size:52px;color:var(--brand)}
.cf2-stat.big .lbl{font-size:16px;color:#e9e7e2;max-width:220px}
@media(max-width:900px){.cf-hero2{padding:36px 0 44px}.cf2-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:480px){.cf2-stats{grid-template-columns:1fr 1fr}.cf2-stat.big .num{font-size:42px}.cf2-cta .btn{width:100%;justify-content:center}}

/* ===== Static client logo grid ===== */
.lg-sub{text-align:center;color:var(--text-muted);margin:-8px 0 26px;font-size:15px}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lg-tile{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 14px 14px;text-align:center;transition:border-color .2s,box-shadow .2s}
.lg-tile:hover{border-color:var(--line-strong);box-shadow:0 8px 22px -16px rgba(10,10,10,.25)}
.lg-logo{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.lg-logo img{max-height:56px;max-width:80%;width:auto;height:auto;object-fit:contain}
.lg-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.lg-city{font-size:12px;color:var(--text-mute2);margin-top:2px}
@media(max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.logo-grid{grid-template-columns:repeat(2,1fr);gap:10px}.lg-logo{height:52px}}
@media(max-width:480px){.cf2-stats{grid-template-columns:repeat(3,1fr);gap:8px}.cf2-stat{padding:12px 10px}.cf2-stat .num{font-size:20px}.cf2-stat .lbl{font-size:11.5px}.db-btn{font-size:15px;padding-left:16px;padding-right:16px;white-space:nowrap}}

/* logo grid: centre an incomplete last row + 'and more' line */
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center}
.logo-grid .lg-tile{flex:0 0 calc((100% - 56px)/5)}
@media(max-width:1100px){.logo-grid .lg-tile{flex-basis:calc((100% - 42px)/4)}}
@media(max-width:640px){.logo-grid .lg-tile{flex-basis:calc((100% - 10px)/2)}}
.lg-more{text-align:center;margin:22px 0 0;font-weight:600;color:var(--ink);font-size:15px}

/* Video player: plays in place + "Watch on YouTube" button (24 Oct 2026).
   Home client story plays in a right-hand panel; the copy stays on the left. */
.vid-hero .vh-card.is-playing .vh-play { display:none; }
.vid-hero .vh-card.is-playing .vh-shade { background:linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.80) 45%, rgba(10,10,10,.70) 100%); }
.vh-player { position:absolute; z-index:5; top:50%; right:max(28px, calc((100% - 1224px) / 2)); transform:translateY(-50%); width:min(48%, 640px, calc(100% - 640px)); display:flex; flex-direction:column; gap:12px; animation:vhIn .35s ease both; }
@keyframes vhIn { from { opacity:0; transform:translateY(calc(-50% + 12px)); } to { opacity:1; transform:translateY(-50%); } }
.vh-player-media { position:relative; aspect-ratio:16/9; border-radius:var(--radius-card); overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 10px rgba(249,155,49,.10); }
.vh-player-media iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vh-player-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn.vh-yt { padding:10px 18px; font-size:var(--fs-md); background:var(--paper); color:var(--ink); border-color:var(--paper); box-shadow:var(--shadow-sm); }
.btn.vh-yt:hover { border-color:var(--brand); color:var(--ink); }
.vh-close { white-space:nowrap; background:none; border:0; padding:8px 4px; color:rgba(255,255,255,.75); font:600 var(--fs-sm)/1 var(--font-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.vh-close:hover { color:#fff; }
.vh-yt:focus-visible, .vh-close:focus-visible, .vc-yt:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.vc-yt { position:absolute; z-index:5; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.94); color:var(--ink); font-size:var(--fs-xs); font-weight:700; text-decoration:none; box-shadow:var(--shadow-sm); }
.vc-yt:hover { color:var(--brand-text); }
.vid-offline { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:24px; background:linear-gradient(135deg, var(--ink), var(--ink-soft)); color:rgba(255,255,255,.8); font-size:var(--fs-md); line-height:1.5; }
.vid-offline strong { color:#FFC985; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:1100px) { .vh-player { width:min(44%, calc(100% - 600px)); } .vh-copy > * { max-width:460px; } }
@media (max-width:980px) { .vh-player { width:42%; } .vh-copy > * { max-width:400px; } }
@media (max-width:860px){
  .vid-hero .vh-card.is-playing .frame { aspect-ratio:auto; display:flex; flex-direction:column; }
  .vid-hero .vh-card.is-playing .poster { display:none; }
  .vh-player { position:relative; order:-1; top:auto; right:auto; transform:none; width:100%; gap:0; animation:none; }
  .vh-player-media { border-radius:0; border:0; box-shadow:none; }
  .vh-player-bar { padding:12px 16px; background:#0A0A0A; }
  .vh-copy > * { max-width:none; }
}
@media (prefers-reduced-motion: reduce) { .vh-player { animation:none; } }

/* Branded video frame (24 Oct 2026): gradient hairline border, viewfinder corners,
   title strip + caption strip. Overrides the plain panel above. */
.vh-player { gap:0; padding:14px; border-radius:var(--radius-panel);
  background:linear-gradient(#141414, #0E0E0E) padding-box, linear-gradient(135deg, var(--brand-light), rgba(249,155,49,.35) 35%, rgba(255,255,255,.08) 65%, var(--brand-deep)) border-box;
  border:1.5px solid transparent; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 120px rgba(249,155,49,.14); }
.vh-player::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:-1;
  background-image:radial-gradient(rgba(249,155,49,.20) 1.1px, transparent 1.3px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 100% 0%, #000, transparent 70%); mask-image:radial-gradient(ellipse 70% 60% at 100% 0%, #000, transparent 70%); }
.vh-player-media { border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow:none; }
.vf-corner { position:absolute; width:22px; height:22px; border:0 solid var(--brand); pointer-events:none; }
.vf-tl { top:-7px; left:-7px; border-top-width:3px; border-left-width:3px; border-top-left-radius:10px; }
.vf-tr { top:-7px; right:-7px; border-top-width:3px; border-right-width:3px; border-top-right-radius:10px; }
.vf-bl { bottom:-7px; left:-7px; border-bottom-width:3px; border-left-width:3px; border-bottom-left-radius:10px; }
.vf-br { bottom:-7px; right:-7px; border-bottom-width:3px; border-right-width:3px; border-bottom-right-radius:10px; }
.vf-top { display:flex; align-items:center; gap:10px; padding:2px 4px 12px; }
.vf-live { width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(249,155,49,.22); animation:vfPulse 2s ease-in-out infinite; }
@keyframes vfPulse { 50% { box-shadow:0 0 0 8px rgba(249,155,49,0); } }
.vf-label { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#FFC985; }
.vf-yt { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:var(--fs-xs); font-weight:700; text-decoration:none; transition:background .15s, border-color .15s; }
.vf-yt:hover { background:rgba(255,255,255,.16); border-color:var(--brand); }
.vf-yt:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.vh-player-bar { padding:12px 4px 0; }
.vf-who { font-size:var(--fs-sm); color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vf-who b { color:#fff; }
.vid-hero .vh-card.is-playing .vh-who { visibility:hidden; }
@media (max-width:860px){
  .vh-player { padding:10px 10px 12px; margin:16px; width:auto; border-radius:var(--radius-card); }
  .vh-player-bar { padding:10px 2px 0; background:none; }
  .vf-corner { width:16px; height:16px; }
  .vid-hero .vh-card.is-playing .vh-who { visibility:visible; }
  .vf-who { visibility:hidden; }
}
@media (prefers-reduced-motion: reduce) { .vf-live { animation:none; } }

/* Client logo grid (24 Oct 2026): last row left-aligned like the rows above; the
   "and 100+ more" line fills the rest of that row, right-aligned under the last column. */
.logo-grid{justify-content:flex-start}
.logo-grid .lg-more{flex:1 1 180px;align-self:center;margin:0;padding:0 6px;text-align:right;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
@media(max-width:640px){.logo-grid .lg-more{text-align:center;padding:8px 0 0}}

/* Client Feedback featured video: same branded frame language as the home client story
   (gradient hairline), 24 Oct 2026. */
#videos .vt-feature { position:relative; }
#videos .vt-feature .video-card { border:1.5px solid transparent; border-radius:var(--radius-panel);
  background:linear-gradient(#0A0A0A,#0A0A0A) padding-box, linear-gradient(135deg, var(--brand-light), rgba(249,155,49,.35) 35%, var(--line-strong) 65%, var(--brand-deep)) border-box; }
#videos .vt-side .vt-card .video-card { border-radius:var(--radius-card); }

/* Client Feedback videos (24 Oct 2026): featured story + a 4-up row. Order keeps the
   two PC Sons videos apart (Senthil featured first, Vijay Chandran last in the row). */
#videos .vt-side { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
@media (max-width:1100px){ #videos .vt-side { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ #videos .vt-side { grid-template-columns:minmax(0,1fr); } }

/* Client Feedback video playlist (24 Oct 2026): one large branded player + a list of
   client stories. Replaces the featured-card + small-thumbnail grid. */
#videos .vp { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr); gap:24px; align-items:start; }
#videos .vp-main { padding:12px; border:1.5px solid transparent; border-radius:var(--radius-panel);
  background:linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--brand-light), rgba(249,155,49,.35) 35%, var(--line-strong) 65%, var(--brand-deep)) border-box;
  box-shadow:0 24px 60px -30px rgba(10,10,10,.35); }
#videos .vp-player { border:0; border-radius:var(--radius-card); box-shadow:none; background:#0A0A0A; }
#videos .vp-player .frame { aspect-ratio:16/9; }
#videos .vp-player .poster { opacity:1; object-position:center 30%; }
#videos .vp-player .play-btn .disc { width:84px; height:84px; }
#videos .vp-meta { padding:16px 8px 6px; }
#videos .vp-now { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-text); }
#videos .vp-title { margin:6px 0 0; font-size:var(--fs-xl); line-height:1.3; }
#videos .vp-who { margin:4px 0 0; font-size:var(--fs-sm); color:var(--text-muted); }
#videos .vp-side { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--paper); overflow:hidden; }
#videos .vp-head { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 12px; border-bottom:1px solid var(--line-soft); font-weight:700; color:var(--ink); }
#videos .vp-count { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
#videos .vp-list { list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:4px; flex:1; overflow:auto; max-height:494px; }
#videos .vp-item { display:grid; grid-template-columns:132px minmax(0,1fr); gap:14px; align-items:center; width:100%; padding:8px; border:1px solid transparent; border-radius:var(--radius); background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; transition:background .15s, border-color .15s; }
#videos .vp-item:hover { background:var(--paper-tint); }
#videos .vp-item:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
#videos .vp-item.is-active { background:var(--brand-tint); border-color:rgba(249,155,49,.5); }
#videos .vp-thumb { position:relative; display:block; border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:var(--ink-soft); }
#videos .vp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#videos .vp-dur { position:absolute; inset:auto auto 6px 6px; width:24px; height:24px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; }
#videos .vp-dur .icon { width:10px; height:10px; color:#fff; fill:currentColor; stroke:none; margin-left:1px; }
#videos .vp-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
#videos .vp-txt b { font-size:var(--fs-md); color:var(--ink); line-height:1.3; }
#videos .vp-txt > span { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.35; }
#videos .vp-state { display:none; margin-top:4px; font-style:normal; font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-text); }
#videos .vp-item.is-active .vp-state { display:block; }
#videos .vp-all { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-top:1px solid var(--line-soft); font-size:var(--fs-sm); font-weight:700; color:var(--brand-text); text-decoration:none; }
#videos .vp-all:hover { background:var(--paper-tint); }
#videos .vp-all .icon { width:14px; height:14px; }
@media (max-width:980px){
  #videos .vp { grid-template-columns:minmax(0,1fr); }
  #videos .vp-list { flex-direction:row; overflow-x:auto; max-height:none; scroll-snap-type:x mandatory; padding:10px; gap:10px; }
  #videos .vp-list li { flex:0 0 200px; scroll-snap-align:start; }
  #videos .vp-item { grid-template-columns:minmax(0,1fr); gap:10px; }
}
/* Spotlight photo + watch link, testimonial photos */
.sp-media img { object-position:center 20%; }
.sp-watch { display:inline-flex; align-items:center; gap:8px; margin-top:10px; width:max-content; font-weight:700; color:var(--brand-text); text-decoration:none; }
.sp-watch .icon { width:14px; height:14px; fill:currentColor; stroke:none; }
.sp-watch:hover { text-decoration:underline; }
.tt-av.tt-photo { object-fit:cover; padding:0; background:var(--paper-alt); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line-strong); }

/* Client spotlight, compact (24 Oct 2026): fits one screen with the heading. */
#spotlight.sp-compact { padding-top:64px; padding-bottom:64px; }
#spotlight.sp-compact .section-head { margin-bottom:28px; }
#spotlight.sp-compact .section-head h2 { font-size:var(--fs-h2-sm); }
#spotlight.sp-compact .sp-card { grid-template-columns:240px minmax(0,1fr); align-items:stretch; }
#spotlight.sp-compact .sp-media { min-height:0; height:100%; max-height:320px; }
#spotlight.sp-compact .sp-quote { padding:32px 40px; gap:18px; }
#spotlight.sp-compact .sp-quote::before { top:10px; left:32px; font-size:72px; }
#spotlight.sp-compact .sp-quote p { font-size:var(--fs-xl); line-height:1.5; }
@media (max-width:760px){ #spotlight.sp-compact .sp-card { grid-template-columns:minmax(0,1fr); } #spotlight.sp-compact .sp-media { height:260px; } #spotlight.sp-compact .sp-quote { padding:26px 22px; } }

/* Testimonial photos: corporate avatar treatment (studio backdrop baked into the WebP),
   shown a little larger with a brand ring. */
.tt-av.tt-photo { width:52px; height:52px; border:2px solid var(--paper); box-shadow:0 0 0 1.5px rgba(249,155,49,.55), 0 4px 12px -4px rgba(10,10,10,.25); }
#spotlight.sp-compact .sp-media img { object-position:center 30%; }

/* Testimonial photos: larger portrait avatars (24 Oct 2026) */
#testimonials .tt-card figcaption { gap:16px; padding-top:18px; border-top:1px solid var(--line-soft); }
#testimonials .tt-av { width:80px; height:80px; font-size:var(--fs-2xl); }
#testimonials .tt-av.tt-photo { width:80px; height:80px; border:3px solid var(--paper); box-shadow:0 0 0 2px rgba(249,155,49,.6), 0 8px 20px -8px rgba(10,10,10,.3); }
#testimonials .tt-card figcaption strong { font-size:var(--fs-base); }
@media (max-width:600px){ #testimonials .tt-av, #testimonials .tt-av.tt-photo { width:64px; height:64px; } }