/* az.ai signed-in dashboard (package azai-v5, look rebuilt in azai-v14). Palette from docs/V4_DESIGN_AND_GRAPHICS.md + the approved 10-10 mockup. */
@font-face { font-family: Inter; src: url(/dp/az/fonts/inter-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #050b19; --navy: #0a1830; --panel: #0f2340; --panel2: #0c1c36; --line: #1d3a63; --line2: #284d80;
  --cyan: #23d8ff; --mint: #61f2dd; --blue: #3678ff; --violet: #9a56fc; --gold: #e7bd6d; --white: #f5faff;
  --text: #dce8f7; --muted: #93a8c4; --ok: #61f2dd; --warn: #e7bd6d; --bad: #ff7a90;
  --glow: 0 0 0 1px rgba(35, 216, 255, .35), 0 0 22px rgba(35, 216, 255, .18), inset 0 0 18px rgba(54, 120, 255, .08);
  --r: 14px; --side: 236px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
body.loading .main-col main { opacity: .35; }
a { color: var(--cyan); }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--white); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, #071226, #050b19); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.side-head { position: relative; padding: 0 8px 6px; }
.logo { display: inline-flex; align-items: baseline; text-decoration: none; font-weight: 800; letter-spacing: -.04em; font-size: 40px; line-height: 1; }
.logo .az { color: var(--white); }
.logo .dot { color: var(--cyan); }
.logo .ai { background: linear-gradient(90deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo.small { font-size: 28px; display: none; }
.tag { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.nav a svg { color: var(--cyan); }
.nav a:nth-child(3n+2) svg { color: var(--mint); }
.nav a:nth-child(3n) svg { color: var(--violet); }
.nav a:hover { background: rgba(54, 120, 255, .12); }
.nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(54, 120, 255, .45), rgba(54, 120, 255, .12)); box-shadow: inset 2px 0 0 var(--cyan); color: var(--white); font-weight: 600; }
.side-foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 8px; }
.side-close, .icon-btn.side-close { display: none; position: absolute; right: 0; top: 0; }
.scrim { display: none; }
.main-col { min-width: 0; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: rgba(5, 11, 25, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy); cursor: pointer; }
.menu-btn { display: none; }
.cmd { display: flex; align-items: center; gap: 8px; }
.top-cmd { flex: 1; max-width: 680px; margin: 0 auto; padding: 5px 6px 5px 18px; border-radius: 999px; border: 1px solid rgba(35, 216, 255, .55); background: var(--panel2); box-shadow: 0 0 18px rgba(35, 216, 255, .18); }
.top-cmd input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 8px 0; font-size: 15px; }
.top-cmd input::placeholder, textarea::placeholder { color: var(--muted); }
.go { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--mint), var(--cyan)); color: #04121f; cursor: pointer; }
.mic { border: 0; background: transparent; }
.top-right { display: flex; align-items: center; gap: 10px; }
.sel select { background: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.wallet-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--navy); border: 1px solid var(--line); color: var(--white); text-decoration: none; font-size: 14px; }
.wallet-pill svg { color: var(--gold); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--violet)); color: var(--white); font-weight: 700; text-decoration: none; }
.banner { margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(35, 216, 255, .35); background: rgba(35, 216, 255, .08); font-size: 14px; }
.banner.warn { border-color: rgba(231, 189, 109, .5); background: rgba(231, 189, 109, .1); }
main { padding: 20px; outline: none; transition: opacity .2s; }

