/* ZyndaX brand v1 — shared styles for portico-web (hub + /for/<vertical> + /trust). Extracted from
   index.html's original inline <style> so every page stays visually identical without duplicating
   ~200 lines of CSS per page. See src/portals/brand/ for the framework-neutral token source; this file
   is the plain-CSS mirror actually shipped by portico-web (no build step, no Tailwind). */
  :root{
    /* ZyndaX brand v1 — indigo-night + electric-cyan signal */
    --ink:#0B0620; --ink-2:#140A33; --ink-3:#1C1147;
    --indigo:#3B1FB0; --iris:#6D5DF6; --cyan:#33bcdc; --cyan-soft:#8fe0f2;
    --amber:#E0A020; --green:#3FBF7F; --ember:#FF6B4A;
    --white:#F7F6FB; --fog:#B9B4E0; --fog-2:#7d78ad;
    --paper:#F7F6FB; --slate:#16122B;
    --line:rgba(150,140,220,.16); --line-2:rgba(150,140,220,.28); --maxw:1180px;
    --display:"Bricolage Grotesque","Hanken Grotesk","Segoe UI",system-ui,sans-serif;
    --body:"Hanken Grotesk","SF Pro Text","Segoe UI",system-ui,-apple-system,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",monospace;
  }
  html[dir="rtl"]{
    --display:"IBM Plex Sans Arabic",system-ui,sans-serif;
    --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
    --mono:"IBM Plex Sans Arabic","JetBrains Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html,body{ margin:0; }
  body{ color:var(--white); background:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  ::selection{ background:var(--cyan); color:var(--ink); }
  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; text-wrap:balance; margin:0; }
  html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{ letter-spacing:0; }
  .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); display:inline-flex; gap:9px; align-items:center; }
  html[dir="rtl"] .eyebrow{ letter-spacing:.05em; }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--cyan); opacity:.7; }

  .nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--ink) 72%,transparent); border-bottom:1px solid var(--line); }
  .nav .wrap{ display:flex; align-items:center; gap:28px; height:64px; }
  .brand{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:21px; display:flex; align-items:center; gap:11px; }
  .brand .mark{ width:26px; height:26px; display:block; filter:drop-shadow(0 0 11px color-mix(in srgb,var(--cyan) 42%,transparent)); }
  .brand .word{ display:inline-block; } .brand .cap{ color:var(--cyan-soft); }
  .nav nav{ display:flex; gap:26px; }
  .nav nav a{ font-size:14.5px; color:var(--fog); transition:color .18s; }
  .nav nav a:hover{ color:var(--white); }
  .nav .spacer{ flex:1; }
  .lang{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--fog); border:1px solid var(--line-2); border-radius:8px; padding:7px 12px; background:none; cursor:pointer; transition:border-color .2s,color .2s; }
  .lang:hover{ border-color:var(--cyan); color:var(--cyan-soft); }
  .btn{ font-family:var(--body); font-weight:600; font-size:14.5px; border-radius:9px; padding:10px 17px; border:1px solid transparent; cursor:pointer; transition:transform .16s,box-shadow .2s,background .2s,border-color .2s,color .2s; display:inline-flex; align-items:center; gap:8px; }
  .btn-primary{ background:var(--cyan); color:#04222b; box-shadow:0 8px 26px -10px color-mix(in srgb,var(--cyan) 80%,transparent); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 32px -8px color-mix(in srgb,var(--cyan) 85%,transparent); }
  .btn-ghost{ border-color:var(--line-2); color:var(--white); }
  .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan-soft); }

  .hero{ position:relative; padding-top:76px; padding-bottom:96px; overflow:hidden; }
  .hero::before{ content:""; position:absolute; inset-block-start:-30%; inset-inline:-10%; height:720px; z-index:0;
    background:radial-gradient(60% 60% at 22% 30%,color-mix(in srgb,var(--iris) 46%,transparent),transparent 70%),radial-gradient(50% 50% at 88% 12%,color-mix(in srgb,var(--cyan) 22%,transparent),transparent 70%);
    filter:blur(6px); pointer-events:none; }
  .hero .grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
  .prompt-eyebrow{ font-family:var(--mono); font-size:13px; color:var(--cyan); display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border:1px solid color-mix(in srgb,var(--cyan) 34%,transparent); border-radius:9px; background:color-mix(in srgb,var(--cyan) 7%,transparent); }
  .prompt-eyebrow .chev{ font-weight:700; }
  .prompt-eyebrow .cmd{ color:var(--white); white-space:nowrap; overflow:hidden; border-inline-end:2px solid var(--cyan); animation:type 2.4s steps(30) .3s both, caret 1s step-end infinite; }
  @keyframes type{ from{ inline-size:0; } to{ inline-size:24ch; } }
  @keyframes caret{ 50%{ border-color:transparent; } }
  .hero h1{ font-size:clamp(38px,5.4vw,68px); line-height:1.04; margin:20px 0 0; }
  .hero h1 em{ font-style:normal; color:transparent; background:linear-gradient(96deg,var(--cyan-soft),var(--cyan) 40%,var(--iris)); -webkit-background-clip:text; background-clip:text; }
  .hero p.lede{ margin:22px 0 0; font-size:clamp(16px,1.5vw,19px); color:var(--fog); max-width:36ch; }
  .cta-row{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; }
  .trust{ margin-top:30px; display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--fog-2); }
  .trust span{ display:inline-flex; gap:7px; align-items:center; }
  .trust span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

  .conv{ position:relative; border-radius:18px; padding:20px; background:linear-gradient(180deg,color-mix(in srgb,var(--ink-3) 92%,transparent),var(--ink-2)); border:1px solid var(--line-2); box-shadow:0 40px 90px -40px #000,0 0 0 1px rgba(51,188,220,.06),inset 0 1px 0 rgba(255,255,255,.05); }
  .conv::after{ content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; box-shadow:inset 0 0 60px -20px color-mix(in srgb,var(--cyan) 40%,transparent); opacity:.5; }
  .conv .head{ display:flex; align-items:center; gap:9px; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line); }
  .conv .head .live{ width:8px; height:8px; border-radius:50%; background:var(--cyan); animation:pulse 2.2s infinite; }
  .conv .head b{ font-family:var(--display); font-weight:700; font-size:14px; }
  .conv .head .meta{ margin-inline-start:auto; font-family:var(--mono); font-size:10.5px; color:var(--fog-2); letter-spacing:.05em; }
  .msg-user{ max-width:82%; margin-inline-start:auto; background:color-mix(in srgb,var(--iris) 30%,var(--ink-2)); border:1px solid var(--line-2); padding:10px 13px; border-radius:12px 12px 4px 12px; font-size:14px; }
  html[dir="rtl"] .msg-user{ border-radius:12px 12px 12px 4px; }
  .flow{ display:flex; flex-direction:column; gap:10px; padding-top:14px; }
  .steps{ display:flex; flex-direction:column; gap:7px; }
  .step{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fog); font-family:var(--mono); }
  .step .tick{ width:15px; height:15px; border-radius:5px; display:grid; place-items:center; background:color-mix(in srgb,var(--cyan) 18%,transparent); color:var(--cyan); font-size:10px; flex:none; }
  .result{ background:color-mix(in srgb,var(--ink) 55%,transparent); border:1px solid var(--line); border-radius:12px; padding:13px 14px; }
  .result p{ margin:0; font-size:13.5px; color:var(--white); }
  .cites{ display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }
  .chip{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; color:var(--fog); display:inline-flex; gap:6px; align-items:center; }
  .chip .b{ width:13px; height:13px; border-radius:50%; background:color-mix(in srgb,var(--cyan) 22%,transparent); color:var(--cyan); display:grid; place-items:center; font-size:8px; }
  .gate{ border:1px solid color-mix(in srgb,var(--amber) 50%,transparent); border-radius:12px; overflow:hidden; }
  .gate .strip{ height:3px; background:var(--amber); transition:background .4s; }
  .gate.approved .strip{ background:var(--green); }
  .gate .in{ padding:12px 14px; display:flex; align-items:center; gap:11px; }
  .gate .label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); transition:color .3s; }
  .gate.approved .label{ color:var(--green); }
  .gate .txt{ font-size:13px; color:var(--white); }
  .gate .btns{ margin-inline-start:auto; display:flex; gap:7px; }
  .gate .mini{ font-family:var(--body); font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); color:var(--white); background:none; cursor:pointer; }
  .gate .mini.go{ background:var(--green); color:#05231a; border-color:transparent; }
  .gate.approved .btns{ display:none; }
  .gate .receipt{ display:none; margin-inline-start:auto; font-family:var(--mono); font-size:10.5px; color:var(--green); align-items:center; gap:7px; }
  .gate.approved .receipt{ display:inline-flex; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 60%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  .reveal{ opacity:0; transform:translateY(6px); }
  .r1{ animation:rise .5s .5s forwards } .r2{ animation:rise .5s .9s forwards } .r3{ animation:rise .5s 1.3s forwards }
  .r4{ animation:rise .55s 1.9s forwards } .r5{ animation:rise .55s 2.5s forwards }

  .band{ padding:88px 0; position:relative; }
  .band.paper{ background:var(--paper); color:var(--slate); }
  .band.paper .eyebrow{ color:var(--indigo); } .band.paper .eyebrow::before{ background:var(--indigo); }
  .band h2{ font-size:clamp(28px,3.5vw,44px); line-height:1.06; margin-top:16px; max-width:20ch; }
  .lede-2{ font-size:18px; color:var(--fog); max-width:60ch; margin-top:16px; }
  .band.paper .lede-2{ color:#4b4470; }

  .tax{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:end; }
  .flow-line{ font-family:var(--mono); font-size:15px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px; }
  .flow-line b{ color:var(--white); background:var(--ink-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 13px; font-weight:600; }
  .flow-line .arr{ color:var(--cyan); }

  .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
  .pillar{ border:1px solid var(--line); border-radius:16px; padding:26px 24px; background:linear-gradient(180deg,color-mix(in srgb,var(--ink-2) 60%,transparent),transparent); display:block; transition:border-color .18s,transform .18s; }
  a.pillar:hover{ border-color:var(--cyan); transform:translateY(-2px); }
  .pillar .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan); text-transform:uppercase; }
  .pillar h3{ font-size:22px; margin:14px 0 10px; letter-spacing:-.02em; }
  .pillar p{ margin:0; font-size:14.5px; color:var(--fog); }
  .pillar .more{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--cyan-soft); }
  .pillar.amber .k{ color:var(--amber); }

  .cmp{ margin-top:40px; border:1px solid var(--line-2); border-radius:16px; overflow:hidden; }
  .cmp .row{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; }
  .cmp .row + .row{ border-top:1px solid var(--line); }
  .cmp .cell{ padding:16px 20px; font-size:14.5px; }
  .cmp .head-row .cell{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fog-2); background:color-mix(in srgb,var(--ink-2) 50%,transparent); }
  .cmp .head-row .zx{ color:var(--cyan); }
  .cmp .lab{ color:var(--fog); font-weight:600; }
  .cmp .old{ color:var(--fog-2); }
  .cmp .zx{ color:var(--white); background:color-mix(in srgb,var(--iris) 10%,transparent); }

  .bundles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
  .bx{ border:1px solid var(--line-2); border-radius:16px; padding:26px 24px; background:var(--ink); display:flex; flex-direction:column; gap:16px; }
  .bx.feat{ border-color:color-mix(in srgb,var(--cyan) 55%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent),0 30px 70px -40px var(--cyan); }
  .bx .tier{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--white); display:flex; align-items:center; gap:10px; }
  .bx .flag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--cyan); padding:3px 8px; border-radius:999px; }
  .bx .for{ font-size:13.5px; color:var(--fog); margin-top:-6px; }
  .bx ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .bx li{ font-family:var(--mono); font-size:12.5px; color:var(--fog); display:flex; gap:10px; align-items:flex-start; }
  .bx li::before{ content:"+"; color:var(--cyan); font-weight:700; }
  .bx .foot{ margin-top:auto; }
  .bx .btn{ justify-content:center; }

  /* The demo — business framing + persona entry points */
  .demo-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; }
  .demo-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
  .demo-facts .f{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--fog); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; }
  .demo-facts .f b{ color:var(--cyan); font-weight:600; }
  .personas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
  .persona{ border:1px solid var(--line-2); border-radius:16px; padding:24px; background:linear-gradient(180deg,color-mix(in srgb,var(--ink-2) 55%,transparent),transparent); display:flex; flex-direction:column; gap:12px; }
  .persona .role{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
  .persona.candidate .role{ color:var(--ember); }
  .persona h3{ font-size:20px; letter-spacing:-.02em; }
  .persona p{ margin:0; font-size:14px; color:var(--fog); }
  .persona .goto{ margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--cyan-soft); display:inline-flex; align-items:center; gap:7px; }
  .persona.candidate .goto{ color:var(--ember); }
  .demo-note{ margin-top:26px; display:flex; gap:12px; align-items:flex-start; border:1px dashed var(--line-2); border-radius:12px; padding:14px 16px; font-size:14px; color:var(--fog); }
  .demo-note .badge{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent); border-radius:999px; padding:4px 9px; flex:none; }

  /* Demo registration funnel */
  .cta-band{ text-align:center; padding:96px 0; }
  .cta-band .eyebrow{ justify-content:center; }
  .cta-band h2{ margin-inline:auto; font-size:clamp(30px,4vw,50px); }
  .cta-band .lede-2{ margin-inline:auto; }
  .reg-form{ max-width:560px; margin:30px auto 0; display:flex; flex-direction:column; gap:14px; text-align:start; }
  .reg-form label.field{ display:flex; flex-direction:column; gap:7px; }
  .reg-form .flabel{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fog-2); }
  .reg-form .lf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .reg-form input,.reg-form select{ font-family:var(--body); font-size:15px; color:var(--white); background:color-mix(in srgb,var(--ink-2) 65%,transparent); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; outline:none; transition:border-color .18s; width:100%; }
  .reg-form input::placeholder{ color:var(--fog-2); }
  .reg-form input:focus,.reg-form select:focus{ border-color:var(--cyan); }
  .reg-form select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238fe0f2'%3E%3Cpath d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-inline-end:38px; }
  html[dir="rtl"] .reg-form select{ background-position:left 14px center; }
  .reg-form select option{ background:var(--ink-2); color:var(--white); }
  .reg-form .msg{ border-radius:10px; padding:11px 14px; font-size:14px; display:none; }
  .reg-form .msg.ok{ display:block; border:1px solid color-mix(in srgb,var(--green) 50%,transparent); color:var(--green); background:color-mix(in srgb,var(--green) 10%,transparent); }
  .reg-form .msg.err{ display:block; border:1px solid color-mix(in srgb,var(--amber) 55%,transparent); color:var(--amber); background:color-mix(in srgb,var(--amber) 10%,transparent); }
  .reg-form .submit-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
  .reg-form .fine{ font-family:var(--mono); font-size:11px; color:var(--fog-2); text-align:center; }
  @media (max-width:560px){ .reg-form .lf-row{ grid-template-columns:1fr; } }

  .foot{ border-top:1px solid var(--line); padding:40px 0; }
  .foot .wrap{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
  .foot .brand{ font-size:17px; }
  .foot .links{ display:flex; gap:22px; margin-inline-start:auto; flex-wrap:wrap; }
  .foot .links a{ font-size:13.5px; color:var(--fog); } .foot .links a:hover{ color:var(--white); }
  .foot .fine{ width:100%; font-family:var(--mono); font-size:11px; color:var(--fog-2); letter-spacing:.03em; }

  @media (max-width:900px){
    .hero .grid,.tax,.pillars,.bundles,.demo-head,.personas{ grid-template-columns:1fr; }
    .hero{ padding-top:40px; padding-bottom:60px; }
    .cmp .row{ grid-template-columns:1fr; } .cmp .head-row{ display:none; }
    .cmp .lab{ padding-top:16px; }
    .nav nav{ display:none; }
    .band{ padding:60px 0; }
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
    .conv .head .live{ animation:none; }
    .prompt-eyebrow .cmd{ animation:none; inline-size:24ch; border-inline-end-color:var(--cyan); }
  }

/* --- Added for the hub-and-spoke expansion: nav dropdown + /for/<vertical> + /trust page components --- */
.dropdown{ position:relative; }
.dropdown-menu{ position:absolute; top:100%; inset-inline-start:0; margin-top:14px; background:var(--ink-2); border:1px solid var(--line-2); border-radius:12px; padding:8px; min-width:230px; display:none; flex-direction:column; gap:2px; box-shadow:0 24px 60px -24px #000; z-index:60; }
.dropdown-menu a{ padding:9px 12px; border-radius:8px; font-size:14px; color:var(--fog); white-space:nowrap; transition:background .15s,color .15s; }
.dropdown-menu a:hover{ background:color-mix(in srgb,var(--cyan) 10%,transparent); color:var(--white); }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:flex; }

/* Sub-page hero (no interactive conversation widget — just the vertical's own framing) */
.crumb{ font-family:var(--mono); font-size:12.5px; color:var(--fog-2); display:flex; align-items:center; gap:8px; margin-bottom:26px; }
.crumb a{ color:var(--fog); } .crumb a:hover{ color:var(--cyan-soft); }
.vhero{ padding-top:56px; padding-bottom:16px; }
.vhero .who{ font-family:var(--mono); font-size:13px; color:var(--cyan-soft); margin-top:18px; max-width:56ch; }
.vhero h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.05; margin-top:16px; max-width:20ch; }
.vhero .lede{ margin-top:18px; font-size:clamp(16px,1.4vw,18px); color:var(--fog); max-width:62ch; }

/* Hero scenario — the vivid, specific story pulled from each vertical's own blueprint */
.story{ margin-top:16px; border-radius:18px; padding:28px 30px; background:linear-gradient(180deg,color-mix(in srgb,var(--ink-3) 92%,transparent),var(--ink-2)); border:1px solid var(--line-2); box-shadow:0 40px 90px -50px #000; }
.story .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.story p{ margin:14px 0 0; font-size:16.5px; color:var(--white); line-height:1.6; }
.story p b{ color:var(--cyan-soft); font-weight:700; }

/* Callout — compliance angle, guardrail, or platform-proof aside (reuses .demo-note's dashed treatment) */
.callout{ margin-top:22px; display:flex; gap:14px; align-items:flex-start; border:1px dashed var(--line-2); border-radius:12px; padding:16px 18px; font-size:14.5px; color:var(--fog); }
.callout .badge{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent); border-radius:999px; padding:4px 9px; flex:none; white-space:nowrap; }
.callout.amber .badge{ color:var(--amber); border-color:color-mix(in srgb,var(--amber) 45%,transparent); }
.callout p{ margin:0; }

/* Cross-link strip: the other four verticals, at the bottom of every /for/* page */
.industry-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.industry-strip a{ font-family:var(--mono); font-size:12.5px; color:var(--fog); border:1px solid var(--line-2); border-radius:999px; padding:8px 14px; transition:border-color .18s,color .18s; }
.industry-strip a:hover{ border-color:var(--cyan); color:var(--cyan-soft); }

@media (max-width:900px){
  .dropdown-menu{ position:static; display:flex; box-shadow:none; border:none; padding:4px 0 4px 14px; margin-top:6px; }
}

/* Vertical-page hero split: text + a stylized scene illustration */
.vhero .grid{ display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }
.vscene{ border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:linear-gradient(180deg,color-mix(in srgb,var(--ink-3) 90%,transparent),var(--ink-2)); box-shadow:0 30px 70px -40px #000; }
.vscene svg{ display:block; width:100%; height:auto; }
@media (max-width:900px){
  .vhero .grid{ grid-template-columns:1fr; }
  .vscene{ max-width:280px; }
}

/* Multiple simulation widgets on one page: a responsive grid, each cell full-width within its column */
.conv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:28px; align-items:start; }
.conv-grid .conv{ max-width:none; margin-top:0; }
.conv-grid .conv .msg-user{ font-size:13px; }
.conv-grid .conv .step{ font-size:11.5px; }