/* ---------- cards ---------- */
.card { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--line); border-radius: var(--r); }
.card.glow { box-shadow: var(--glow); border-color: rgba(35, 216, 255, .45); }
.panel { padding: 16px; }
.panel h2, .panel-h h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; color: var(--white); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-h h2 svg, .panel h2 svg { color: var(--cyan); }
.fine { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.chip.live { color: var(--mint); border-color: rgba(97, 242, 221, .5); }
.chip.ask { color: var(--cyan); border-color: rgba(35, 216, 255, .5); }
.chip.access { color: var(--gold); border-color: rgba(231, 189, 109, .5); }
.chip.planned { color: var(--muted); }
.chip.demo { color: var(--gold); border-color: rgba(231, 189, 109, .5); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 600; font-size: 14px; background: linear-gradient(135deg, var(--blue), #5a4bff); color: var(--white); text-decoration: none; }
.btn.mint { background: linear-gradient(135deg, var(--mint), var(--cyan)); color: #04121f; }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn[disabled] { opacity: .55; cursor: progress; }
.link { background: none; border: 0; color: var(--cyan); cursor: pointer; padding: 4px; font-size: 14px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.hero h1 { margin: 6px 0 12px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.035em; color: var(--white); font-weight: 800; }
.hero h1 span { display: block; }
.hero h1 em { display: block; font-style: normal; background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 17px; color: var(--text); margin: 0 0 14px; max-width: 46ch; }
.verbs { display: flex; flex-wrap: wrap; gap: 8px; }
.verbs button, .quick button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(15, 35, 64, .8); cursor: pointer; font-size: 14px; }
.verbs button:hover, .quick button:hover { border-color: var(--cyan); }
.hero-art { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 220px; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero-checks { position: absolute; right: 10px; top: 10px; margin: 0; padding: 10px 12px; list-style: none; background: rgba(5, 11, 25, .82); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; display: grid; gap: 6px; }
.hero-checks li { display: flex; align-items: center; gap: 6px; }
.hero-checks svg { width: 14px; height: 14px; color: var(--mint); }
.hero-checks li.no svg { color: var(--muted); }
.team { padding: 14px; }
.team h2 { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 0 0 8px; color: var(--white); }
.team h2 svg { color: var(--mint); }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 9px; background: rgba(5, 11, 25, .5); font-size: 13px; }
.team-list li b { color: var(--white); font-weight: 600; }
.team-list li span.role { display: block; color: var(--muted); font-size: 12px; }

/* ---------- big command ---------- */
.cmd.big { margin: 18px 0; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 10px 14px; border-radius: 22px; }
.mic-big { grid-row: 1; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(35, 216, 255, .55); background: radial-gradient(circle at 30% 30%, #1d4c9a, #0b1b3a); display: grid; place-items: center; cursor: pointer; color: var(--white); }
.mic-big.on, .mic.on { color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 122, 144, .35); }
.cmd.big textarea { grid-column: 2; resize: vertical; min-height: 52px; max-height: 240px; border: 0; background: transparent; outline: none; font-size: 18px; padding: 12px 0; }
.go-big { grid-column: 3; align-self: center; padding: 12px 22px; border-radius: 999px; border: 0; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; background: linear-gradient(135deg, var(--mint), var(--cyan)); color: #04121f; cursor: pointer; }
.quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cmd.big:not(:has(.mic-big:not([hidden]))) textarea { grid-column: 1 / 3; }

/* ---------- quote ---------- */
.quote { padding: 16px; margin: -6px 0 18px; border-color: rgba(97, 242, 221, .5); }
.quote h2 { margin: 0 0 6px; font-size: 17px; color: var(--white); }
.quote .price { font-size: 28px; font-weight: 800; color: var(--white); }
.quote .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.quote .result { margin-top: 12px; }
.msg.err, .err { color: var(--bad); }
.msg.ok { color: var(--ok); }
.result { white-space: pre-wrap; background: rgba(5, 11, 25, .55); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.notice { font-size: 13px; color: var(--gold); margin: 10px 0 0; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, #10264a, #0b1b36); color: var(--text); text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--cyan); transform: translateY(-1px); }
.tile svg { width: 40px; height: 40px; stroke: url(#g-ai); stroke-width: 1.6; }
.tile b { color: var(--white); font-size: 16px; }
.tile span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.tile .chip { margin-top: 2px; }

/* ---------- lower rows ---------- */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: rgba(5, 11, 25, .55); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.stat span { display: block; font-size: 12px; color: var(--muted); }
.stat b { font-size: 22px; color: var(--white); }
.links-list, .prog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.links-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(5, 11, 25, .5); color: var(--text); text-decoration: none; font-size: 14px; }
.links-list a:hover { color: var(--white); outline: 1px solid var(--line2); }
.prog ul li { display: flex; gap: 8px; font-size: 13px; color: var(--text); }
.prog ul svg { width: 16px; height: 16px; color: var(--mint); margin-top: 2px; }
.prog .row-btns { margin-top: 12px; }
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jobs li a, .jobs li button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 9px; background: rgba(5, 11, 25, .5); border: 1px solid transparent; color: var(--text); text-decoration: none; text-align: left; cursor: pointer; font-size: 14px; }
.jobs li a:hover, .jobs li button:hover { border-color: var(--line2); }
.jobs .when { grid-column: 1; font-size: 12px; color: var(--muted); }
.jobs.big li button { padding: 12px 14px; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.st { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); grid-row: span 2; }
.st.delivered { color: var(--mint); border-color: rgba(97, 242, 221, .5); }
.st.running, .st.reserved { color: var(--cyan); border-color: rgba(35, 216, 255, .5); }
.st.failed { color: var(--bad); border-color: rgba(255, 122, 144, .5); }
.st.quoted { color: var(--gold); border-color: rgba(231, 189, 109, .5); }

/* ---------- area / detail / settings ---------- */
.view h1 { color: var(--white); font-size: 30px; letter-spacing: -.02em; margin: 4px 0 14px; }
.area-head { display: flex; gap: 16px; align-items: center; padding: 18px; }
.area-head h1 { margin: 0 0 4px; }
.area-head .lead { margin: 0; }
.area-ico { width: 54px; height: 54px; stroke: url(#g-ai); }
.area-items { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.area-items li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.area-items b { color: var(--white); }
.area-items p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); }
.area-items .row-btns { grid-column: 1 / -1; margin-top: 6px; }
.back { margin-bottom: 10px; }
.job-detail { padding: 18px; }
.job-detail h1 { font-size: 22px; }
.small-h { font-size: 15px; color: var(--white); margin: 18px 0 8px; }
.events { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.big-num { font-size: 40px; font-weight: 800; color: var(--white); margin: 0; }
.big-num.small { font-size: 26px; }
.settings { display: grid; gap: 16px; max-width: 640px; }
.settings label { display: grid; gap: 6px; font-size: 14px; }
.settings input[type=number] { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; max-width: 220px; }
.switch { grid-template-columns: auto 1fr !important; align-items: start; }
.switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cyan); }
.foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 18px 20px 28px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; background: var(--white); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100vw - 32px); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team { grid-column: 1 / -1; }
  .team-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; z-index: 40; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: 10px 0 30px rgba(0, 0, 0, .5); }
  body.side-open .side { transform: none; }
  body.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  .icon-btn.side-close, .menu-btn { display: inline-grid; }
  .logo.small { display: inline-flex; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .top { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .top-cmd { order: 3; flex-basis: 100%; max-width: none; }
  .top-right { margin-left: auto; }
  .sel select { padding: 7px 6px; }
  main { padding: 14px 12px; }
  .banner { margin: 10px 12px 0; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .team-list { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 8px; }
  .tile svg { width: 34px; height: 34px; }
  .row4, .area-items { grid-template-columns: minmax(0, 1fr); }
  .cmd.big { grid-template-columns: auto 1fr; }
  .go-big { grid-column: 1 / -1; justify-content: center; }
  .cmd.big textarea { font-size: 16px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat b { font-size: 18px; }
}
@media (max-width: 420px) {
  .logo.small { display: none; }
  .wallet-pill { padding: 7px 10px; }
  .hero h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.key-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.key-form input { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; width: 100%; }
.key-form .row-btns { margin: 0; grid-column: 1 / -1; }
.krow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(5, 11, 25, .5); font-size: 13px; overflow-wrap: anywhere; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mint); overflow-wrap: anywhere; }
code.key { display: block; margin-top: 6px; padding: 8px; background: rgba(5, 11, 25, .7); border-radius: 8px; user-select: all; }
#keys-panel { margin-top: 14px; max-width: 760px; }
@media (max-width: 720px) { .key-form { grid-template-columns: minmax(0, 1fr); } }.aff-body { display: grid; gap: 14px; max-width: 820px; }
.aff-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-ask { margin: 8px 0 4px; gap: 8px; }
.ag-ask input { flex: 1; min-width: 0; background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; }
#job-actions { margin-top: 12px; }
.aff-body label { display: grid; gap: 6px; font-size: 14px; }
.aff-body label input { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; max-width: 220px; }
.handoff { margin: -6px 0 18px; border-color: rgba(97, 242, 221, .5); }
.handoff h2 { margin: 0 0 6px; color: var(--white); font-size: 17px; }
#df-biz { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; width: 100%; }
.df-why { font-size: 12px; }
.so-compose textarea { width: 100%; background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 12px; resize: vertical; }
.so-picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.so-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; }
.so-compose label input[type=datetime-local], .key-form select { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; color-scheme: dark; }
.so-preview { display: grid; gap: 6px; margin-top: 10px; }
#seo-url { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; width: 100%; }
.seo-site ul.fine { margin: 0; padding-left: 18px; }
.krow-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
#wh-url { background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; width: 100%; }
.tk-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-msg.tk-customer { border-color: var(--line2); }
.tk-msg.tk-suggested { border-color: rgba(97, 242, 221, .45); }
.tk-msg.tk-staff { border-color: rgba(35, 216, 255, .6); }
#support-body textarea, #ticket-body textarea, #tk-subject { width: 100%; background: var(--navy); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; }


/* ================= azai-v14: the approved reference (approved-dashboard-reference.png), measured at 1024 px =================
   Desktop is laid out at the reference's own density (1024 px wide) and scaled up with zoom on wider screens, so 1280 looks
   the same, just bigger. Phones/tablets (< 1000 px) get their own layout with 44 px touch targets. */
:root { --side: 154px; }
body { background: radial-gradient(900px 420px at 62% 8%, rgba(46, 96, 255, .20), transparent 65%), radial-gradient(700px 500px at 100% 55%, rgba(110, 70, 255, .10), transparent 60%), linear-gradient(180deg, #060c20, #050a1a 60%, #060b1d); }
svg.ci, svg.ti, .logos svg, .svc svg, .soc-list svg, .cf-list svg, .hico, .cf-logo { fill: none; stroke: none; }
.sr { position: absolute !important; }
.demo-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(231, 189, 109, .55); color: var(--gold); font-size: 10.5px; white-space: nowrap; }
.demo-pill b { font-weight: 600; }

@media (min-width: 1000px) {
  .shell { grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
  .side { position: relative; top: auto; height: auto; overflow: visible; align-self: start; padding: 4px 0 10px; gap: 4px; background: linear-gradient(180deg, rgba(12, 22, 50, .92), rgba(8, 15, 36, .92)); border-right: 1px solid rgba(40, 70, 140, .35); border-bottom-right-radius: 8px; }
  .side-head { padding: 6px 10px 6px 24px; }
  .logo { font-size: 54px; letter-spacing: -.045em; line-height: .92; }
  .logo .dot, .logo .ai { background: linear-gradient(180deg, #45e6f2, #2cd3e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .tag { margin: 5px 0 0; font-size: 10.6px; color: #e8eef9; white-space: nowrap; letter-spacing: -.01em; }
  .nav { gap: 0; padding-top: 4px; }
  .nav a { height: 33.6px; min-height: 0; padding: 0 8px 0 18px; margin: 0 4px; gap: 13px; font-size: 11.4px; color: #dfe7f7; border-radius: 7px; border: 1px solid transparent; }
  .nav a svg.ci { width: 21px; height: 21px; filter: none; }
  .nav a[aria-current="page"] { background: linear-gradient(90deg, #2149c9, #183a9c); border-color: rgba(110, 150, 255, .55); box-shadow: 0 0 14px rgba(40, 90, 255, .35); font-weight: 700; color: #fff; }
  .nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-foot { display: none; }
  .side { transform: none; width: auto; box-shadow: none; z-index: auto; left: auto; }
  .menu-btn, .icon-btn.side-close, .logo.small { display: none !important; }
  .scrim { display: none !important; }
  .team { grid-column: auto; }
  .home .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .top { position: relative; top: auto; z-index: 5; height: 70px; padding: 0 8px 0 58px; gap: 10px; background: transparent; backdrop-filter: none; border-bottom: 0; }
  .top-cmd { flex: 0 0 590px; max-width: 590px; margin: 0; height: 40px; padding: 0 4px 0 20px; border-radius: 22px; border: 2px solid #3d8bff; background: linear-gradient(90deg, #0a1636, #0c1a3e); box-shadow: 0 0 12px rgba(50, 140, 255, .55), inset 0 0 10px rgba(50, 120, 255, .25); }
  .top-cmd input { font-size: 14.2px; padding: 0; color: #fff; }
  .top-cmd input::placeholder { color: #c9d4ee; }
  .top-cmd .icon-btn.mic { width: 36px; height: 34px; border: 0; background: transparent; color: #dfe8ff; }
  .top-cmd .icon-btn.mic svg { width: 19px; height: 19px; }
  .top-cmd .go { width: 31px; height: 31px; margin-left: 4px; background: #3be3ef; color: #06303a; box-shadow: 0 0 10px rgba(60, 230, 240, .55); }
  .top-cmd .go svg { width: 17px; height: 17px; stroke-width: 2.4; }
  .top-right { margin-left: auto; gap: 9px; }
  .selgroup { display: flex; align-items: center; height: 30px; border: 1px solid rgba(70, 100, 170, .6); border-radius: 8px; background: rgba(12, 22, 48, .85); }
  .selbtn, .selgroup select { height: 28px; min-height: 0; border: 0; background: transparent; color: #fff; font-size: 10.6px; padding: 0 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .selbtn svg { width: 12px; height: 12px; }
  .selgroup .sel + .sel select, .selgroup .selbtn + .sel select { border-left: 1px solid rgba(70, 100, 170, .5); border-radius: 0; }
  .selgroup select { appearance: none; -webkit-appearance: none; padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 6px center / 11px; }
  .icon-btn.bell { width: 28px; height: 28px; border: 0; background: transparent; color: #fff; }
  .icon-btn.bell svg { width: 20px; height: 20px; }
  .avatar { width: 30px; height: 30px; font-size: 13px; border: 2px solid rgba(255, 255, 255, .7); }
  .banner { margin: 6px 8px 0; }
  main { padding: 2px 8px 24px 2px; }

  /* hero */
  .home > * + * { margin-top: 0; }
  .hero-row { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 6px; align-items: start; }
  .hero { position: relative; display: block; height: 256px; min-height: 0; padding: 14px 0 0 10px; border: 0; border-radius: 0; background: transparent; overflow: visible; isolation: isolate; }
  .hero-bg { position: absolute; inset: -12px 0 0 0; z-index: -1; overflow: hidden; }
  .hero-bg img { position: absolute; right: 0; top: 0; width: 80%; height: 100%; object-fit: cover; object-position: 58% 38%; filter: saturate(1.15) brightness(1.08); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 92%, transparent); }
  .hero-copy { max-width: 470px; }
  .hero h1 { font-size: 49px; line-height: 1.0; letter-spacing: -.025em; margin: 0 0 15px; font-weight: 800; text-shadow: none; }
  .hero h1 em { background: linear-gradient(90deg, #6aa9ff 0%, #4fc6ff 35%, #45e2f0 70%, #52f2d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(60, 200, 255, .35)); }
  .hero .lead { font-size: 15px; line-height: 1.38; max-width: 440px; margin: 0; color: #eef3ff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
  .hero .lead b { font-weight: 700; color: #fff; }
  .verbs { margin-top: 14px; gap: 6px; flex-wrap: nowrap; }
  .verbs button { height: 30px; min-height: 0; padding: 0 10px; gap: 6px; font-size: 11.4px; border-radius: 6px; border: 1px solid rgba(70, 90, 160, .65); background: rgba(14, 22, 50, .9); color: #fff; white-space: nowrap; }
  .verbs button svg { width: 15px; height: 15px; stroke-width: 2.2; }
  .verbs .v1 { color: #c06bff; fill: #c06bff; } .verbs .v2 { color: #59a6ff; } .verbs .v3 { color: #c06bff; } .verbs .v4 { color: #6fe36f; } .verbs .v5 { color: #f0c46a; } .verbs .v6 { color: #6aa8ff; fill: #6aa8ff; }
  .hero-checks { position: absolute; top: 2px; right: 6px; left: auto; width: 150px; max-width: none; padding: 7px 8px 7px 9px; gap: 9px; margin: 0; border-radius: 8px; border: 1px solid rgba(110, 140, 220, .35); background: rgba(14, 22, 48, .72); backdrop-filter: blur(4px); font-size: 8.8px; color: #e6edfb; display: grid; }
  .hero-checks li { gap: 6px; line-height: 1.2; }
  .hero-checks svg { width: 11px; height: 11px; color: #3fe0d2; stroke-width: 2.6; }
  .hero-checks li.no svg { color: #93a8c4; }

  /* AI team */
  .team { height: 256px; padding: 7px 8px 6px; border-radius: 10px; border: 1px solid rgba(70, 120, 230, .5); background: linear-gradient(180deg, rgba(16, 28, 62, .95), rgba(10, 18, 44, .95)); box-shadow: 0 0 14px rgba(40, 100, 255, .18); display: flex; flex-direction: column; }
  .team h2 { font-size: 12px; margin: 0 0 4px; gap: 6px; font-weight: 600; }
  .team h2 svg { width: 13px; height: 13px; color: #2fd6f0; }
  .team-list { display: block; flex: 1; border-top: 1px solid rgba(60, 90, 160, .35); }
  .team-list li { display: grid; grid-template-columns: 20px 96px minmax(0, 1fr) 6px; align-items: center; gap: 6px; height: 25.5px; min-height: 0; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(60, 90, 160, .25); border-radius: 0; background: transparent; }
  .team-list li .mono { width: 19px; height: 19px; font-size: 9.5px; border-radius: 4px; }
  .team-list li b { font-size: 10.3px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .team-list li .role { font-size: 9.4px; color: #b9c6df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .team .fine { margin: 0; padding-top: 5px; font-size: 9.4px; color: #b9c6df; }
  .sdot { width: 6px; height: 6px; border-radius: 50%; background: #5d6f8f; }
  .sdot.s-on { background: #3fe0a0; box-shadow: 0 0 5px #3fe0a0; } .sdot.s-demo { background: #e7bd6d; } .sdot.s-off { background: #4a5a78; }

  /* command box */
  .cmd.big { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 12px; margin: 2px 6px 0 8px; padding: 10px 22px 9px 10px; height: auto; border-radius: 30px; border: 2px solid #34c8ff; background: linear-gradient(180deg, rgba(14, 24, 58, .95), rgba(10, 18, 44, .95)); box-shadow: 0 0 16px rgba(40, 190, 255, .55), inset 0 0 18px rgba(40, 120, 255, .15); }
  .mic-big { grid-row: 1 / span 2; align-self: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(80, 120, 255, .7); background: radial-gradient(circle at 40% 35%, #23358f, #121d55 70%); box-shadow: 0 0 12px rgba(60, 100, 255, .45); color: #fff; }
  .mic-big svg { width: 24px; height: 24px; }
  .cmd.big .field { grid-column: 2; display: flex; align-items: center; height: 40px; padding: 0 3px 0 16px; border-radius: 20px; background: linear-gradient(90deg, rgba(58, 64, 140, .75), rgba(40, 52, 110, .6) 75%, rgba(30, 60, 90, .55)); }
  .cmd.big textarea { flex: 1; grid-column: auto; min-height: 0; height: 24px; max-height: 120px; padding: 2px 0 0; font-size: 14.6px; line-height: 1.3; resize: none; color: #fff; }
  .cmd.big textarea::placeholder { color: #dfe4f7; }
  .big-tools { display: flex; align-items: center; gap: 6px; }
  .m-only { display: none !important; }
  .go-big { height: 37px; min-height: 0; padding: 0 14px 0 18px; border-radius: 19px; font-size: 14px; font-weight: 600; gap: 8px; background: linear-gradient(180deg, #5df2ea, #33dbe2); color: #06303a; box-shadow: 0 0 12px rgba(80, 240, 230, .45); margin-right: -40px; }
  .go-big svg { width: 16px; height: 16px; stroke-width: 2.6; }
  .cmd.big .quick { grid-column: 2; display: flex; gap: 8px; flex-wrap: nowrap; }
  .quick button { height: 25px; min-height: 0; padding: 0 10px; gap: 7px; font-size: 10.4px; border-radius: 6px; border: 1px solid rgba(60, 80, 150, .8); background: rgba(12, 20, 46, .95); color: #fff; white-space: nowrap; }
  .quick button svg { width: 13px; height: 13px; color: #fff; }
  .quick button .qb { color: #6aa8ff; }
  .quick button:nth-child(5) { padding-right: 26px; } .quick button:nth-child(6) { padding-right: 16px; }

  /* 15 tiles */
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 6px 0 4px; }
  .tile { height: 109px; min-height: 0; padding: 9px 6px 6px; gap: 2px; justify-content: flex-start; border-radius: 8px; border: 1px solid rgba(50, 70, 130, .75); background: linear-gradient(180deg, rgba(16, 24, 54, .96), rgba(12, 19, 44, .96)); box-shadow: inset 0 0 18px rgba(40, 70, 160, .12); }
  .tile:hover, .tile:focus-visible { border-color: #3d8bff; box-shadow: 0 0 12px rgba(60, 140, 255, .35); transform: none; }
  .tile svg.ti { width: 41px; height: 41px; margin-bottom: 3px; filter: drop-shadow(0 0 6px rgba(60, 180, 255, .45)); }
  .tile .logos { display: flex; gap: 3px; height: 41px; align-items: center; margin-bottom: 3px; }
  .tile .logos svg { width: 17px; height: 17px; }
  .tile .logos .lg-tiktok, .tile .logos .lg-x { background: #111; border-radius: 4px; padding: 2px; }
  .tile b { font-size: 13.4px; font-weight: 600; margin: 0; letter-spacing: -.005em; }
  .tile .sub { font-size: 10.4px; line-height: 1.3; color: #d0d9ec; opacity: 1; max-width: 150px; }

  /* lower panels run full width under the (shorter) sidebar, like the reference */
  .home .low { margin: 24px 0 0 calc(8px - var(--side)); }
  .show { display: grid; gap: 8px; margin-top: 8px; }
  .show:first-child { margin-top: 0; }
  .show3 { grid-template-columns: 360fr 306fr 324fr; }
  .show4 { grid-template-columns: 262fr 282fr 222fr 206fr; }
  .show-net { grid-template-columns: 652fr 322fr; }
  .sc { padding: 0; gap: 0; border-radius: 8px; border: 1px solid rgba(60, 100, 200, .5); background: linear-gradient(180deg, rgba(14, 24, 56, .96), rgba(10, 17, 40, .96)); box-shadow: 0 0 10px rgba(40, 90, 220, .12); overflow: hidden; display: flex; flex-direction: column; }
  .sc-h { position: relative; height: 31px; padding: 0 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(36, 60, 130, .45), rgba(20, 34, 80, .2)); border-bottom: 1px solid rgba(60, 100, 200, .3); }
  .sc-h h2 { margin: 0; font-size: 12.6px; font-weight: 600; color: #fff; gap: 6px; text-align: center; white-space: nowrap; }
  .sc-h h2 small { font-size: 9px; color: #a9b8d6; font-weight: 400; }
  .sc-h .hico { position: absolute; left: 9px; top: 7px; width: 17px; height: 17px; }
  .ex { position: absolute; right: 5px; top: 4px; transform: none; padding: 0 4px; height: 12px; line-height: 11px; font-size: 7.5px; font-weight: 600; letter-spacing: .02em; border-radius: 3px; border: 1px solid rgba(231, 189, 109, .45); background: transparent; color: rgba(231, 189, 109, .85); }
  .ex.st-live { color: #61f2dd; border-color: rgba(97, 242, 221, .45); } .ex.st-planned { color: #93a8c4; border-color: rgba(147, 168, 196, .45); } .ex.st-ask { color: #23d8ff; border-color: rgba(35, 216, 255, .45); }
  .sc-b { flex: 1; padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 7px; }
  .btn { min-height: 0; height: 30px; padding: 0 14px; font-size: 11.5px; border-radius: 6px; gap: 8px; }
  .btn svg { width: 14px; height: 14px; }
  .btn.blue { background: linear-gradient(180deg, #2a55e0, #1b3cb8); border: 1px solid #5d86ff; color: #fff; box-shadow: 0 0 10px rgba(50, 100, 255, .35); }
  .btn.blue2 { background: #1f3b8c; border: 1px solid #4a6fe0; color: #fff; }
  .btn.mint { background: linear-gradient(180deg, #6ef5ec, #3fdde4); color: #04222a; border: 0; box-shadow: 0 0 10px rgba(80, 240, 230, .4); }
  .btn.ghost { background: rgba(12, 20, 46, .9); border: 1px solid rgba(70, 95, 170, .8); color: #fff; }
  .btn.sm { height: 22px; padding: 0 6px; font-size: 9.4px; border-radius: 5px; width: 64px; justify-content: center; }
  .row-btns { margin-top: auto; gap: 8px; }
  .row-btns.two { display: grid; grid-template-columns: 1fr 1fr; }
  .row-btns.end { justify-content: flex-end; }
  /* website */
  .ba { display: grid; grid-template-columns: 1fr 14px 1fr; gap: 3px; align-items: center; }
  .ba figure { position: relative; margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid rgba(90, 120, 200, .5); }
  .ba img { display: block; width: 100%; height: 108px; object-fit: cover; }
  .ba-l { left: 4px; top: 3px; font-size: 9.5px; padding: 1px 9px; border-radius: 6px; background: rgba(8, 14, 34, .9); border: 1px solid rgba(110, 140, 220, .6); color: #fff; }
  .ba-l.after { right: 4px; left: auto; background: rgba(8, 14, 34, .9); color: #fff; }
  .ba-arrow { width: 14px; height: 14px; color: #6aa8ff; stroke-width: 2.6; }
  .sc-line { gap: 7px; font-size: 9.6px; color: #e6edfb; }
  .sc-line .globe { width: 20px; height: 20px; }
  .fake-url { flex: 0 0 auto; width: 112px; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(70, 95, 170, .8); background: rgba(10, 18, 42, .9); color: #a9b8d6; font-size: 8.8px; }
  /* social */
  .sc-b.soc { flex-direction: row; gap: 6px; }
  .soc-week { flex: 1.3; padding: 6px; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(10, 18, 42, .85); font-size: 9.5px; }
  .soc-week b { display: block; margin: 0 0 5px; font-size: 9.6px; font-weight: 600; }
  .soc-in { display: grid; grid-template-columns: 98px 1fr; gap: 6px; }
  .soc-in img { width: 98px; height: 132px; object-fit: cover; border-radius: 4px; }
  .soc-list { display: grid; gap: 3px; font-size: 9px; color: #c9d4ea; }
  .soc-list li { display: flex; gap: 7px; align-items: center; }
  .soc-list svg { width: 18px; height: 18px; }
  .soc-list svg.dk { background: #0a0a0a; border-radius: 4px; padding: 2px; }
  .soc-side { flex: .85; display: flex; flex-direction: column; gap: 6px; }
  .soc-sched { flex: 1; padding: 6px; gap: 5px; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(10, 18, 42, .85); display: grid; align-content: start; }
  .soc-sched li { height: 15px; border-radius: 4px; background: rgba(30, 48, 100, .55); display: flex; align-items: center; padding: 0 4px; font-size: 9.4px; }
  .soc-sched li.sh { background: transparent; padding: 0; gap: 5px; }
  .soc-sched li.thumbs { height: 17px; padding: 0; overflow: hidden; background: none; }
  .soc-sched li.thumbs img { width: 100%; height: 17px; object-fit: cover; object-position: 50% 30%; border-radius: 3px; }
  .soc-sched svg { width: 11px; height: 11px; color: #4fe36a; }
  .soc-side .btn { height: 26px; font-size: 9.6px; padding: 0 8px; }
  /* business */
  .range { position: absolute; right: 38px; top: 5px; }
  .range select { height: 20px; padding: 0 18px 0 8px; font-size: 9px; border-radius: 5px; border: 1px solid rgba(80, 110, 190, .7); background: rgba(10, 18, 42, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 4px center / 10px; appearance: none; -webkit-appearance: none; color: #fff; min-height: 0; }
  .kpis { gap: 5px; }
  .kpi { padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(14, 26, 56, .8); }
  .kpi span { display: flex; align-items: center; gap: 4px; font-size: 8.3px; color: #d6e0f2; }
  .kpi span svg { width: 9px; height: 9px; color: #3fe0d2; }
  .kpi b { font-size: 15.5px; font-weight: 700; margin: 1px 0; }
  .kpi i { font-size: 9.6px; font-weight: 600; color: #3fe0a0; }
  .spark { height: 58px; margin: -2px 0; }
  .mini-nav { gap: 5px; }
  .mini-nav button { min-height: 0; height: 37px; padding: 3px 1px; gap: 1px; font-size: 7.6px; border-radius: 5px; color: #fff; }
  .mini-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
  .mn1 { background: #4a2219; border-color: #8a4632 !important; } .mn2 { background: #18306f; border-color: #3a5fc0 !important; } .mn3 { background: #14432f; border-color: #2c8a5a !important; } .mn4 { background: #43381a; border-color: #8a7330 !important; } .mn5 { background: #18306f; border-color: #3a5fc0 !important; }
  /* email */
  .tabs { gap: 3px; }
  .tabs a { flex: 1; height: 20px; display: grid; place-items: center; font-size: 8.6px; border-radius: 5px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(10, 18, 42, .85); color: #dfe7f7; text-decoration: none; }
  .tabs a.on { background: #1d2f66; border-color: #4a6fe0; }
  .msgs { gap: 0; }
  .msgs li { grid-template-columns: 17px minmax(0, 1fr) auto auto; gap: 7px; height: 26.5px; padding: 0 2px; border-radius: 0; background: transparent; border-bottom: 1px solid rgba(60, 90, 160, .22); font-size: 9.4px; }
  .msgs .ago { font-size: 7.8px; color: #93a8c4; }
  .mi { width: 16px; height: 16px; display: grid; place-items: center; }
  .mi svg { width: 9px; height: 9px; color: #fff; }
  /* create */
  .sc-b.create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .create button { gap: 0; padding: 0; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .6); background: rgba(14, 24, 54, .9); font-size: 10.2px; font-weight: 600; }
  .create img { height: 62px; aspect-ratio: auto; object-fit: cover; }
  .create span { padding: 5px 0 6px; }
  /* finances */
  .svc { gap: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc button { height: 34px; min-height: 0; padding: 2px; display: grid; place-items: center; align-content: center; border-radius: 7px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(14, 24, 54, .95); }
  .svc button svg { width: 20px; height: 20px; }
  .svc button small { font-size: 6.5px; color: #fff; }
  .svc button.stripe { background: #5b4cff; } .svc button.stripe svg { filter: brightness(0) invert(1); }
  .rows { gap: 0; }
  .rows button { height: 21.5px; min-height: 0; padding: 0 2px; gap: 7px; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(60, 90, 160, .22); font-size: 9.4px; color: #eef3ff; }
  .rows button > svg:first-child { width: 13px; height: 13px; flex: none; }
  .rows .r1 { color: #dfe7f7; } .rows .r2 { color: #f0d36a; } .rows .r3 { color: #3fe0d2; } .rows .r4 { color: #59a6ff; } .rows .r5 { color: #59a6ff; }
  .rows span { flex: 1; }
  .rows em { font-size: 8.4px; color: #b9c6df; }
  .rows em.ok { color: #3fe0a0; }
  .rows .chev { width: 10px; height: 10px; color: #b9c6df; }
  /* bookings */
  .bk { gap: 5px; }
  .bk button { min-height: 0; height: 38px; padding: 3px 1px; gap: 1px; font-size: 7.4px; border-radius: 6px; border: 1px solid #4f7bff; background: linear-gradient(180deg, #2f5df0, #1f40bf); }
  .bk svg { width: 14px; height: 14px; }
  .steps { gap: 4px; font-size: 9.4px; }
  .steps svg { width: 13px; height: 13px; color: #c9d4ea; }
  /* engines + cloudflare */
  .engines { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 6px 8px 8px; }
  .engines li { position: relative; padding: 6px 2px 5px; gap: 1px; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(14, 24, 54, .9); }
  .engines .mono { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; margin-bottom: 2px; }
  .engines b { font-size: 10.4px; font-weight: 600; }
  .engines .sub { font-size: 9.2px; color: #c9d4ea; }
  .engines .role { font-size: 8.2px; color: #c9d4ea; margin-top: 1px; }
  .engines .sdot { position: absolute; top: 5px; right: 5px; }
  .cf .sc-h { background: transparent; border-bottom: 0; height: 32px; }
  .cf-logo { width: 34px; height: 34px; margin-right: 6px; }
  .cf-h h2 { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; }
  .cf-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 2px 8px 8px; }
  .cf-list li { padding: 0; border: 0; background: none; }
  .cf-list button { width: 100%; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 6px; border: 1px solid rgba(60, 90, 170, .55); background: rgba(14, 24, 54, .9); color: #fff; cursor: pointer; padding: 0 1px; }
  .cf-list svg { width: 18px; height: 18px; fill: none; }
  .cf-list .cf-r2 { stroke: #ff5aa0; } .cf-list .cf-d1 { stroke: #3d9bff; } .cf-list .cf-wr { stroke: #4fb8ff; } .cf-list .cf-br { stroke: #3fd0f0; }
  .cf-list b { font-size: 9px; font-weight: 600; } .cf-list span { font-size: 7.6px; color: #b9c6df; }
  /* bottom 4 */
  .row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
  .prog.sc { min-height: 158px; }
  .prog .sc-h { justify-content: center; }
  .prog .sc-h h2 { font-size: 11.8px; }
  .prog .sc-h h2 svg.ci { position: absolute; left: 10px; width: 18px; height: 18px; }
  .prog ul { padding: 6px 12px 0 14px; gap: 3px; }
  .prog ul li { font-size: 9.6px; gap: 9px; color: #e6edfb; }
  .prog ul svg { width: 12px; height: 12px; color: #e6edfb; margin-top: 0; }
  .prog .row-btns { justify-content: flex-end; padding: 4px 10px 8px; margin-top: auto; }
  .prog .btn { min-width: 0; height: 24px; font-size: 9.8px; padding: 0 16px; border-radius: 6px; background: linear-gradient(180deg, #2a55e0, #1b3cb8); border: 1px solid #5d86ff; }
  .home .row3 { margin-top: 12px; }
}

/* zoom the 1024-px design on bigger screens so it keeps the reference's proportions */
@media (min-width: 1200px) { .shell { zoom: 1.2; } }
@media (min-width: 1440px) { .shell { zoom: 1.38; } }
@media (min-width: 1700px) { .shell { zoom: 1.6; } }

/* ---------- tablets and phones (< 1000 px): own layout, 44 px touch targets ---------- */
@media (max-width: 999px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; z-index: 40; height: 100vh; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: 10px 0 30px rgba(0, 0, 0, .5); }
  body.side-open .side { transform: none; }
  body.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  .icon-btn.side-close, .menu-btn { display: inline-grid; }
  .logo.small { display: inline-flex; font-size: 28px; }
  .logo .dot, .logo .ai { background: linear-gradient(180deg, #45e6f2, #2cd3e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .nav a svg.ci { width: 22px; height: 22px; }
  .top { position: sticky; top: 0; flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  .top-cmd { display: none; }
  .top-right { margin-left: auto; gap: 6px; }
  .selgroup { display: flex; border: 1px solid var(--line2); border-radius: 12px; background: var(--navy); }
  .selbtn { display: none; }
  .selgroup select { min-height: 44px; border: 0; background: transparent; color: #fff; padding: 0 6px; font-size: 14px; }
  .demo-pill { height: 30px; }
  .icon-btn.bell { display: none; }
  .avatar { width: 44px; height: 44px; }
  main { padding: 12px; }
  .home { display: flex; flex-direction: column; gap: 12px; }
  .cmd.big { order: -1; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 22px; border: 1.5px solid rgba(35, 216, 255, .7); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: 0 0 22px rgba(35, 216, 255, .25); }
  .mic-big { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(35, 216, 255, .55); background: radial-gradient(circle at 30% 30%, #1d4c9a, #0b1b3a); color: #fff; }
  .cmd.big .field { display: contents; }
  .cmd.big textarea { grid-column: 2; font-size: 16px; min-height: 50px; padding: 12px 0; resize: vertical; }
  .big-tools { grid-column: 1 / -1; display: flex; gap: 8px; }
  .icon-btn.attach { width: 48px; height: 48px; border-radius: 50%; border-color: rgba(35, 216, 255, .45); color: var(--cyan); }
  .go-big { flex: 1; justify-content: center; min-height: 48px; border-radius: 999px; }
  .quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
  .quick button, .verbs button { flex: 1 1 calc(33% - 8px); justify-content: center; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 6px; font-size: 13px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(10, 24, 48, .85); color: #fff; white-space: nowrap; }
  .quick button svg, .verbs button svg { width: 16px; height: 16px; }
  .hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero { position: relative; overflow: hidden; border-radius: 16px; padding: 20px 16px 16px; border: 1px solid rgba(35, 216, 255, .18); background: #040a18; isolation: isolate; }
  .hero-bg { position: absolute; inset: 0; z-index: -1; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
  .hero h1 { font-size: 40px; line-height: 1.02; margin: 0 0 12px; }
  .hero h1 em { background: linear-gradient(90deg, #6aa9ff, #45e2f0 60%, #52f2d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .lead { font-size: 16px; margin: 0; }
  .verbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .hero-checks { position: static; margin: 14px 0 0; padding: 10px 12px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 11, 25, .7); }
  .hero-checks li { display: flex; gap: 6px; align-items: center; }
  .hero-checks svg { width: 14px; height: 14px; color: var(--mint); }
  .team { padding: 12px; border-radius: 14px; border: 1px solid rgba(35, 216, 255, .45); background: linear-gradient(180deg, var(--panel), var(--panel2)); }
  .team h2 { display: flex; gap: 8px; align-items: center; font-size: 16px; margin: 0 0 8px; }
  .team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .team-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 8px; gap: 8px; align-items: center; min-height: 36px; padding: 4px 8px; border-radius: 9px; background: rgba(5, 11, 25, .5); font-size: 13px; }
  .team-list li .mono { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
  .team-list li .role { font-size: 12px; color: var(--muted); text-align: right; }
  .sdot { width: 8px; height: 8px; border-radius: 50%; background: #5d6f8f; } .sdot.s-on { background: #3fe0a0; } .sdot.s-demo { background: #e7bd6d; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 0; padding: 14px 8px 12px; }
  .tile svg.ti { width: 46px; height: 46px; stroke: none; fill: none; }
  .tile .logos { display: flex; gap: 4px; height: 46px; align-items: center; }
  .tile .logos svg { width: 18px; height: 18px; }
  .tile .logos .lg-tiktok, .tile .logos .lg-x { background: #111; border-radius: 4px; padding: 2px; }
  .tile b { font-size: 15px; }
  .tile .sub { font-size: 12.5px; color: var(--text); }
  .low { display: flex; flex-direction: column; gap: 12px; }
  .show { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) !important; }
  .sc { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-color: rgba(40, 77, 128, .9); }
  .sc-h { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 70px 0 14px; border-bottom: 1px solid var(--line); }
  .sc-h h2 { margin: 0; font-size: 15px; color: #fff; display: flex; gap: 6px; align-items: center; }
  .sc-h .hico { width: 20px; height: 20px; }
  .ex { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(231, 189, 109, .5); color: var(--gold); }
  .ex.st-live { color: var(--mint); border-color: rgba(97, 242, 221, .5); } .ex.st-planned { color: var(--muted); }
  .range { position: absolute; right: 74px; } .range select { min-height: 32px; background: var(--navy); border: 1px solid var(--line2); border-radius: 8px; color: #fff; }
  .sc-b { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  .btn { min-height: 44px; }
  .btn.blue { background: linear-gradient(180deg, #2a55e0, #1b3cb8); border: 1px solid #5d86ff; color: #fff; }
  .btn.blue2 { background: #1f3b8c; color: #fff; }
  .btn.sm { min-height: 40px; font-size: 12.5px; padding: 0 10px; }
  .row-btns.two { display: grid; grid-template-columns: 1fr 1fr; }
  .row-btns.end { justify-content: flex-end; }
  .ba { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 4px; align-items: center; }
  .ba figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; }
  .ba img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .ba-l { position: absolute; left: 4px; top: 4px; font-size: 10px; padding: 1px 6px; border-radius: 5px; background: rgba(5, 11, 25, .85); }
  .ba-l.after { left: auto; right: 4px; }
  .ba-arrow { width: 16px; height: 16px; color: var(--cyan); }
  .sc-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 13px; }
  .sc-line .globe { width: 22px; height: 22px; }
  .fake-url { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-size: 12px; }
  .sc-b.soc { flex-direction: column; }
  .soc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .soc-in img { width: 100%; height: auto; border-radius: 6px; }
  .soc-list { display: grid; gap: 6px; font-size: 13px; list-style: none; margin: 0; padding: 0; }
  .soc-list li { display: flex; gap: 8px; align-items: center; }
  .soc-list svg { width: 22px; height: 22px; }
  .soc-list svg.dk { background: #0a0a0a; border-radius: 5px; padding: 2px; }
  .soc-week b { display: block; margin-bottom: 6px; }
  .soc-side { display: flex; flex-direction: column; gap: 8px; }
  .soc-sched { list-style: none; margin: 0; padding: 0; display: none; }
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpi { padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(5, 11, 25, .55); }
  .kpi span { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--muted); } .kpi span svg { width: 12px; height: 12px; }
  .kpi b { display: block; font-size: 18px; color: #fff; }
  .kpi i { font-style: normal; font-size: 12px; color: var(--mint); display: inline-flex; gap: 2px; align-items: center; } .kpi i svg { width: 12px; height: 12px; }
  .spark { width: 100%; height: 70px; }
  .mini-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mini-nav button, .bk button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(5, 11, 25, .6); color: #fff; font-size: 12px; }
  .mini-nav svg, .bk svg { width: 20px; height: 20px; }
  .bk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bk button { background: linear-gradient(180deg, #2f5df0, #1f40bf); border-color: #4f7bff; }
  .tabs { display: flex; gap: 4px; }
  .tabs a { flex: 1; min-height: 40px; display: grid; place-items: center; font-size: 12px; border-radius: 8px; border: 1px solid var(--line); color: #fff; text-decoration: none; }
  .tabs a.on { background: #1d2f66; }
  .msgs, .rows, .steps, .cf-list, .engines { list-style: none; margin: 0; padding: 0; }
  .msgs { display: grid; gap: 4px; }
  .msgs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
  .msgs .ago { font-size: 11px; color: var(--muted); }
  .mi { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; } .mi svg { width: 12px; height: 12px; color: #fff; }
  .sc-b.create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .create button { display: flex; flex-direction: column; padding: 0 0 6px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(5, 11, 25, .55); color: #fff; font-size: 12.5px; }
  .create img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
  .svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .svc button { min-height: 48px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line2); background: rgba(5, 11, 25, .55); }
  .svc button svg { width: 24px; height: 24px; } .svc button small { font-size: 9px; color: #fff; }
  .svc button.stripe { background: #5b4cff; } .svc button.stripe svg { filter: brightness(0) invert(1); }
  .rows { display: grid; gap: 4px; }
  .rows button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: rgba(5, 11, 25, .45); color: var(--text); font-size: 13px; text-align: left; }
  .rows button > svg:first-child { width: 16px; height: 16px; } .rows span { flex: 1; } .rows em { font-style: normal; font-size: 12px; color: var(--muted); } .rows em.ok { color: var(--mint); } .rows .chev { width: 12px; height: 12px; }
  .steps { display: grid; gap: 6px; font-size: 13px; } .steps li { display: flex; gap: 8px; align-items: center; } .steps svg { width: 16px; height: 16px; color: var(--cyan); }
  .engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .engines li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 11, 25, .5); }
  .engines .mono { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; } .engines b { font-size: 13px; color: #fff; } .engines .sub, .engines .role { font-size: 11.5px; color: var(--muted); }
  .engines .sdot { position: absolute; top: 8px; right: 8px; }
  .cf-logo { width: 34px; height: 34px; } .cf-h h2 { letter-spacing: .12em; }
  .cf-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .cf-list button { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 11, 25, .5); color: #fff; }
  .cf-list svg { width: 22px; height: 22px; fill: none; } .cf-list .cf-r2 { stroke: #ff5aa0; } .cf-list .cf-d1 { stroke: #3d9bff; } .cf-list .cf-wr { stroke: #4fb8ff; } .cf-list .cf-br { stroke: #3fd0f0; }
  .cf-list b { font-size: 12.5px; } .cf-list span { font-size: 11px; color: var(--muted); }
  .row4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
  .prog ul { padding: 10px 14px 0; display: grid; gap: 6px; list-style: none; margin: 0; }
  .prog ul li { display: flex; gap: 8px; font-size: 13.5px; } .prog ul svg { width: 16px; height: 16px; color: var(--mint); flex: none; }
  .prog .row-btns { padding: 8px 14px 14px; justify-content: flex-end; }
  .prog .sc-h h2 svg.ci { width: 20px; height: 20px; }
  .home .row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile svg.ti { width: 42px; height: 42px; }
}
@media (max-width: 420px) {
  .logo.small { display: none; }
  .quick button svg, .verbs button svg { display: none; }
  .hero h1 { font-size: 38px; }
}
/* tools & marketplace */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.tool { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.tool-h { display: flex; gap: 10px; align-items: center; }
.tool-h svg.ti { width: 38px; height: 38px; filter: drop-shadow(0 0 6px rgba(35, 216, 255, .4)); }
.tool-h b { display: block; color: var(--white); }
.tool .price { margin: 4px 0 0; font-size: 17px; font-weight: 800; color: var(--white); }
.tool.k-soon .price { color: var(--muted); font-size: 14px; }
.tool .row-btns { margin-top: auto; padding-top: 6px; }
.tool .btn { height: auto; min-height: 36px; }
.area-ico { width: 56px; height: 56px; filter: drop-shadow(0 0 8px rgba(35, 216, 255, .45)); fill: none; stroke: none; }
.area-items li.st-live { border-color: rgba(97, 242, 221, .45); }
.area-items .btn, .view:not(.home) .btn { height: auto; min-height: 40px; }
dialog.notify { max-width: min(480px, calc(100vw - 32px)); color: var(--text); border: 1px solid rgba(35, 216, 255, .5); box-shadow: var(--glow); }
dialog.notify::backdrop { background: rgba(0, 0, 0, .6); }
dialog.notify h2 { color: var(--white); font-size: 18px; margin: 0 0 8px; }
dialog.notify .btn { height: auto; min-height: 40px; }
.mono { display: grid; place-items: center; color: #fff; font-weight: 800; }
.m-v { background: linear-gradient(135deg, #e8845e, #c4552f); } .m-o { background: linear-gradient(135deg, #f0a07c, #d0633a); } .m-y { background: linear-gradient(135deg, #f6c08a, #d98a4a); }
.m-g { background: linear-gradient(135deg, #3cc39a, #138a69); } .m-b { background: linear-gradient(135deg, #5b8cff, #8f5bff); } .m-p { background: linear-gradient(135deg, #ff86cc, #a64dff); }
.m-c { background: linear-gradient(135deg, #b9d4ff, #5a7bff); } .m-r { background: linear-gradient(135deg, #a77bff, #5a3be0); }
.m1 { background: linear-gradient(135deg, #4fb8ff, #2a5cff); } .m2 { background: linear-gradient(135deg, #6b7bff, #3a3fe0); } .m3 { background: linear-gradient(135deg, #ffb74f, #f08a1e); } .m4 { background: linear-gradient(135deg, #4fc8ff, #1a8ae6); } .m5 { background: linear-gradient(135deg, #ffd27a, #f0a92a); }
.mi { border-radius: 50%; }
.pc { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(5, 11, 25, .45); font-size: .9em; }
.link { min-height: 32px; min-width: 32px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* v14 fid r2: list/grid resets on desktop, nav fit, demo pill in the AI Team header */
.msgs, .rows, .steps, .cf-list, .engines, .soc-list, .soc-sched, .team-list, .prog ul { list-style: none; margin: 0; padding: 0; }
.team h2 .demo-pill { margin-left: auto; height: 15px; padding: 0 6px; font-size: 8px; font-weight: 600; }
@media (min-width: 1000px) {
  .nav a { padding-left: 14px; gap: 11px; letter-spacing: -.01em; }
  .nav a[data-k="bookings"] span { font-size: 10.2px; letter-spacing: -.025em; }
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mini-nav button, .bk button { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid; cursor: pointer; color: #fff; }
  .bk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk button { border-color: #4f7bff; }
  .tabs { display: flex; }
  .msgs li { display: grid; align-items: center; }
  .msgs .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .create button { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; color: #fff; }
  .create img { display: block; width: 100%; }
  .svc { display: grid; }
  .svc button { cursor: pointer; }
  .rows { display: grid; }
  .rows button { width: 100%; display: flex; align-items: center; cursor: pointer; text-align: left; }
  .steps { display: grid; }
  .steps li { display: flex; align-items: center; gap: 8px; }
  .engines { display: grid; }
  .engines li { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cf-list { display: grid; }
  .soc-list, .soc-sched { display: grid; }
  .kpi span, .kpi b { display: flex; }
  .kpi i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
  .kpi i svg { width: 10px; height: 10px; }
  .prog ul { display: grid; }
  .prog ul li { display: flex; align-items: center; }
  .stat b { font-size: 18px; }
}
@media (min-width: 1000px) {
  .top { padding-left: 60px; gap: 0; }
  .top-right { gap: 0; margin-left: 20px; }
  .selgroup { width: 120px; flex: none; }
  .selbtn { width: 44px; padding: 0 0 0 7px; gap: 3px; }
  .selgroup .sel { flex: 1; min-width: 0; }
  .selgroup select { width: 100%; padding: 0 14px 0 6px; background-position: right 3px center; background-size: 10px; }
  .icon-btn.bell { margin-left: 11px; }
  .avatar { margin-left: 8px; }
}
/* v14 fid r4 */
@media (min-width: 1000px) {
  .home, .top, .side { letter-spacing: -.012em; }
  .logo { font-size: 57px; }
  .selgroup { width: 132px; }
  .selbtn { width: 46px; }
  .selgroup select { padding: 0 13px 0 5px; text-overflow: clip; }
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 43px; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 14px; }
  .hero .lead { font-size: 14.2px; max-width: 432px; }
  .hero-bg img { width: 86%; }
  .hero-checks { width: 156px; font-size: 8.6px; gap: 10px; padding: 9px 8px 9px 9px; }
  .verbs button, .quick button { display: inline-flex; align-items: center; justify-content: flex-start; }
  .team h2 .demo-pill { height: 13px; font-size: 7px; padding: 0 4px; }
  .team-list li { grid-template-columns: 18px 76px minmax(0, 1fr) 5px; gap: 6px; }
  .team-list li .mono { width: 18px; height: 18px; font-size: 9px; }
  .team-list li b { font-size: 9.6px; }
  .team-list li .role { font-size: 8.7px; }
  .team .fine { font-size: 8.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .go-big { margin-right: 0; }
  .cmd.big .field { padding-right: 4px; }
  .tile { padding-top: 10px; background: linear-gradient(180deg, rgba(15, 21, 46, .92), rgba(12, 17, 40, .92)); border-color: rgba(72, 90, 140, .6); }
  .tile svg.ti { width: 38px; height: 38px; margin-bottom: 6px; }
  .tile .logos { height: 38px; margin-bottom: 6px; }
  .tile b { font-size: 12.4px; }
  .tile .sub { font-size: 9.7px; max-width: 128px; margin-top: 3px; }
  .sc-h h2 { font-size: 11.8px; }
  .sc-h { gap: 6px; }
  .ex { position: static; transform: none; height: 11px; line-height: 10px; font-size: 6.8px; padding: 0 3px; border: 0; background: rgba(231, 189, 109, .14); color: rgba(231, 189, 109, .9); flex: none; }
  .range { right: 8px; }
  .ba img { height: 100px; }
  .soc-list li { white-space: nowrap; font-size: 8.6px; gap: 5px; }
  .soc-list svg { width: 16px; height: 16px; }
  .soc-in { grid-template-columns: 92px 1fr; }
  .soc-in img { width: 92px; height: 128px; }
  .spark { width: 100%; height: 66px; display: block; }
  .kpi b { font-size: 17px; }
  .svc button.xero svg { background: #13b5ea; border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
  .hico-wrap { position: absolute; left: 9px; top: 7px; width: 20px; height: 17px; }
  .hico-wrap .hico { position: static; }
  .bdg { position: absolute; font-size: 6px; font-weight: 700; color: #fff; border-radius: 6px; padding: 0 2px; line-height: 8px; }
  .bdg.b1 { left: 12px; top: -4px; background: #e8344e; } .bdg.b2 { left: 15px; top: 7px; background: #2a5cff; }
  .cf-list span { font-size: 7.1px; white-space: nowrap; }
  .prog .sc-h h2 { font-size: 11.2px; }
  .prog ul li { font-size: 9.3px; }
}
/* v14 fid r5 */
@media (min-width: 1000px) {
  .top-cmd { flex-basis: 578px; max-width: 578px; }
  .nav a { margin: 0 3px; padding: 0 2px 0 12px; gap: 10px; font-size: 11px; }
  .nav a[data-k="bookings"] span { font-size: 9.6px; }
  .team-list li span.role { display: block; font-size: 8.7px; color: #b9c6df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .team-list li b { display: block; }
  .tile b { white-space: nowrap; }
  .hero-bg img { filter: saturate(1.2) brightness(1.18); object-position: 52% 30%; }
  .ba img { height: 92px; }
  .sc-b { gap: 6px; padding: 7px 9px 8px; }
  .soc-in img { height: 118px; }
  .soc-sched { gap: 4px; }
}
@media (min-width: 1000px) {
  .team-list li { grid-template-columns: 18px 86px minmax(0, 1fr) 5px; gap: 5px; letter-spacing: -.02em; }
  .team-list li b { font-size: 9.2px; }
  .team-list li span.role { font-size: 8.3px; }
  .soc-side .btn { white-space: nowrap; font-size: 8.8px; padding: 0 4px; }
}
/* v14 fid r6: OpenAI 3D tile icons, wider hero scene reaching over the headline */
.tile .ti-img { display: block; width: 46px; height: 46px; mix-blend-mode: screen; flex: none; }
@media (min-width: 1000px) {
  .tile .ti-img { width: 50px; height: 50px; margin: -4px 0 0; }
  .tile .logos { height: 46px; margin-bottom: 0; }
  .hero-bg { inset: -14px -10px 0 -10px; }
  .hero-bg img { width: 100%; object-position: 40% 22%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.6) 22%, #000 42%, #000 94%, transparent); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.6) 22%, #000 42%, #000 94%, transparent); filter: saturate(1.2) brightness(1.15); }
}
@media (max-width: 999px) { .tile .ti-img { width: 48px; height: 48px; } }
@media (min-width: 1000px) {
  .hero-bg img { left: auto; right: 0; width: 74%; height: 112%; top: -6%; object-fit: cover; object-position: 58% 18%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.7) 14%, #000 30%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.7) 14%, #000 30%, #000 93%, transparent); }
}
@media (min-width: 1000px) {
  .hero-bg img { filter: brightness(1.32) saturate(1.3) contrast(1.06); }
  .hero h1 em { background: linear-gradient(90deg, #73b0ff 0%, #4fd0ff 38%, #46e8e4 70%, #5cf5c8 100%); -webkit-background-clip: text; background-clip: text; }
}
@media (max-width: 999px) { .link { min-height: 44px; min-width: 44px; } }

/* v14: AI team as roles (no vendor names) */
.ri { display: block; mix-blend-mode: screen; flex: none; }
.stc { font-size: 7.5px; line-height: 11px; padding: 0 4px; border-radius: 3px; white-space: nowrap; justify-self: end; border: 1px solid rgba(147, 168, 196, .45); color: #93a8c4; }
.stc.s-on { color: #61f2dd; border-color: rgba(97, 242, 221, .55); } .stc.s-demo { color: #e7bd6d; border-color: rgba(231, 189, 109, .55); }
@media (min-width: 1000px) {
  .team-list li { grid-template-columns: 18px 70px minmax(0, 1fr) auto; height: 23.2px; gap: 5px; }
  .team-list li .ri { width: 20px; height: 20px; margin: -1px; }
  .team-list li b { font-size: 9.4px; }
  .engines { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
  .engines li { padding: 5px 2px 5px; }
  .engines .ri { width: 30px; height: 30px; margin: -3px 0 -1px; }
  .engines .stc { justify-self: auto; margin-top: 2px; font-size: 7px; }
}
@media (max-width: 999px) {
  .team-list li { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
  .team-list li .ri { width: 28px; height: 28px; }
  .engines .ri { width: 40px; height: 40px; }
  .stc { font-size: 10.5px; line-height: 16px; padding: 0 6px; }
}
@media (min-width: 1000px) {
  .team-list li { height: 22px; grid-template-columns: 18px 78px minmax(0, 1fr) auto; }
  .engines b, .engines .role, .engines .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .engines b { font-size: 9.2px; }
  .engines .role { font-size: 7.6px; }
  .engines .ri { width: 26px; height: 26px; }
}
/* v14 QA fixes: nav labels fit, tile descriptions never clip */
@media (min-width: 1000px) {
  .nav a { font-size: 10.5px; letter-spacing: -.025em; gap: 9px; padding-left: 11px; }
  .nav a[data-k="bookings"] span { font-size: 9.4px; letter-spacing: -.03em; }
  .nav a span { text-overflow: clip; }
  .tile .sub { font-size: 9.3px; line-height: 1.22; max-width: 142px; }
}
@media (min-width: 1000px) { .nav a[data-k="bookings"] span { font-size: 8.9px; } }

/* ================= azai-v15: the signed-out landing ("/" and /dp/home/ = this dashboard in guest mode) ================= */
.guest-cta { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 13px; margin-left: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--mint), var(--cyan)); color: #04121f; font-weight: 700; font-size: 11.5px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 12px rgba(60, 230, 240, .35); }
.banner.guest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.banner.guest p { margin: 0; flex: 1 1 320px; }
.banner.guest .row-btns { display: flex; gap: 8px; margin: 0; }
.banner.guest .btn { min-height: 34px; padding: 6px 14px; }
.side-auth { display: grid; gap: 8px; padding: 6px 8px; }
.side-auth .btn { min-height: 40px; }
.quote .guest-q { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: rgba(35, 216, 255, .07); border: 1px solid var(--line); color: var(--white); overflow-wrap: anywhere; }
dialog.notify form.wait { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
dialog.notify form.wait input { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--navy); }
dialog.notify form.wait .notice { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 999px) {
  .guest-cta { height: 44px; padding: 0 16px; font-size: 14px; margin-left: 2px; }
  .side-auth .btn { min-height: 44px; }
  .banner.guest .btn { min-height: 44px; }
}@media (min-width: 1000px) {
  .banner.guest { font-size: 12.5px; padding: 6px 10px 6px 14px; }
  .banner.guest .btn { min-height: 28px; padding: 4px 12px; font-size: 12.5px; }
}
@media (max-width: 999px) { .banner.guest { font-size: 13.5px; line-height: 1.4; } }
/* ================= azai-v16: buying single tools ================= */
.tool .owned { margin: 2px 0 6px; color: var(--mint); font-weight: 600; font-size: 13px; }
.receipts { margin-top: 14px; }
.receipts .krow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* landing fix: on desktop Sign up is in the top bar + banner; the nav column must not grow into the example rows */
@media (min-width: 1000px) { .side-auth { display: none; } }
/* slogan fix: the wordmark + 'All of what you and your business need. From A to Z.' run past the 154 px nav column (by design, as in the reference); the guest bar starts after them so nothing overlaps */
@media (min-width: 1000px) { .banner.guest { margin-left: 66px; position: relative; z-index: 3; background: rgba(8, 20, 40, .94); } .side-head { z-index: 1; } }

/* ================= azai-v17: one page (dashboard = home), cleaner ================= */
.toplinks { display: flex; gap: 22px; margin: 0 auto; font-size: 14px; }
.toplinks a { color: #dbe5f5; text-decoration: none; white-space: nowrap; } .toplinks a:hover { color: #fff; }
.azhero { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: clamp(26px, 5vw, 54px) clamp(14px, 4vw, 40px) clamp(20px, 3vw, 30px); margin: 4px 0 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(25, 45, 95, .55), rgba(6, 11, 24, .2) 60%), #070d1d; border: 1px solid rgba(120, 140, 255, .18); text-align: center; }
.azring { position: absolute; z-index: -1; left: 72%; top: 70%; width: min(900px, 140vw); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: conic-gradient(from 200deg, transparent 0deg, #23d8ff 40deg, #7a5cff 130deg, #c13cff 175deg, #ffb547 215deg, transparent 270deg, transparent 360deg); -webkit-mask: radial-gradient(circle, transparent 57%, #000 60%, #000 71%, transparent 74%); mask: radial-gradient(circle, transparent 57%, #000 60%, #000 71%, transparent 74%); filter: blur(16px); opacity: .55; animation: azring 90s linear infinite; }
@keyframes azring { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .azring { animation: none; } }
.azhero h1 { margin: 0 0 8px; font-weight: 500; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -.025em; color: #fff; }
.azhero h1 .soft { color: #d9e2f2; display: block; } .azhero h1 em { font-style: normal; background: linear-gradient(90deg, #fff, #61f2dd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.azhero .lead { margin: 0 auto; max-width: 600px; color: #a9bbd3; font-size: clamp(14px, 1.5vw, 16px); }
.azhero .demo-pill { margin-left: 6px; vertical-align: middle; }
.cmd.big.azbox { display: block; margin: 22px auto 0; width: min(760px, 100%); text-align: left; padding: 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 22, 42, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.azfield { position: relative; display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 12px 14px; }
.azfield:focus-within { border-color: rgba(35, 216, 255, .6); }
.azfield textarea { flex: 1; min-width: 0; min-height: 70px; background: transparent; border: 0; outline: 0; resize: none; color: #f3f8ff; font: inherit; font-size: 16px; padding-right: 26px; }
.azfield textarea::placeholder { color: #b5c3d8; }
.azfield .kbd { position: absolute; right: 12px; top: 12px; font: 12px/1 Inter, system-ui, sans-serif; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; padding: 3px 6px; color: #cfd8e6; }
.azi-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; color: #9fb2cc; font-size: 11px; }
.azrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.qchip { display: inline-flex; align-items: center; min-height: 38px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03); border-radius: 10px; padding: 7px 12px; font-size: 13.5px; color: #e6eefb; text-decoration: none; cursor: pointer; }
.qchip:hover { border-color: rgba(97, 242, 221, .6); }
.aztools { display: inline-flex; gap: 2px; }
.azgo { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.azgo small { color: #9fb2cc; font-size: 12px; }
.azbox .go-big { min-height: 44px; border: 0; border-radius: 999px; padding: 0 22px; font-weight: 700; background: linear-gradient(135deg, #61f2dd, #23d8ff); color: #04121f; display: inline-flex; align-items: center; gap: 4px; }
.more .more-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.more-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); text-decoration: none; }
.more-item svg.ti { width: 28px; height: 28px; }
.more-item span { display: flex; flex-direction: column; } .more-item small { color: var(--muted); font-size: 12px; }
.area-items { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rel-title { margin: 22px 0 10px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.card.rel { display: flex; flex-direction: column; padding: 14px; }
.card.rel .rel-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .card.rel .rel-h b { color: var(--white); }
.card.rel .fine { flex: 1; margin: 6px 0 10px; }
.view .azi-ask { min-height: 40px; }
#recent li.start { list-style: none; margin-top: 6px; }
#recent li.start button { width: 100%; text-align: left; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(35, 216, 255, .05); color: var(--text); cursor: pointer; }
.top .pill-in { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #fff; text-decoration: none; font-size: 13px; white-space: nowrap; margin-left: 8px; }
.top .pill-in.solid { background: linear-gradient(135deg, #61f2dd, #23d8ff); color: #04121f; border: 0; font-weight: 700; }
.foot .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; margin-bottom: 10px; }
.foot .share .lbl { color: #dbe5f5; font-weight: 600; }
.sh { display: flex; flex-wrap: wrap; gap: 6px; }
.sh a, .sh button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #e6eefb; text-decoration: none; cursor: pointer; }
.sh svg { width: 19px; height: 19px; fill: currentColor; stroke: none; } .sh svg.ln { fill: none; stroke: currentColor; stroke-width: 2; }
.sh .copied { width: auto; padding: 0 12px; font-size: 13px; color: #61f2dd; }
.foot { flex-wrap: wrap; }
@media (min-width: 1000px) { .side-auth { display: none; } .top .toplinks { margin-left: 70px; } }
@media (max-width: 999px) { .toplinks { display: none; } .top .pill-in:not(.solid) { display: none; } .top .pill-in.solid { min-height: 44px; } .aztools { display: none; } }
.home .row3 { align-items: start; }
@media (min-width: 721px) { .home .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 8 tiles = two full rows, no empty slots */
.tpl .tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.tpl .qchip { justify-content: center; min-height: 44px; }   /* cards keep their own height: no empty bands inside them */
@media (max-width: 560px) { body.guest .selgroup { display: none; } .top .pill-in.solid { padding: 0 12px; } }
@media (max-width: 560px) { .azgo { width: 100%; justify-content: space-between; margin-left: 0; } .azbox .go-big { flex: 1; max-width: 170px; justify-content: center; } .azi-chip small { display: none; } .qchip { font-size: 13px; padding: 6px 10px; } }

/* ================= azai-v17b: centred, less dead space ================= */
@media (min-width: 1700px) { .shell { max-width: 1200px; margin: 0 auto; } }   /* zoomed 1.6x: 1920 px wide, centred on ultrawide screens */
@media (min-width: 1000px) {
  .home .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home .row3 > :nth-child(1), .home .row3 > :nth-child(2) { grid-column: 1; }
  .home .row3 > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
}
.foot { justify-content: center; text-align: center; }
.foot .share { justify-content: center; }
#recent li.start { list-style: none; margin-top: 6px; }
#recent li.start button { width: 100%; text-align: left; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(35, 216, 255, .05); color: var(--text); cursor: pointer; }
/* the slogan sits left, under the logo (desktop: the nav column; phones: a small line above the Ask AZ box) */
.side-head .tag { white-space: normal !important; max-width: 132px; line-height: 1.3; }
.m-tag { display: none; }
@media (min-width: 1000px) {
  .home .low { margin: 16px 0 0 !important; }   /* the lower sections stay in the main column (they slid under the sidebar) */
  .side { align-self: stretch !important; }      /* the sidebar runs the full height: one consistent left edge */
}
.azhero { padding-top: clamp(18px, 3.2vw, 34px) !important; padding-bottom: clamp(16px, 2.4vw, 24px) !important; }
.home .row3 > :nth-child(3) { align-self: stretch; display: flex; flex-direction: column; }
.home .row3 > :nth-child(3) .links-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
@media (max-width: 999px) { .aztools { display: inline-flex !important; } }   /* the mic is there on phones too */
.demo-pill { font-size: 11px; opacity: .78; }
main:focus, main:focus-visible { outline: none; }   /* no stray cyan frame round the page after switching views */
.view:not(.home) > h1:first-child { margin-top: 18px; }
@media (max-width: 999px) { .azhero .m-tag { display: block; text-align: left; margin: -6px 0 14px; font-size: 13px; line-height: 1.35; color: #c9d6e8; max-width: 34ch; } }

/* ================= azai-v19: wallet shop + embedded checkout ================= */
.shop .row-btns { margin: 8px 0; flex-wrap: wrap; }
.shop .btn[disabled] { opacity: .55; cursor: not-allowed; }
dialog.notify .checkout-mount { min-height: 120px; margin: 10px 0; background: #fff; border-radius: 12px; overflow: hidden; }
dialog.notify:has(.checkout-mount) { max-width: min(560px, calc(100vw - 24px)); }

/* ================= azai-v17c ================= */
/* bottom row: Recent work | Already working (two-column list), Credits as a full-width strip: balanced, nothing stretched */
@media (min-width: 1000px) {
  .home .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; }
  .home .row3 > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  .home .row3 > :nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; align-self: stretch; }
  .home .row3 > :nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  .home .row3 > :nth-child(3) .links-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: initial !important; flex: 1 1 auto !important; align-content: space-evenly; }
  .home .row3 > :nth-child(1) { display: flex; flex-direction: column; }
  .home .row3 > :nth-child(1) #recent { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; }   /* both top cards fill the row: no empty band inside either */
}
.azrow { justify-content: center; }
@media (min-width: 721px) { .azfield { padding-right: 52px; } }   /* the orb on the left is balanced on the right: the text box is centred */
.azfield:focus-within { box-shadow: 0 0 0 2px #23d8ff, 0 0 14px rgba(35, 216, 255, .35); border-radius: 16px; }
@media (max-width: 700px) { .foot a, .foot button { min-height: 44px; display: inline-flex; align-items: center; } }
.row-btns .azi-ask { margin-left: auto; }

/* ================= azai-v17d ================= */
.side-more { display: grid; gap: 2px; padding: 8px 10px 4px; border-top: 1px solid rgba(70, 100, 170, .35); margin-top: 6px; }
.side-more-h { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9fb2cc; }
.side-more a { display: flex; align-items: center; min-height: 36px; padding: 0 8px; border-radius: 8px; color: #dfe7f7; font-size: 12.5px; text-decoration: none; }
.side-more a:hover, .side-more a:focus-visible { background: rgba(35, 216, 255, .1); }
.code-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.code-box label { font-weight: 600; }
.code-box input { min-height: 44px; flex: 1 1 200px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy, #0b1530); color: #fff; font: inherit; letter-spacing: .04em; }
.code-box .fine { flex-basis: 100%; margin: 0; }

/* ================= azai-v17f: phones at 360 ================= */
.azgo small, .azw-try { white-space: nowrap; }
@media (max-width: 560px) { .top-right [data-az-spend] { display: none !important; } }   /* phones: the credits are in the wallet; the top bar must not overflow */
@media (max-width: 420px) {
  .azgo { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .azgo small { flex-basis: 100%; text-align: right; font-size: 12px; }
  .azw-try { padding: 0 12px; }
}

/* ================= azai-v28: one h1 per page (the other views' titles are h2.vh1, styled like the old h1) ================= */
.view h2.vh1 { color: var(--white); font-size: 30px; letter-spacing: -.02em; margin: 4px 0 14px; }
.area-head h2.vh1 { margin: 0 0 4px; }
.job-detail h2.vh1 { font-size: 22px; }
.view:not(.home) > h2.vh1:first-child { margin-top: 18px; }

/* ================= azai-v25: footer balance (shared v2) + model disclaimer ================= */
/* footer-balance.css v2 (Todd 10-11): compact balanced footer links, scoped to footer only. */
/* A) link lists (ul/li) and bare-anchor groups (h4 + a + a ...) flow in balanced columns, headings span the full width */
footer ul:not(.fb-keep){display:block;list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
footer ul:not(.fb-keep)>li{display:block;break-inside:avoid;margin:0;padding:0}
footer ul:not(.fb-keep)>li>a{display:inline-block;padding:5px 0}
footer ul:not(.fb-keep):has(>li:nth-child(-n+3):last-child){columns:1}
footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep){display:block;columns:2;column-gap:20px}
footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep)>:is(h2,h3,h4,h5){column-span:all;margin-bottom:6px}
footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep)>a{display:block;break-inside:avoid;padding:5px 0}
footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep):has(>a:nth-child(-n+4):last-child){columns:1}
/* B) groups sit in an auto-fit grid */
footer :is(div,nav,section):has(>:is(div,nav,section,details)>ul),footer :is(div,nav,section):has(>:is(div,nav,section)>:is(h2,h3,h4,h5)+a),footer .fb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 24px;text-align:left}
footer .fb-grid>*,footer :is(div,nav,section):has(>:is(div,nav,section,details)>ul)>*{min-width:0}
@media(min-width:640px){footer :is(div,nav,section):has(>:is(div,nav,section,details)>ul),footer :is(div,nav,section):has(>:is(div,nav,section)>:is(h2,h3,h4,h5)+a),footer .fb-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}}
/* C) flat link rows */
footer .fb-inline{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;text-align:center}
@media(min-width:768px){footer ul:not(.fb-keep):has(>li:nth-child(13)){columns:3}}
@media(min-width:1100px){
footer ul:not(.fb-keep),footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep){columns:1}
footer ul:not(.fb-keep):has(>li:nth-child(9)),footer :is(div,nav,section):has(>:is(h2,h3,h4,h5)+a):not(.fb-keep):has(>a:nth-child(9)){columns:2}
footer :is(div,nav,section):has(>:is(div,nav,section,details)>ul),footer :is(div,nav,section):has(>:is(div,nav,section)>:is(h2,h3,h4,h5)+a),footer .fb-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media(max-width:380px){footer ul:not(.fb-keep){column-gap:12px;font-size:.95em}}
.foot .foot-ai { flex-basis: 100%; order: 99; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .foot .foot-ai { padding: 0 8px 64px; } }   /* the floating Ask AZ orb never covers it */

/* ================= azai-v26: narrow phones, signed in: the top bar fits ================= */
@media (max-width: 380px) { body:not(.guest) .top-right .selgroup .selbtn { display: none !important; } body:not(.guest) .top-right .selgroup select { max-width: 78px; } body:not(.guest) .top-right { gap: 4px; } }
.byok-list .byok-row { margin-top: 10px; }

/* ================= azai-v27: notifications (the bell's list) ================= */
.top-right .bell.azn-on { position: relative; }
@media (max-width: 430px) { body:not(.guest) .top-right .selgroup .selbtn { display: none !important; } body:not(.guest) .top-right .selgroup select { max-width: 78px; } body:not(.guest) .top-right { gap: 4px; } }   /* room for the bell (WebKit's selects are wider) */
@media (max-width: 560px) { .top-right .bell.azn-on { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } }
.azn-pop { position: fixed; z-index: 2147483050; top: 64px; right: max(10px, env(safe-area-inset-right)); width: min(400px, calc(100vw - 20px)); max-height: min(70vh, 620px); display: flex; flex-direction: column;
  background: #0b1530; color: #e8f0ff; border: 1px solid rgba(35,216,255,.3); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); }
.azn-pop[hidden] { display: none; }
.azn-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.azn-head b { margin-right: auto; font-size: 16px; }
.azn-btn { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.azn-btn:focus-visible, .azn-snooze:focus-visible, .azn-t:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 2px; }
.azn-x { min-width: 44px; font-size: 20px; padding: 0; }
.azn-list { list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; overscroll-behavior: contain; }
.azn-empty { margin: 18px 6px; color: #a9b8d6; text-align: center; }
.azn-item { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.azn-item.unread .azn-t::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #45e2f0; margin-right: 8px; vertical-align: middle; }
.azn-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.azn-t { color: #fff; font-weight: 600; text-decoration: none; }
a.azn-t:hover { text-decoration: underline; }
.azn-at { color: #8fa0bd; white-space: nowrap; font-size: 12px; }
.azn-b { margin: 4px 0 6px; color: #c7d3ea; font-size: 14px; line-height: 1.45; }
.azn-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.azn-snooze { min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #0e1a33; color: inherit; font: inherit; font-size: 14px; padding: 0 8px; }
.azn-btn.del { color: #ffb3b3; }
.azn-foot { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.azn-foot small { color: #8fa0bd; font-size: 12px; line-height: 1.4; }
.azn-foot:empty { display: none; }

/* azai-v30: the Ask box sizes to its text (Todd 10-11, slash.png): no dead space, no resize handle, no "/" hint */
.cmd.big.azbox .azfield { align-items: center; padding-top: 10px; padding-bottom: 10px; }
.cmd.big.azbox .azfield textarea { resize: none; min-height: 0; height: auto; max-height: 240px; padding: 10px 0; line-height: 1.45; overflow-y: hidden; field-sizing: content; }
.cmd.big.azbox .azfield .kbd { display: none; }

/* azai-v31: dashboard toward Todd's "Everything Operating System" mock (hero + AI team, intents, 15 cards, examples, engine + Cloudflare strips, header bar) */
.home .azhero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1180px) { .home .azhero { grid-template-columns: minmax(0, 1fr) 300px; } .home .azhero .azring { grid-column: 1 / -1; } }
.home .azhero h1 .h1-az { display: block; font-size: .72em; color: #eef3fb; }
.intents { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 4px; max-width: 760px; }
.intents .qchip { min-height: 40px; }
.aiteam { align-self: stretch; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid rgba(70, 100, 170, .45); background: linear-gradient(180deg, rgba(16, 28, 60, .92), rgba(9, 17, 38, .92)); text-align: left; }
.aiteam h2 { margin: 0 0 8px; font-size: 16px; color: #fff; }
.aiteam ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aiteam .tm { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 10px; background: rgba(5, 11, 25, .5); }
.aiteam .tm-n { display: flex; flex-direction: column; min-width: 0; }
.aiteam .tm-n b { font-size: 13.5px; color: #eef3fb; }
.aiteam .tm-n small { font-size: 12px; color: #b9c7dc; }
.aiteam .chip { flex: none; }
.aiteam .ticks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: #cfe3f5; }
.aiteam .ticks li::before { content: "\2713  "; color: #61f2dd; }
.x31-grid { margin-top: 14px; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x31 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.x31 .panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.x31 h2 { margin: 0; font-size: 16px; }
.x31 .ex-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #e7bd6d; border: 1px solid rgba(231, 189, 109, .55); border-radius: 6px; padding: 2px 6px; }
.x31 .row-btns { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.x31-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.x31-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(5, 11, 25, .5); font-size: 13.5px; }
.x31-act { font-size: 12px; color: #23d8ff; border: 1px solid rgba(35, 216, 255, .45); border-radius: 999px; padding: 2px 8px; }
.x31-make { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x31-make .btn { width: 100%; justify-content: center; min-height: 44px; }
.strips { margin-top: 14px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

.strip h2 { margin: 0 0 4px; font-size: 16px; }
.strip .fine { margin: 0 0 10px; }
.eng-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.eng { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(70, 100, 170, .45); background: rgba(5, 11, 25, .5); min-width: 0; }
.eng b { font-size: 13px; color: #eef3fb; } .eng small { font-size: 11.5px; color: #b9c7dc; line-height: 1.3; }
.cf-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.topask { flex: 1 1 360px; max-width: 620px; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid rgba(35, 216, 255, .55); background: rgba(5, 11, 25, .7); }
.topask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #f3f8ff; font: inherit; font-size: 15px; }
.topask input::placeholder { color: #b5c3d8; }
.topask .icon-btn { width: 36px; height: 36px; }
.topask .go-sm { width: 36px; height: 36px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #61f2dd, #23d8ff); color: #04121f; font-weight: 700; cursor: pointer; }
.topask:focus-within { box-shadow: 0 0 0 2px #23d8ff; }
@media (min-width: 1000px) { .topask ~ .toplinks { display: none; } }
@media (max-width: 999px) { .top { flex-wrap: wrap; } .topask { order: 10; flex-basis: 100%; max-width: none; } }
@media (max-width: 720px) { .topask { display: none; } }
.topask { min-width: 0; }
@media (max-width: 1179px) { .x31-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .x31-grid { grid-template-columns: minmax(0, 1fr); } .x31-make { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* azai-v31: status labels never touch their text (Todd 10-12: "Not yet" too close): one spacing scale everywhere */
.chip, .ex, .x31-act { white-space: nowrap; flex: none; }
:is(b, strong, span, a, h2, h3, p) + .chip, .chip + :is(b, span, a) { margin-left: 10px; }
.krow, .rel-h, .links-list a, .area-items li { gap: 10px; }
.links-list a { display: flex; align-items: center; justify-content: space-between; }
.home .prog.sc { min-height: 0; padding: 16px; }
.home .prog .sc-h { justify-content: flex-start; gap: 10px; }
.home .prog .sc-h h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.home .prog .ex { position: static; height: auto; line-height: 1.4; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; margin-left: 10px; transform: none; }
.home .prog ul { gap: 8px; margin-top: 10px; }
.home .prog ul li { font-size: 14px; line-height: 1.4; }
.home .prog .row-btns { margin-top: auto; padding-top: 12px; }
.home .prog { display: flex; flex-direction: column; }
.x31 .x31-art { width: 100%; max-height: 150px; object-fit: contain; margin: 4px 0; mix-blend-mode: screen; }
@media (max-width: 420px) { :is(b, strong, span, a, h2, h3, p) + .chip { margin-left: 8px; } }

/* azweb 10-13 tap targets on phones */
@media (max-width:480px){.qchip,.intents .qchip,.tpl .qchip{min-height:44px}}

/* azweb 10-13 header controls: Voice / Auto / Pro match the Log in button height (was 34px with 10.6px text) */
.selgroup{height:40px}.selbtn,.selgroup select{height:38px;font-size:13px}
/* QA 10-13: 44px taps on phones; the desktop command bar keeps its compact icons */
@media (max-width:760px){.topask .icon-btn{width:44px;height:44px}}
/* QA 10-13: 'Start here' prompt buttons 44px */
#recent li.start button{min-height:44px}

/* azai 10-14 header selects v2 */
.top-right .selgroup{width:auto!important;height:36px!important;flex:none;display:flex;align-items:stretch;overflow:visible}
.top-right .selgroup .sel{flex:none!important;min-width:auto!important;display:flex}
.top-right .selbtn,.top-right .selgroup select{height:34px!important;line-height:34px;font-size:13px!important;white-space:nowrap;text-overflow:clip!important;overflow:visible}
.top-right .selbtn{width:auto!important;position:relative;padding:0 28px 0 12px!important;gap:0!important}
.top-right .selbtn svg{position:absolute;right:10px;top:50%;width:11px!important;height:11px!important;margin-top:-5.5px}
.top-right .selgroup select{width:auto!important;max-width:none!important;min-width:0;padding:0 28px 0 12px!important;background-position:right 10px center!important;background-size:11px!important}
@media (max-width:430px){
  .top-right .selbtn{width:34px!important;padding:0!important;font-size:0!important;justify-content:center}
  .top-right .selbtn::before{content:"";width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") no-repeat center/contain}
  .top-right .selbtn svg{display:none}
  body:not(.guest) .top-right .selgroup .selbtn{display:inline-flex!important}
  .top-right .selgroup select,body:not(.guest) .top-right .selgroup select{max-width:none!important;padding:0 22px 0 8px!important;background-position:right 7px center!important;font-size:12.5px!important}
}
@media (max-width:360px){body:not(.guest) .top-right .selgroup .selbtn{display:none!important}}
/* azai-ck1: cards that are links look and act like links (whole card clickable, hover + keyboard focus) */
.ck-card { position: relative; }
.ck-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.ck-stretch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ck-card:hover, a.ck-eng:hover, a.ck-stat:hover { border-color: var(--cyan); background-color: rgba(35, 216, 255, .07); }
a.ck-eng, a.ck-stat { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
a.ck-stat { display: block; }
a.ck-eng:focus-visible, a.ck-stat:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }