/* Layout concept: a bright product-led marketing site. Bands alternate card-white and the app's lavender;
     every feature is shown as a working piece of the product, painted with the app's own status colours. */
  html.dark { color-scheme: dark; }
  * { box-sizing: border-box; }
  body {
    background: var(--card); color: var(--foreground);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  a { color: var(--primary-ink); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
  h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif; text-wrap: balance; line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
  p { margin: 0; }
  .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .narrow { max-width: 780px; }
  .muted { color: var(--muted-foreground); }
  .eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary-ink); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* ---------- prototype frame (NOT part of the website) ---------- */
  .proto { background: var(--foreground); color: var(--background); font-size: 13px; }
  .proto .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 9px; }
  .proto .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
  .proto nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .proto button { font: inherit; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, var(--background) 30%, transparent); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
  .proto button[aria-current="true"] { background: var(--background); color: var(--foreground); }
  .proto .spacer { flex: 1; }

  /* ---------- buttons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 "Inter", ui-sans-serif, system-ui, sans-serif; padding: 13px 22px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, filter .15s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); }
  .btn-primary:hover { filter: brightness(1.07); }
  .btn-outline { background: var(--card); color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 22%, transparent); }
  .btn-ghost { background: transparent; color: var(--foreground); padding-inline: 12px; }
  .btn-sm { padding: 9px 16px; font-size: 14px; }
  .btn-block { width: 100%; }
  .arrow { transition: transform .15s ease; }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ---------- site header ---------- */
  .site-head { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
  .site-head .wrap { display: flex; align-items: center; gap: 28px; padding-block: 12px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
  .brand img { width: 32px; height: 32px; border-radius: 9px; }
  .site-nav { display: flex; gap: 22px; flex: 1; }
  .site-nav a { color: var(--foreground); opacity: .78; text-decoration: none; font-weight: 500; font-size: 15px; }
  .site-nav a[aria-current="page"], .site-nav a:hover { opacity: 1; color: var(--primary-ink); }
  .head-cta { display: flex; gap: 6px; align-items: center; }
  @media (max-width: 820px) { .site-nav { display: none; } .head-cta .btn-ghost { display: none; } .site-head .wrap { justify-content: space-between; } }

  main { display: block; }
  .band { padding-block: 88px; }
  .band.tint { background: var(--background); }
  .band.dark-band { background: var(--foreground); color: var(--background); }
  @media (max-width: 700px) { .band { padding-block: 60px; } }
  .section-head { max-width: 760px; }
  .section-head.center { margin: 0 auto; text-align: center; }
  .section-head h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin-top: 10px; }
  .section-head p { font-size: 18px; color: var(--muted-foreground); margin-top: 14px; }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; padding-block: 72px 40px; isolation: isolate; background:
      radial-gradient(700px 360px at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%), var(--card); }
  #grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%); }
  .hero-copy { text-align: center; max-width: 900px; margin: 0 auto; }
  .hero h1 { font-size: clamp(40px, 6.6vw, 80px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
  .hero h1 .hl { background: linear-gradient(90deg, var(--primary), var(--primary-ink), var(--primary)); background-size: 200% 100%; animation: sheen 6s ease-in-out infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .lede { font-size: clamp(17px, 2vw, 21px); color: var(--muted-foreground); max-width: 680px; margin: 22px auto 0; }
  .picker { margin-top: 34px; }
  .picker-q { font-weight: 600; font-size: 15px; }
  .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
  .pick { font: 600 15px/1 "Inter", sans-serif; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; box-shadow: var(--elev-card); transition: border-color .15s, transform .15s; }
  .pick:hover { transform: translateY(-2px); }
  .pick .dot { width: 22px; height: 22px; display: grid; place-items: center; color: var(--primary-ink); }
  .pick .dot svg { width: 18px; height: 18px; }
  .pick[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
  .hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
  .hero .fine { font-size: 14px; color: var(--muted-foreground); margin-top: 14px; }

  /* app window mockup */
  .window { margin: 52px auto 0; max-width: 1080px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--elev-overlay), 0 30px 80px color-mix(in srgb, var(--primary) 16%, transparent); overflow: hidden; position: relative; }
  .win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--muted); }
  .win-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .win-bar .addr { margin-left: 12px; font-size: 12px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 3px 12px; }
  .win-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 380px; }
  .side { border-right: 1px solid var(--border); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: var(--card); }
  .side .ws { font-weight: 700; font-size: 14px; padding: 6px 10px 12px; display: flex; gap: 8px; align-items: center; }
  .side .ws b { width: 22px; height: 22px; border-radius: 7px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; font-size: 12px; }
  .side .item { font-size: 13.5px; padding: 7px 10px; border-radius: 8px; color: var(--muted-foreground); display: flex; align-items: center; gap: 9px; }
  .side .item.on { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
  .side .item .sq { width: 9px; height: 9px; border-radius: 3px; }
  .side .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); padding: 14px 10px 4px; }
  .main-pane { padding: 18px 20px 22px; min-width: 0; }
  .pane-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .pane-top h3 { font-size: 22px; }
  .views { display: flex; gap: 4px; margin-left: auto; }
  .views span { font-size: 13px; padding: 6px 12px; border-radius: 8px; color: var(--muted-foreground); border: 1px solid transparent; }
  .views span.on { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
  .grid-scroll { overflow-x: auto; margin-top: 14px; border: 1px solid var(--grid); border-radius: 10px; }
  table.tg { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 620px; }
  .tg th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted-foreground); padding: 9px 12px; background: var(--muted); border-bottom: 1px solid var(--grid); white-space: nowrap; }
  .tg td { padding: 0 12px; height: 42px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
  .tg tr:last-child td { border-bottom: 0; }
  .tg td.st { padding: 0; width: 150px; border-left: 2px solid var(--card); }
  .tg .num { text-align: right; }
  .group-row td { height: 34px; font-weight: 700; font-size: 13px; color: var(--primary-ink); background: var(--card); }
  .group-row td::before { content: ""; display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); margin-right: 8px; vertical-align: -2px; }

  /* solid status cells — the app's own status colours */
  .cell { display: flex; align-items: center; justify-content: center; height: 42px; font-weight: 600; font-size: 13px; color: var(--card); transition: background-color .45s ease; }
  .s-green  { background: var(--doc-color-green); }
  .s-orange { background: var(--doc-color-orange); }
  .s-red    { background: var(--doc-color-red); }
  .s-blue   { background: var(--doc-color-blue); }
  .s-purple { background: var(--doc-color-purple); }
  .s-gray   { background: var(--doc-color-gray); }
  .pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--card); }
  .av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--card); vertical-align: middle; }
  .av + .av { margin-left: -7px; box-shadow: 0 0 0 2px var(--card); }
  .flash { animation: flash 1.1s ease; }
  @keyframes flash { 0% { box-shadow: inset 0 0 0 0 transparent; } 30% { box-shadow: inset 0 0 0 3px var(--foreground); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

  .toast { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 10px; align-items: center; background: var(--foreground); color: var(--background); padding: 11px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; box-shadow: var(--elev-overlay); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; max-width: calc(100% - 36px); }
  .toast.show { opacity: 1; transform: none; }
  .toast .ok { width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: var(--card); display: grid; place-items: center; font-size: 12px; flex: none; }
  .example-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); background: var(--muted); border-radius: 6px; padding: 3px 8px; }
  @media (max-width: 760px) { .win-body { grid-template-columns: 1fr; } .side { display: none; } .views { margin-left: 0; } }

  /* built-for strip */
  .built { padding-block: 36px 10px; text-align: center; }
  .built p { font-size: 14px; color: var(--muted-foreground); font-weight: 500; }
  .built-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 16px; }
  .built-row span { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; color: var(--foreground); opacity: .72; display: inline-flex; align-items: center; gap: 8px; }
  .built-row svg { width: 20px; height: 20px; }

  /* ---------- feature deep-dives ---------- */
  .feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
  .feat.flip > .feat-copy { order: 2; }
  @media (max-width: 920px) { .feat { grid-template-columns: 1fr; gap: 36px; } .feat.flip > .feat-copy { order: 0; } }
  .feat-copy h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; margin-top: 12px; }
  .feat-copy > p { font-size: 18px; color: var(--muted-foreground); margin-top: 16px; }
  .points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
  .points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
  .points .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
  .points .ic svg { width: 24px; height: 24px; }
  .points b { display: block; font-size: 16px; }
  .points span { color: var(--muted-foreground); font-size: 15px; }
  .feat-copy .more { display: inline-flex; gap: 6px; margin-top: 26px; font-weight: 600; text-decoration: none; }

  .stage { position: relative; border-radius: 22px; padding: clamp(18px, 3vw, 34px); min-width: 0; perspective: 1200px;
      background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
                  color-mix(in srgb, var(--primary) 7%, var(--card)); border: 1px solid var(--border); }
  .stage .panel { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
  .panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--elev-overlay); overflow: hidden; min-width: 0; }
  .panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; }
  .panel-h .example-tag { margin-left: auto; }

  /* kanban */
  .kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
  .lane { background: var(--muted); border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; }
  .lane-h { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
  .lane-h i { width: 9px; height: 9px; border-radius: 50%; display: block; }
  .lane-h em { margin-left: auto; font-style: normal; color: var(--muted-foreground); font-weight: 500; }
  .kcard { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; font-size: 13px; display: grid; gap: 6px; box-shadow: var(--elev-card); }
  .kcard .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
  .kcard b { font-weight: 600; }
  @media (max-width: 520px) { .kanban { grid-template-columns: 1fr; } }

  /* shop phone + arrival */
  .shop-scene { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
  @media (max-width: 560px) { .shop-scene { grid-template-columns: 1fr; justify-items: center; } }
  .phone { width: 220px; border-radius: 30px; background: var(--foreground); padding: 9px; box-shadow: var(--elev-overlay); }
  .phone-screen { background: var(--card); border-radius: 23px; overflow: hidden; }
  .shop-top { background: var(--primary); color: var(--primary-foreground); padding: 16px 14px 14px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; }
  .shop-top small { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: 11px; opacity: .85; }
  .prod { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; align-items: center; }
  .prod .ph { width: 44px; height: 44px; border-radius: 10px; }
  .prod b { display: block; font-size: 13px; }
  .shop-btn { margin: 12px; background: var(--primary); color: var(--primary-foreground); text-align: center; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 10px; }
  .arrive { display: grid; gap: 10px; min-width: 0; }
  .arrive .panel-h { font-size: 14px; }
  .mini { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .mini td { padding: 8px 12px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
  .mini tr.new td { background: color-mix(in srgb, var(--doc-color-green) 12%, var(--card)); }
  .mini tr:last-child td { border-bottom: 0; }
  .arrive-note { font-size: 13px; color: var(--muted-foreground); display: flex; gap: 8px; align-items: center; }

  /* invoice */
  .inv { padding: 22px; display: grid; gap: 14px; position: relative; }
  .inv-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
  .inv-top h4 { font-size: 20px; }
  .inv-top .meta { text-align: right; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .inv table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
  .inv th { text-align: left; font-size: 12px; color: var(--muted-foreground); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .inv td { padding: 8px 0; border-bottom: 1px solid var(--grid); }
  .inv .r { text-align: right; }
  .inv .total { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; font-family: "Plus Jakarta Sans", sans-serif; }
  .stamp { position: absolute; top: 58px; right: 26px; transform: rotate(-12deg); border: 3px solid var(--success); color: var(--success); font-weight: 800; font-size: 22px; letter-spacing: .1em; padding: 2px 12px; border-radius: 8px; font-family: "Plus Jakarta Sans", sans-serif; }
  .track { display: flex; gap: 0; margin-top: 4px; }
  .track span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 4px; color: var(--card); }
  .track span:first-child { border-radius: 8px 0 0 8px; } .track span:last-child { border-radius: 0 8px 8px 0; }

  /* automation recipe */
  .recipe { padding: 20px; display: grid; gap: 14px; }
  .sentence { font-size: 18px; line-height: 2.1; font-weight: 500; }
  .tok { display: inline-block; padding: 1px 12px; border-radius: 9px; font-weight: 700; line-height: 1.8; color: var(--card); }
  .tok.soft { background: var(--accent); color: var(--accent-foreground); }
  .runs { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; font-size: 13px; }
  .runs div { display: flex; gap: 10px; align-items: center; }
  .runs .when { margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .runs .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: var(--card); display: grid; place-items: center; font-size: 11px; flex: none; }
  .always { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--success); }
  .always i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: block; }

  /* customer 360 */
  .c360 { display: grid; gap: 0; }
  .c-head { display: flex; gap: 14px; align-items: center; padding: 18px; border-bottom: 1px solid var(--border); }
  .c-head .big-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--card); background: var(--primary); flex: none; }
  .c-head h4 { font-size: 19px; }
  .c-head p { font-size: 13px; color: var(--muted-foreground); }
  .c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
  .c-stats div { padding: 14px 18px; border-right: 1px solid var(--border); }
  .c-stats div:last-child { border-right: 0; }
  .c-stats small { display: block; font-size: 12px; color: var(--muted-foreground); }
  .c-stats b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-variant-numeric: tabular-nums; }
  .timeline { padding: 16px 18px; display: grid; gap: 12px; font-size: 13.5px; }
  .timeline div { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; }
  .timeline i { width: 10px; height: 10px; border-radius: 50%; display: block; }
  .timeline span { color: var(--muted-foreground); font-size: 12.5px; font-variant-numeric: tabular-nums; }

  /* finance */
  .fin { padding: 18px; display: grid; gap: 16px; }
  .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tile { border-radius: 12px; padding: 12px 14px; background: var(--muted); }
  .tile small { display: block; font-size: 12px; color: var(--muted-foreground); font-weight: 500; }
  .tile b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; }
  .tile.in b { color: var(--success); }
  .bars { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 170px; padding-top: 6px; }
  .axis { height: 100%; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; }
  .bar-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; position: relative; background: repeating-linear-gradient(to top, transparent 0 calc(33.33% - 1px), var(--grid) calc(33.33% - 1px) 33.33%); }
  .bar { width: 70%; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--primary) 55%, var(--card)); }
  .bar.now { background: var(--primary); }
  .bar-lbls { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 10px; font-size: 11.5px; color: var(--muted-foreground); text-align: center; margin-top: -8px; }
  @media (max-width: 460px) { .tiles { grid-template-columns: 1fr; } }

  /* AI chat */
  .chat { padding: 18px; display: grid; gap: 12px; font-size: 14px; }
  .msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; }
  .msg.me { justify-self: end; background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; }
  .msg.ai { background: var(--muted); border-bottom-left-radius: 4px; }
  .msg.ai ul { margin: 6px 0 0; padding-left: 18px; }
  .msg.ai li { margin: 2px 0; }
  .done-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .done-row span { font-size: 12px; font-weight: 600; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
  .chat-in { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 8px 8px 16px; color: var(--muted-foreground); font-size: 13.5px; }
  .chat-in b { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; }
  .works-with { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .works-with span { font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; background: var(--card); }

  /* more grid */
  .more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
  @media (max-width: 960px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .more-grid { grid-template-columns: 1fr; } }
  .mcard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: grid; gap: 10px; align-content: start; transition: transform .15s, box-shadow .15s; }
  .mcard:hover { transform: translateY(-3px); box-shadow: var(--elev-overlay); }
  .mcard .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
  .mcard .ic svg { width: 27px; height: 27px; }
  .mcard h3 { font-size: 17px; }
  .mcard p { font-size: 14.5px; color: var(--muted-foreground); }

  /* steps */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; counter-reset: st; }
  @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
  .step { padding: 26px; border-radius: 18px; background: color-mix(in srgb, var(--background) 10%, transparent); border: 1px solid color-mix(in srgb, var(--background) 22%, transparent); }
  .step::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: var(--primary-foreground); font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; margin-bottom: 16px; }
  .step h3 { font-size: 20px; }
  .step p { margin-top: 8px; opacity: .78; }
  .dark-band .section-head p { color: color-mix(in srgb, var(--background) 75%, transparent); }
  .dark-band .eyebrow { color: color-mix(in srgb, var(--primary) 60%, var(--background)); }

  .cta-final { text-align: center; padding-block: 96px; background:
      radial-gradient(500px 260px at 15% 20%, var(--doc-highlight-purple), transparent 70%),
      radial-gradient(500px 260px at 85% 80%, var(--doc-highlight-blue), transparent 70%), var(--card); }
  .cta-final h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
  .cta-final p { font-size: 18px; color: var(--muted-foreground); margin-top: 14px; }
  .cta-final .btn { margin-top: 28px; }

  /* ---------- pricing ---------- */
  .price-hero { text-align: center; padding-block: 72px 10px; background:
      radial-gradient(560px 280px at 10% 0%, var(--doc-highlight-purple), transparent 70%),
      radial-gradient(560px 280px at 90% 10%, var(--doc-highlight-blue), transparent 70%), var(--card); }
  .price-hero h1 { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
  .price-hero .lede { font-size: 19px; color: var(--muted-foreground); max-width: 640px; margin: 16px auto 0; }
  .toggle { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin-top: 28px; gap: 2px; box-shadow: var(--elev-card); }
  .toggle button { font: 600 15px/1 "Inter", sans-serif; border: 0; background: transparent; color: var(--muted-foreground); padding: 11px 20px; border-radius: 999px; cursor: pointer; }
  .toggle button[aria-pressed="true"] { background: var(--foreground); color: var(--background); }
  .toggle .save { color: var(--success); font-size: 13px; }
  .toggle button[aria-pressed="true"] .save { color: inherit; opacity: .8; }
  .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; align-items: stretch; }
  @media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
  .plan { background: var(--card); border: 1px solid var(--border); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: var(--elev-card); }
  .plan-stripe { height: 8px; }
  .plan-in { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
  .plan.featured { border: 2px solid var(--primary); box-shadow: var(--elev-overlay), 0 20px 50px color-mix(in srgb, var(--primary) 18%, transparent); }
  .plan .badge { position: absolute; top: 20px; right: 20px; background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
  .plan h2 { font-size: 24px; }
  .plan .for { color: var(--muted-foreground); font-size: 15px; margin-top: 4px; min-height: 3em; }
  .amount { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
  .amount .big { font-family: "Plus Jakarta Sans", sans-serif; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .amount .per { color: var(--muted-foreground); font-size: 15px; }
  .plan .sub { font-size: 13.5px; color: var(--muted-foreground); min-height: 2.8em; margin-top: -6px; }
  .plan .incl { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }
  .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
  .plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
  .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-ink); background: var(--accent); font-size: 11px; font-weight: 800; margin-top: 2px; }
  .tax-note { text-align: center; font-size: 14px; color: var(--muted-foreground); margin-top: 22px; }

  .pro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
  @media (max-width: 820px) { .pro-grid { grid-template-columns: 1fr; } }
  .pro-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
  .pro-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--card); }
  .pro-card .ic svg { width: 28px; height: 28px; }
  .pro-card h3 { font-size: 19px; }
  .pro-card .vs { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; font-weight: 600; }
  .pro-card .vs s { color: var(--muted-foreground); font-weight: 500; }
  .pro-card .vs b { color: var(--card); background: var(--primary); padding: 2px 9px; border-radius: 999px; }
  .pro-card p { margin-top: 10px; color: var(--muted-foreground); font-size: 15px; }
  .pro-card .eg { margin-top: 10px; font-size: 14px; background: var(--muted); border-radius: 10px; padding: 10px 12px; }
  .pro-card .eg b { font-weight: 600; }

  h2.section-title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
  .table-box { overflow-x: auto; margin-top: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
  table.compare { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 600px; }
  .compare th, .compare td { padding: 13px 18px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
  .compare thead th { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; position: sticky; top: 0; background: var(--card); }
  .compare tbody th { font-weight: 500; color: var(--muted-foreground); width: 34%; }
  .compare tr.group th { background: var(--muted); color: var(--foreground); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
  .compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
  .compare td.pro { background: color-mix(in srgb, var(--primary) 5%, var(--card)); font-weight: 600; }
  .dash { color: var(--muted-foreground); }
  .yes { color: var(--success); font-weight: 700; }

  .extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
  @media (max-width: 760px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px) { .extras { grid-template-columns: 1fr; } }
  .extra { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .extra .what { font-size: 15px; font-weight: 500; }
  .extra .what small { display: block; color: var(--muted-foreground); font-size: 12.5px; font-weight: 400; }
  .extra .cost { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }

  .faq { margin-top: 22px; display: grid; gap: 12px; }
  .faq details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
  .faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
  .faq p { margin-top: 10px; color: var(--muted-foreground); }

  /* ---------- legal ---------- */
  .legal-hero { padding-block: 64px 24px; background: radial-gradient(520px 240px at 10% 0%, var(--doc-highlight-purple), transparent 70%), var(--card); }
  .legal-hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
  .legal-hero .updated { color: var(--muted-foreground); font-size: 15px; margin-top: 10px; }
  .legal { padding-block: 10px 80px; }
  .legal .doc { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 32px clamp(20px, 4vw, 44px); box-shadow: var(--elev-card); }
  .legal h2 { font-size: 21px; margin: 30px 0 10px; }
  .legal h2:first-child { margin-top: 0; }
  .legal p, .legal li { max-width: 70ch; }
  .legal p + p { margin-top: 10px; }
  .legal ul { padding-left: 20px; margin: 8px 0 0; }
  .legal li { margin: 5px 0; }
  .mor { background: var(--accent); color: var(--accent-foreground); border-radius: 12px; padding: 14px 18px; font-weight: 500; margin-top: 12px; }
  .fill { background: color-mix(in srgb, var(--warning) 18%, var(--card)); color: var(--warning); border: 1px dashed var(--warning); border-radius: 4px; padding: 0 5px; font-weight: 600; white-space: nowrap; }
  .toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .toc a { font-size: 14px; text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; color: var(--foreground); }
  .proc { display: grid; gap: 14px; margin: 16px 0; padding: 0; list-style: none; counter-reset: s; }
  .proc li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; max-width: none; }
  .proc li::before { counter-increment: s; content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: 14px; }

  /* ---------- footer ---------- */
  footer.site-foot { background: var(--foreground); color: var(--background); font-size: 14.5px; }
  .site-foot .wrap { padding-block: 56px 36px; display: grid; gap: 36px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  .foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 12px; }
  .foot-grid a { display: block; color: var(--background); opacity: .85; text-decoration: none; margin: 7px 0; }
  .foot-grid a:hover { opacity: 1; text-decoration: underline; }
  .foot-brand { display: grid; gap: 12px; align-content: start; }
  .foot-brand .brand { color: var(--background); }
  .foot-brand p { opacity: .75; max-width: 34ch; }
  .foot-bottom { border-top: 1px solid color-mix(in srgb, var(--background) 18%, transparent); padding-top: 22px; display: grid; gap: 6px; font-size: 13.5px; opacity: .8; }

  /* ---------- decisions panel (prototype only) ---------- */
  .decisions { border-top: 4px solid var(--primary); background: var(--secondary); }
  .decisions .wrap { padding-block: 36px 44px; }
  .decisions h2 { font-size: 24px; }
  .decisions ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 10px; }
  .decisions li { max-width: 84ch; }

  /* dark theme: the inverted bands stay dark instead of flipping to light */
  html.dark footer.site-foot, html.dark .band.dark-band { background: var(--popover); color: var(--foreground); border-top: 1px solid var(--border); }
  html.dark .foot-grid a, html.dark .foot-brand .brand { color: var(--foreground); }
  html.dark .dark-band .section-head p { color: var(--muted-foreground); }
  html.dark .step { background: var(--muted); border-color: var(--border); }
  html.dark .foot-bottom { border-top-color: var(--border); }
  /* ===== v3: one purple family. Green is kept for one meaning only: money arrived / work done. ===== */
  .s-purple { background: var(--primary); color: var(--primary-foreground); }
  .s-blue   { background: var(--primary-ink); color: var(--card); }
  .s-orange { background: color-mix(in srgb, var(--primary) 26%, var(--card)); color: var(--primary-ink); }
  .s-red    { background: var(--accent-foreground); color: var(--card); }
  .s-gray   { background: var(--muted); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); }
  .s-green  { background: var(--success); color: var(--success-foreground); }
  .av + .av { box-shadow: 0 0 0 2px var(--card); }
  .win-bar i { background: var(--border) !important; box-shadow: none; }
  .lane-h i, .timeline i { box-shadow: none; }
  @keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

  /* line-art icons: outlined tile, purple stroke; they draw themselves on hover */
  .ic { background: var(--card) !important; color: var(--primary-ink) !important; border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border));
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--primary) 18%, transparent); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s, background-color .25s; }
  .points li:hover .ic, .mcard:hover .ic, .pro-card:hover .ic { transform: translate(-2px, -2px); border-color: var(--primary); box-shadow: 5px 5px 0 color-mix(in srgb, var(--primary) 30%, transparent); background: var(--accent) !important; }
  .points li { padding: 8px; margin: -8px; border-radius: 12px; transition: background-color .2s; }
  .points li:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .built-row span { transition: color .2s, opacity .2s; cursor: default; }
  .built-row span:hover { color: var(--primary-ink); opacity: 1; }
  .built-row svg { color: var(--primary-ink); }

  /* cards: a soft purple light follows the cursor */
  .spot { position: relative; overflow: hidden; }
  .spot-light { position: absolute; width: 420px; height: 420px; margin: -210px 0 0 -210px; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 0;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 15%, transparent), transparent); }
  .spot:hover > .spot-light { opacity: 1; }
  .spot > :not(.spot-light) { position: relative; z-index: 1; }
  .spot > .badge { position: absolute; z-index: 2; }
  .spot > .stamp { position: absolute; }
  .mcard:hover, .pro-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-4px); box-shadow: var(--elev-overlay); }
  .pro-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
  .plan { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
  .plan:hover { transform: translateY(-6px); box-shadow: var(--elev-overlay); }
  .extra { transition: border-color .2s, transform .2s; }
  .extra:hover { border-color: var(--primary); transform: translateY(-2px); }
  .extra:hover .cost { color: var(--primary-ink); }
  .kcard { transition: transform .2s, box-shadow .2s, border-color .2s; cursor: grab; }
  .kcard:hover { transform: translateY(-3px) rotate(-.6deg); border-color: var(--primary); box-shadow: var(--elev-overlay); }
  .tg tbody tr:not(.group-row) td { transition: background-color .15s; }
  .tg tbody tr:not(.group-row):hover td:not(.st) { background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
  .compare tbody tr:not(.group):hover th, .compare tbody tr:not(.group):hover td { background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
  .pick { transition: border-color .2s, transform .2s, box-shadow .2s; }
  .pick:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 16%, transparent); }
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--primary-foreground) 35%, transparent) 50%, transparent 70%); transform: translateX(-120%); }
  .btn-primary:hover::before { transform: translateX(120%); transition: transform .7s ease; }
  .faq details { transition: border-color .2s; } .faq details:hover, .faq details[open] { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
  .window { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .site-nav a { position: relative; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .msg { transition: transform .2s; } .chat:hover .msg.ai { transform: translateX(2px); }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

  /* =================== v4 =================== */
  /* ---- icons: each one has its own move. They play on hover, and when their story step starts. ---- */
  .ico { width: 100%; height: 100%; display: block; overflow: visible; }
  .ico g, .ico path, .ico rect, .ico circle { transform-box: fill-box; transform-origin: center; }
  .ihost:is(:hover, .play) .ico-board .r1 { transform-origin: left center; animation: k-growx .45s ease both; }
  .ihost:is(:hover, .play) .ico-board .r2 { transform-origin: left center; animation: k-growx .45s .12s ease both; }
  .ihost:is(:hover, .play) .ico-board .c  { transform-origin: center top; animation: k-growy .4s .22s ease both; }
  .ihost:is(:hover, .play) .ico-kanban .k1 { animation: k-hop .5s ease; }
  .ihost:is(:hover, .play) .ico-kanban .k2 { animation: k-hop .5s .1s ease; }
  .ihost:is(:hover, .play) .ico-kanban .k3 { animation: k-hop .5s .2s ease; }
  .ihost:is(:hover, .play) .ico-cal .pin { animation: k-hop .45s ease 2; }
  .ihost:is(:hover, .play) .ico-cal .day { animation: k-popin .55s .15s cubic-bezier(.3,1.6,.5,1) both; }
  .ico-cart .sp, .ico-truck .sp { opacity: 0; }
  .ihost:is(:hover, .play) .ico-cart .cart { animation: k-roll .8s cubic-bezier(.3,.7,.3,1); }
  .ihost:is(:hover, .play) .ico-cart .sp, .ihost:is(:hover, .play) .ico-truck .sp { animation: k-speed .8s ease; }
  .ihost:is(:hover, .play) .ico-link .l1 { animation: k-apart1 .7s ease; }
  .ihost:is(:hover, .play) .ico-link .l2 { animation: k-apart2 .7s ease; }
  .ihost:is(:hover, .play) .ico-doc .ln1 { transform-origin: left center; animation: k-growx .4s .1s ease both; }
  .ihost:is(:hover, .play) .ico-doc .ln2 { transform-origin: left center; animation: k-growx .35s .35s ease both; }
  .ihost:is(:hover, .play) .ico-doc .fold { animation: k-popin .4s ease; }
  .ihost:is(:hover, .play) .ico-eye .eyeg { animation: k-blink .55s ease; }
  .ihost:is(:hover, .play) .ico-eye .pupil { animation: k-look .9s .25s ease; }
  .ihost:is(:hover, .play) .ico-bolt .bolt { animation: k-zap .7s ease; }
  .ico-clock .hm, .ico-clock .hh { transform-box: view-box; transform-origin: 12px 12px; }
  .ihost:is(:hover, .play) .ico-clock .hm { animation: k-spin 1s cubic-bezier(.5,0,.3,1); }
  .ihost:is(:hover, .play) .ico-clock .hh { animation: k-tick 1s ease; }
  .ihost:is(:hover, .play) .ico-mail .flap { transform-origin: center top; animation: k-flap .7s ease; }
  .ihost:is(:hover, .play) .ico-mail .env { animation: k-hop .7s ease; }
  .ihost:is(:hover, .play) .ico-user .head { animation: k-nod .7s ease; }
  .ihost:is(:hover, .play) .ico-users .back { animation: k-slidein .6s ease; }
  .ihost:is(:hover, .play) .ico-users .front { animation: k-hop .5s .2s ease; }
  .ihost:is(:hover, .play) .ico-coin .coin { animation: k-flip .8s ease; }
  .ihost:is(:hover, .play) .ico-chart .b1 { transform-origin: center bottom; animation: k-growy .4s ease both; }
  .ihost:is(:hover, .play) .ico-chart .b2 { transform-origin: center bottom; animation: k-growy .4s .12s ease both; }
  .ihost:is(:hover, .play) .ico-chart .b3 { transform-origin: center bottom; animation: k-growy .4s .24s ease both; }
  .ihost:is(:hover, .play) .ico-spark .s1 { animation: k-twirl .8s ease; }
  .ihost:is(:hover, .play) .ico-spark .s2 { animation: k-twinkle .8s .2s ease; }
  .ihost:is(:hover, .play) .ico-chat .bub { animation: k-pop .5s cubic-bezier(.3,1.6,.5,1); }
  .ihost:is(:hover, .play) .ico-chat .d1 { animation: k-dot .6s .2s ease 2; }
  .ihost:is(:hover, .play) .ico-chat .d2 { animation: k-dot .6s .3s ease 2; }
  .ihost:is(:hover, .play) .ico-chat .d3 { animation: k-dot .6s .4s ease 2; }
  .ihost:is(:hover, .play) .ico-play .tri { animation: k-nudge .6s ease 2; }
  .ihost:is(:hover, .play) .ico-truck .truck { animation: k-drive .9s ease; }
  .ihost:is(:hover, .play) .ico-receipt .paper { animation: k-print .6s ease; }
  .ihost:is(:hover, .play) .ico-receipt .rl1 { transform-origin: left center; animation: k-growx .3s .3s ease both; }
  .ihost:is(:hover, .play) .ico-receipt .rl2 { transform-origin: left center; animation: k-growx .3s .45s ease both; }
  .ihost:is(:hover, .play) .ico-receipt .rl3 { transform-origin: left center; animation: k-growx .3s .6s ease both; }
  .ihost:is(:hover, .play) .ico-wifi .a1 { animation: k-wave .9s ease both; }
  .ihost:is(:hover, .play) .ico-wifi .a2 { animation: k-wave .9s .15s ease both; }
  .ihost:is(:hover, .play) .ico-wifi .a3 { animation: k-wave .9s .3s ease both; }
  .ihost:is(:hover, .play) .ico-lock .sh { animation: k-unlock .9s ease; }
  .ihost:is(:hover, .play) .ico-lock .kh { animation: k-popin .4s .5s ease; }
  .ihost:is(:hover, .play) .ico-layers .ly1 { animation: k-lift .7s ease; }
  .ihost:is(:hover, .play) .ico-layers .ly3 { animation: k-drop .7s ease; }
  .ihost:is(:hover, .play) .ico-undo .u { animation: k-swing .8s ease; }
  .ihost:is(:hover, .play) .ico-store .aw { transform-origin: center top; animation: k-awning .7s ease; }
  .ico-bed .z { opacity: 0; }
  .ihost:is(:hover, .play) .ico-bed .z { animation: k-zz 1.2s ease; }
  .ihost:is(:hover, .play) .ico-bed .pil { animation: k-squish .6s ease; }
  .ico-scissors .bl1, .ico-scissors .bl2 { transform-box: view-box; transform-origin: 12.5px 12px; }
  .ihost:is(:hover, .play) .ico-scissors .bl1 { animation: k-snip1 .35s ease 2; }
  .ihost:is(:hover, .play) .ico-scissors .bl2 { animation: k-snip2 .35s ease 2; }
  .ico-wrench .wr { transform-box: view-box; transform-origin: 11px 13px; }
  .ihost:is(:hover, .play) .ico-wrench .wr { animation: k-turn .8s ease; }
  .ico-cake .fl { transform-origin: center bottom; }
  .ihost:is(:hover, .play) .ico-cake .fl { animation: k-flicker .7s ease 2; }
  .ihost:is(:hover, .play) .ico-brief .hd { animation: k-lift .6s ease; }
  .ihost:is(:hover, .play) .ico-brief .case { animation: k-tilt .6s ease; }
  .ihost:is(:hover, .play) .ico-ask .mg { animation: k-scan 1s ease; }
  .ihost:is(:hover, .play) .ico-ask .q { animation: k-popin .45s .5s ease; }
  .ihost:is(:hover, .play) .ico-gantt .g1 { transform-origin: left center; animation: k-growx .4s ease both; }
  .ihost:is(:hover, .play) .ico-gantt .g2 { transform-origin: left center; animation: k-growx .4s .15s ease both; }
  .ihost:is(:hover, .play) .ico-gantt .g3 { transform-origin: left center; animation: k-growx .4s .3s ease both; }
  .ico-gear .gear { transform-box: view-box; transform-origin: 12px 12px; }
  .ihost:is(:hover, .play) .ico-gear .gear { animation: k-gear 1s cubic-bezier(.4,0,.2,1); }
  .ico-pulse .pl { stroke-dasharray: 34; stroke-dashoffset: 0; }
  .ihost:is(:hover, .play) .ico-pulse .pl { animation: k-trace 1s ease; }

  @keyframes k-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes k-growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes k-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-3px); } }
  @keyframes k-popin { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
  @keyframes k-roll { 0% { transform: none; } 35% { transform: translateX(3px) rotate(-7deg); } 70% { transform: translateX(-1px); } 100% { transform: none; } }
  @keyframes k-speed { 0% { opacity: 0; transform: translateX(2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-2px); } }
  @keyframes k-apart1 { 0%, 100% { transform: none; } 45% { transform: translate(2px, -2px); } }
  @keyframes k-apart2 { 0%, 100% { transform: none; } 45% { transform: translate(-2px, 2px); } }
  @keyframes k-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
  @keyframes k-look { 0%, 100% { transform: none; } 35% { transform: translateX(2px); } 70% { transform: translateX(-2px); } }
  @keyframes k-zap { 0% { transform: none; } 20% { transform: scale(1.2) rotate(-8deg); fill: currentColor; fill-opacity: .3; } 40% { transform: scale(.94); } 60% { transform: scale(1.08); fill-opacity: .15; } 100% { transform: none; } }
  @keyframes k-spin { to { transform: rotate(360deg); } }
  @keyframes k-tick { 0%, 100% { transform: none; } 50% { transform: rotate(40deg); } }
  @keyframes k-flap { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(-1); } }
  @keyframes k-nod { 0%, 100% { transform: none; } 30% { transform: translateY(-1.5px) rotate(-10deg); } 65% { transform: rotate(8deg); } }
  @keyframes k-slidein { 0% { transform: translateX(-4px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes k-flip { 0% { transform: scaleX(1); } 25% { transform: scaleX(0); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
  @keyframes k-twirl { 0% { transform: none; } 50% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(180deg); } }
  @keyframes k-twinkle { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .15; transform: scale(.4); } }
  @keyframes k-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.1); } 100% { transform: none; } }
  @keyframes k-dot { 0%, 100% { transform: none; } 50% { transform: translateY(-2.2px); } }
  @keyframes k-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(1.5px) scale(1.2); } }
  @keyframes k-drive { 0% { transform: none; } 40% { transform: translateX(5px); opacity: 1; } 41% { transform: translateX(-7px); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; } }
  @keyframes k-print { 0% { transform: translateY(-5px); opacity: .2; } 100% { transform: none; opacity: 1; } }
  @keyframes k-wave { 0% { opacity: .1; } 60%, 100% { opacity: 1; } }
  @keyframes k-unlock { 0%, 100% { transform: none; } 35%, 65% { transform: translateY(-2.5px); } }
  @keyframes k-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } }
  @keyframes k-drop { 0%, 100% { transform: none; } 50% { transform: translateY(1.5px); } }
  @keyframes k-swing { 0% { transform: none; } 40% { transform: rotate(-40deg); } 70% { transform: rotate(10deg); } 100% { transform: none; } }
  @keyframes k-awning { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.4); } 70% { transform: scaleY(.85); } }
  @keyframes k-zz { 0% { opacity: 0; transform: translate(-1px, 3px) scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, -3px); } }
  @keyframes k-squish { 0%, 100% { transform: none; } 50% { transform: scale(1.2, .8); } }
  @keyframes k-snip1 { 50% { transform: rotate(12deg); } }
  @keyframes k-snip2 { 50% { transform: rotate(-12deg); } }
  @keyframes k-turn { 0%, 100% { transform: none; } 45% { transform: rotate(-35deg); } }
  @keyframes k-flicker { 0%, 100% { transform: none; } 25% { transform: scale(1.3, .8); } 50% { transform: scale(.8, 1.25); } 75% { transform: scale(1.15, .9); } }
  @keyframes k-tilt { 0%, 100% { transform: none; } 50% { transform: rotate(-6deg) translateY(-1px); } }
  @keyframes k-scan { 0%, 100% { transform: none; } 25% { transform: translate(-2px, -1px); } 50% { transform: translate(1.5px, -2px); } 75% { transform: translate(2px, 1px); } }
  @keyframes k-gear { to { transform: rotate(90deg); } }
  @keyframes k-trace { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }

  /* ---- section bar (sticky, under the header) ---- */
  .segbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 57px); z-index: 15; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  .segbar .wrap { display: flex; gap: 4px; overflow-x: auto; padding-block: 8px; scrollbar-width: none; }
  .segbar .wrap::-webkit-scrollbar { display: none; }
  .segbar a { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--muted-foreground); text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1px solid transparent; transition: color .2s, background-color .2s, border-color .2s; }
  .segbar a .ib { width: 17px; height: 17px; color: var(--primary-ink); }
  .segbar a:hover { color: var(--foreground); background: var(--muted); }
  .segbar a.on { color: var(--primary-ink); background: var(--accent); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

  /* ---- story segments ---- */
  .seg { padding-block: 96px; scroll-margin-top: 110px; }
  .seg.tint { background: var(--background); }
  @media (max-width: 700px) { .seg { padding-block: 64px; } }
  .seg-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
  .seg.flip .seg-copy { order: 2; }
  .seg.flip .seg-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .92fr); }
  @media (max-width: 960px) { .seg-grid, .seg.flip .seg-grid { grid-template-columns: 1fr; gap: 32px; } .seg.flip .seg-copy { order: 0; } }
  .seg-copy h2 { font-size: clamp(28px, 3.3vw, 42px); font-weight: 800; margin-top: 12px; }
  .seg-copy > p { font-size: 17.5px; color: var(--muted-foreground); margin-top: 14px; max-width: 54ch; }
  .tagline { display: inline-flex; align-items: center; gap: 8px; }
  .pro-pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--primary); color: var(--primary-foreground); padding: 3px 9px; border-radius: 999px; }
  .steps-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 8px; }
  .step-btn { width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; cursor: pointer; position: relative; overflow: hidden; transition: background-color .25s, border-color .25s; }
  .step-btn:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .step-btn .ib { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--muted-foreground); background: var(--card); transition: color .25s, border-color .25s, box-shadow .25s, transform .25s; }
  .step-btn .ib svg { width: 22px; height: 22px; }
  .step-btn b { display: block; font-size: 16px; font-weight: 600; color: var(--muted-foreground); transition: color .25s; }
  .step-btn small { display: block; font-size: 14px; color: var(--muted-foreground); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease, margin .35s; }
  .step-btn[aria-current="step"] { background: var(--card); border-color: var(--border); box-shadow: var(--elev-card); }
  .seg.tint .step-btn[aria-current="step"] { background: var(--card); }
  .step-btn[aria-current="step"] b { color: var(--foreground); }
  .step-btn[aria-current="step"] small { max-height: 60px; opacity: 1; margin-top: 3px; }
  .step-btn[aria-current="step"] .ib { color: var(--primary-ink); border-color: var(--primary); box-shadow: 3px 3px 0 color-mix(in srgb, var(--primary) 22%, transparent); transform: translate(-1px, -1px); }
  .step-btn .prog { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; opacity: 0; }
  .step-btn[aria-current="step"] .prog { opacity: 1; animation: k-prog linear forwards; }
  .seg.paused .step-btn .prog { animation-play-state: paused; }
  @keyframes k-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .facts span { font-size: 13px; font-weight: 600; color: var(--primary-ink); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: var(--card); border-radius: 999px; padding: 5px 12px; }

  .stage { overflow: hidden; }
  .scene { position: relative; min-height: 440px; }
  .scene .panel { position: relative; }
  .x { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .x.on { opacity: 1; transform: none; }
  .gone { display: none !important; }
  .ring { box-shadow: 0 0 0 2px var(--primary) !important; }
  .flashrow td { animation: k-rowflash 1.4s ease; }
  @keyframes k-rowflash { 0% { background: color-mix(in srgb, var(--primary) 22%, var(--card)); } 100% { background: transparent; } }

  /* the demo pointer */
  .fcur { position: absolute; left: 70%; top: 85%; width: 22px; height: 22px; z-index: 30; pointer-events: none; opacity: 0; transition: left .65s cubic-bezier(.45,.05,.25,1), top .65s cubic-bezier(.45,.05,.25,1), opacity .3s; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
  .fcur.on { opacity: 1; }
  .fcur svg { width: 22px; height: 22px; display: block; }
  .fcur svg path { stroke: var(--card); }
  .fcur::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; }
  .fcur.click::after { animation: k-click .45s ease; }
  @keyframes k-click { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

  /* shared bits inside scenes */
  .sbtn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 "Inter", sans-serif; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; transition: transform .15s, background-color .2s; }
  .sbtn.pri { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
  .sbtn.pressed { transform: scale(.95); }
  .tickc { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-grid; place-items: center; font-size: 11px; color: transparent; flex: none; transition: background-color .3s, border-color .3s, color .3s; }
  .tickc.ok { background: var(--success); border-color: var(--success); color: var(--success-foreground); }
  .tickc.spin { border-color: var(--primary); border-top-color: transparent; animation: k-spinner .7s linear infinite; }
  @keyframes k-spinner { to { transform: rotate(360deg); } }
  .chipx { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-foreground); }
  .chipx.k { background: var(--primary); color: var(--primary-foreground); }
  .sm-note { font-size: 12.5px; color: var(--muted-foreground); }
  .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--primary); vertical-align: -3px; margin-left: 1px; animation: k-caret 1s steps(1) infinite; }
  @keyframes k-caret { 50% { opacity: 0; } }

  /* ---- hero board: interactive ---- */
  .views button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; color: var(--muted-foreground); border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
  .views button .ib { width: 15px; height: 15px; padding: 0; border-radius: 0; flex: none; }
  .views button[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
  .views button:hover { color: var(--foreground); }
  .side .item { cursor: pointer; transition: background-color .15s; }
  .side .item:hover { background: var(--muted); }
  .cellbtn { appearance: none; -webkit-appearance: none; border: 0; margin: 0; font: inherit; padding: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; font-weight: 600; font-size: 13px; cursor: pointer; position: relative; transition: background-color .35s, filter .2s; box-sizing: border-box; }
  .cellbtn:hover { filter: brightness(1.07); }
  .cellbtn:hover::after { content: "▾"; position: absolute; right: 8px; font-size: 10px; opacity: .8; }
  .cellbtn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  .statpop { position: absolute; z-index: 25; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev-overlay); padding: 8px; display: grid; gap: 5px; width: 190px; }
  .statpop button { appearance: none; -webkit-appearance: none; border: 0; margin: 0; font: inherit; box-sizing: border-box; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; transition: transform .12s; }
  .statpop button:hover { transform: scale(1.03); }
  .statpop .tip { font-size: 11.5px; color: var(--muted-foreground); padding: 2px 4px 4px; }
  .add-row td { height: 40px; }
  .addbtn { all: unset; cursor: pointer; color: var(--muted-foreground); font-size: 13px; padding: 4px 2px; }
  .addbtn:hover { color: var(--primary-ink); }
  .addin { font: inherit; font-size: 13px; border: 1px solid var(--primary); border-radius: 7px; padding: 6px 9px; width: 220px; max-width: 100%; background: var(--card); color: var(--foreground); outline: none; }
  .hint-line { font-size: 12px; color: var(--muted-foreground); margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
  .hint-line b { color: var(--primary-ink); font-weight: 600; }
  .hk { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
  .hk-lane { background: var(--muted); border-radius: 10px; padding: 8px; min-height: 200px; display: grid; gap: 7px; align-content: start; transition: box-shadow .2s, background-color .2s; }
  .hk-lane.over { box-shadow: inset 0 0 0 2px var(--primary); background: var(--accent); }
  .hk-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 2px 2px 4px; }
  .hk-h i { width: 10px; height: 10px; border-radius: 3px; display: block; }
  .hk-h em { margin-left: auto; font-style: normal; color: var(--muted-foreground); font-weight: 500; }
  .hcard { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 9px; font-size: 12.5px; display: grid; gap: 5px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: var(--elev-card); transition: transform .15s, box-shadow .15s, border-color .15s; }
  .hcard:hover { transform: translateY(-2px); border-color: var(--primary); }
  .hcard.dragging { opacity: .35; }
  .hcard .r { display: flex; justify-content: space-between; align-items: center; color: var(--muted-foreground); font-size: 11.5px; font-variant-numeric: tabular-nums; gap: 6px; }
  .ghost { position: fixed; z-index: 100; pointer-events: none; transform: rotate(3deg) scale(1.04); box-shadow: var(--elev-overlay) !important; border-color: var(--primary) !important; opacity: .96; }
  .hcal { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 0; margin-top: 14px; border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; min-width: 600px; }
  .hcal-wrap { overflow-x: auto; }
  .hcal-d { border-right: 1px solid var(--grid); min-height: 220px; padding: 6px; display: grid; gap: 6px; align-content: start; transition: background-color .2s; }
  .hcal-d:last-child { border-right: 0; }
  .hcal-d.over { background: var(--accent); }
  .hcal-d .dn { font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; padding: 2px 2px 4px; }
  .hcal-d .dn b { color: var(--foreground); font-size: 15px; margin-left: 4px; }
  .cchip { border-radius: 7px; padding: 6px 7px; font-size: 11.5px; font-weight: 600; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .15s; line-height: 1.3; }
  .cchip:hover { transform: translateY(-1px); }
  .cchip small { display: block; font-weight: 500; opacity: .85; }

  /* ---- scene: build a board ---- */
  .sc-build .tpl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; transition: opacity .35s, max-height .45s, padding .45s; max-height: 140px; overflow: hidden; }
  .sc-build.tpl-gone .tpl-row { opacity: 0; max-height: 0; padding-block: 0; }
  .tpl { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; background: var(--card); transition: border-color .25s, box-shadow .25s, transform .25s; }
  .tpl .ib { width: 26px; height: 26px; color: var(--primary-ink); }
  .tpl small { font-weight: 400; font-size: 11.5px; color: var(--muted-foreground); }
  .sc-build.picked .tpl.t0 { border-color: var(--primary); box-shadow: 3px 3px 0 color-mix(in srgb, var(--primary) 22%, transparent); transform: translate(-1px, -1px); }
  .b-wrap { padding: 0 16px 16px; position: relative; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
  .sc-build.has-tbl .b-wrap { opacity: 1; transform: none; }
  .sc-build .tg { min-width: 0; }
  .sc-build .tg td { height: 40px; }
  .newcol { max-width: 0; padding-inline: 0 !important; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .5s ease, opacity .4s, padding .5s; }
  .sc-build.has-col .newcol { max-width: 140px; padding-inline: 12px !important; opacity: 1; }
  .newcol .lockv { display: none; color: var(--muted-foreground); font-size: 12px; align-items: center; gap: 5px; }
  .newcol .lockv .ib { width: 14px; height: 14px; }
  .sc-build.locked .newcol .money { display: none; }
  .sc-build.locked .newcol .lockv { display: inline-flex; }
  .sc-build.locked th.newcol { color: var(--muted-foreground); }
  .addcol { width: 40px; text-align: center !important; }
  .addcol .plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px dashed var(--muted-foreground); font-weight: 700; color: var(--muted-foreground); }
  .colmenu { position: absolute; right: 16px; top: 46px; width: 200px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev-overlay); padding: 6px; display: grid; gap: 2px; z-index: 5; pointer-events: none; }
  .colmenu div { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 13px; }
  .colmenu div .ib { width: 16px; height: 16px; color: var(--primary-ink); }
  .colmenu div.hov { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
  .team { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
  .team .av { opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
  .sc-build.has-team .team .av { opacity: 1; transform: none; }
  .sc-build.has-team .team .av:nth-child(2) { transition-delay: .12s; } .sc-build.has-team .team .av:nth-child(3) { transition-delay: .24s; }
  .rolebar { margin: 0 16px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--muted); }
  .rolebar .ib { width: 18px; height: 18px; color: var(--primary-ink); }

  /* ---- scene: Ask ---- */
  .kbar { display: flex; align-items: center; gap: 10px; margin: 16px; padding: 12px 14px; border: 1.5px solid var(--primary); border-radius: 12px; background: var(--card); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 14%, transparent); font-size: 15px; min-height: 50px; }
  .kbar .ib { width: 20px; height: 20px; color: var(--primary-ink); flex: none; }
  .kbar .qt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .kbar kbd { font: 600 11px/1 "Inter", sans-serif; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; flex: none; }
  .ask-body { padding: 0 16px 16px; position: relative; min-height: 340px; }
  .ask-body > div { margin-top: 12px; }
  .ask-body > div:first-child { margin-top: 0; }
  .ask-body > .x:not(.on) { display: none; }
  .ask-body > .x.on { animation: k-fadeup .45s ease; }
  @keyframes k-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .hints { display: flex; flex-wrap: wrap; gap: 8px; }
  .hints span { font-size: 13px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--muted-foreground); background: var(--card); }
  .und { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .und small { font-size: 12px; color: var(--muted-foreground); margin-right: 4px; }
  .ans-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--grid); font-size: 14px; font-variant-numeric: tabular-nums; }
  .ans-row .av { width: 28px; height: 28px; }
  .ans-row small { color: var(--muted-foreground); font-size: 12.5px; margin-left: 6px; }
  .ans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  .ans-foot .tot { font-weight: 700; margin-right: auto; }
  .exact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--success); }
  .exact i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: block; }
  .confirm { border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--elev-card); padding: 14px; }
  .confirm h4 { font-size: 14px; margin-bottom: 8px; }
  .crow { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
  .crow:last-of-type { border-bottom: 0; }
  .crow small { color: var(--muted-foreground); font-size: 12px; }
  .confirm .btns { display: flex; gap: 8px; margin-top: 12px; }
  .donebar { display: flex; align-items: center; gap: 10px; background: var(--foreground); color: var(--background); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
  .donebar .u { margin-left: auto; font-weight: 700; text-decoration: underline; }

  /* ---- scene: sell ---- */
  .sc-sell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: center; padding: 6px; }
  @media (max-width: 600px) { .sc-sell { grid-template-columns: 1fr; justify-items: center; } .sc-sell .arrive { width: 100%; } }
  .sc-sell .phone { width: 230px; position: relative; }
  .sc-sell .phone-screen { position: relative; min-height: 400px; }
  .sc-sell .prod { grid-template-columns: 40px 1fr auto; }
  .sc-sell .prod .ph { width: 40px; height: 40px; }
  .qbtn { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; position: relative; background: var(--card); }
  .qbtn .qn { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 10px; display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
  .qbtn.has .qn { transform: scale(1); }
  .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: 14px; display: grid; gap: 8px; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -10px 30px rgb(0 0 0 / .12); }
  .sheet.on { transform: none; }
  .sheet h5 { font: 700 13px/1.2 "Plus Jakarta Sans", sans-serif; margin: 0; }
  .payopt { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; transition: border-color .2s, background-color .2s; }
  .payopt i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted-foreground); display: block; }
  .payopt.sel { border-color: var(--primary); background: var(--accent); }
  .payopt.sel i { border: 4px solid var(--primary); }
  .placed { position: absolute; inset: 0; background: var(--card); display: grid; place-items: center; text-align: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s; }
  .placed.on { opacity: 1; }
  .placed .big-ok { width: 54px; height: 54px; border-radius: 50%; background: var(--success); color: var(--success-foreground); display: grid; place-items: center; font-size: 26px; margin: 0 auto 10px; transform: scale(0); transition: transform .45s .1s cubic-bezier(.3,1.6,.5,1); }
  .placed.on .big-ok { transform: none; }
  .placed b { font: 800 16px/1.2 "Plus Jakarta Sans", sans-serif; }
  .newrow { display: none; }
  .newrow.on { display: table-row; animation: k-slidedown .5s cubic-bezier(.2,.7,.2,1); }
  .newrow.on td { animation: k-rowflash 2.2s ease; }
  @keyframes k-slidedown { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---- scene: invoice ---- */
  .sc-inv { padding: 16px; display: grid; gap: 12px; }
  .ordline { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; background: var(--card); flex-wrap: wrap; }
  .ordline .sbtn { margin-left: auto; }
  .sc-inv .inv { border: 1px solid var(--border); border-radius: 12px; background: var(--card); opacity: .25; transition: opacity .4s; }
  .sc-inv .inv.on { opacity: 1; }
  .sc-inv .inv tr.il { opacity: 0; transition: opacity .3s; }
  .sc-inv .inv.on tr.il { opacity: 1; }
  .sc-inv .inv.on tr.il:nth-child(3) { transition-delay: .15s; } .sc-inv .inv.on tr.il:nth-child(4) { transition-delay: .3s; }
  .track span { opacity: .28; transition: opacity .35s, transform .35s; }
  .track span.on { opacity: 1; }
  .track span.now { transform: scaleY(1.15); }
  .sendsheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s; width: 250px; background: var(--popover); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--elev-overlay); padding: 12px; display: grid; gap: 6px; z-index: 6; }
  .sendsheet.on { opacity: 1; transform: translate(-50%, -50%); }
  .sendsheet h5 { margin: 0 0 4px; font: 700 13px/1.2 "Plus Jakarta Sans", sans-serif; }
  .sendopt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); font-size: 13px; }
  .sendopt .ib { width: 18px; height: 18px; color: var(--primary-ink); }
  .sendopt.hov { border-color: var(--primary); background: var(--accent); }
  .invnote { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
  .invnote .ib { width: 18px; height: 18px; color: var(--primary-ink); }
  .sc-inv .stamp { top: 104px; left: 44%; right: auto; bottom: auto; opacity: 0; transform: rotate(-12deg) scale(2.2); transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
  .sc-inv .stamp.on { opacity: 1; transform: rotate(-12deg) scale(1); }

  /* ---- scene: automation ---- */
  .sc-auto { padding: 18px; display: grid; gap: 14px; }
  .sentence2 { font-size: 17px; line-height: 2.2; font-weight: 500; position: relative; }
  .slot { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 9px; border: 1.5px dashed var(--muted-foreground); color: var(--muted-foreground); font-weight: 600; line-height: 1.8; transition: all .3s; }
  .slot.set { border: 1.5px solid transparent; background: var(--primary); color: var(--primary-foreground); }
  .slot.set.soft { background: var(--accent); color: var(--accent-foreground); }
  .slot.green.set { background: var(--success); color: var(--success-foreground); }
  .ddmenu { position: absolute; left: 140px; top: 46px; width: 180px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev-overlay); padding: 6px; display: grid; gap: 4px; z-index: 5; }
  .ddmenu div { padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; }
  .ddmenu div.hov { outline: 2px solid var(--primary); outline-offset: -2px; }
  .actlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .actlist div { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: var(--card); transition: border-color .2s, background-color .2s; }
  .actlist div .ib { width: 18px; height: 18px; color: var(--primary-ink); }
  .actlist div.hov { border-color: var(--primary); background: var(--accent); }
  .actlist div.used { opacity: .45; }
  .autorow { display: grid; grid-template-columns: 1fr 140px; border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; font-size: 13.5px; }
  .autorow > span { padding: 0 12px; display: flex; align-items: center; height: 42px; }
  .runlog { display: grid; gap: 8px; font-size: 13px; }
  .runlog div { display: flex; gap: 10px; align-items: center; }
  .runlog .when { margin-left: auto; color: var(--muted-foreground); white-space: nowrap; }
  .runbadge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--success); }
  .runbadge i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: block; }
  .runbadge.live i { animation: k-pulse 1.4s ease infinite; }
  @keyframes k-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

  /* ---- scene: projects ---- */
  .sc-proj .ph-top { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .sc-proj .ph-top h4 { font-size: 16px; margin-right: auto; }
  .stg { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
  .stg th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 8px 12px; background: var(--muted); border-bottom: 1px solid var(--grid); }
  .stg td { padding: 0 12px; height: 46px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
  .stg tr.srow { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
  .stg tr.srow.on { opacity: 1; transform: none; }
  .stg td.who { min-width: 120px; }
  .who-empty { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); border: 1px dashed var(--muted-foreground); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
  .who-set { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
  .who-set .av { width: 24px; height: 24px; font-size: 10px; }
  .stg td.st2 { width: 120px; padding: 0; }
  .stg .cell { height: 46px; transition: background-color .4s, color .4s; }
  .dates.moved { color: var(--primary-ink); font-weight: 700; }
  .stagepick { position: absolute; left: 32%; top: 150px; width: 270px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev-overlay); padding: 8px; z-index: 6; display: grid; gap: 4px; }
  .stagepick h5 { margin: 2px 4px 4px; font-size: 12px; color: var(--muted-foreground); font-weight: 600; }
  .popt { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px; font-size: 13px; }
  .popt small { display: block; font-size: 11.5px; color: var(--muted-foreground); }
  .popt.busy { opacity: .55; }
  .popt.hov { background: var(--accent); }
  .popt .mach { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--primary-ink); }
  .popt .mach .ib { width: 16px; height: 16px; }
  .decision { margin: 12px 16px 16px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; font-size: 13.5px; }
  .decision .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted-foreground); }
  .chk i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--muted-foreground); display: grid; place-items: center; font-style: normal; font-size: 10px; color: transparent; transition: all .2s; }
  .chk.on i { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

  /* ---- scene: scheduling ---- */
  .sc-sched { padding: 14px; display: grid; gap: 12px; }
  .sgrid-wrap { overflow-x: auto; }
  .sgrid { display: grid; grid-template-columns: 112px repeat(6, minmax(52px, 1fr)); border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; font-size: 12px; min-width: 440px; }
  .sgrid > div { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); height: 46px; padding: 4px; position: relative; }
  .sgrid .hd { height: 30px; background: var(--muted); font-weight: 700; color: var(--muted-foreground); display: grid; place-items: center; font-size: 11.5px; }
  .sgrid .rn { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; padding-left: 8px; }
  .sgrid .rn .ib { width: 18px; height: 18px; color: var(--primary-ink); flex: none; }
  .sgrid .rn .av { width: 20px; height: 20px; font-size: 9px; flex: none; }
  .blk { position: absolute; inset: 4px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.1; opacity: 0; transform: scale(.7); transition: opacity .35s, transform .35s cubic-bezier(.3,1.5,.5,1); }
  .blk.on { opacity: 1; transform: none; }
  .blk.off { background: repeating-linear-gradient(135deg, var(--muted) 0 5px, var(--card) 5px 10px); color: var(--muted-foreground); border: 1px solid var(--border); }
  .blk.bk { background: color-mix(in srgb, var(--primary) 26%, var(--card)); color: var(--primary-ink); }
  .blk.away { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--card)) 0 5px, var(--card) 5px 10px); color: var(--primary-ink); border: 1.5px solid var(--primary); }
  .blk.sq { background: var(--primary); color: var(--primary-foreground); inset: 4px 4px 4px 50%; }
  .blk.half { inset: 4px 50% 4px 4px; }
  .sched-low { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
  .sched-low > * { flex: 1 1 220px; min-width: 0; }
  .warncard:not(.on) { display: none; }
  .warncard.on { animation: k-fadeup .45s ease; }
  .slotcard { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--card); display: grid; gap: 8px; }
  .slotcard h5 { margin: 0; font: 700 13px/1.2 "Plus Jakarta Sans", sans-serif; display: flex; align-items: center; gap: 7px; }
  .slotcard h5 .ib { width: 16px; height: 16px; color: var(--primary-ink); }
  .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .slots span { text-align: center; padding: 7px 0; border-radius: 8px; border: 1.5px solid var(--primary); color: var(--primary-ink); font-weight: 600; font-size: 12px; transition: all .3s; }
  .slots span.taken { border-color: var(--border); color: var(--muted-foreground); text-decoration: line-through; background: var(--muted); }
  .slots span.hov { box-shadow: 0 0 0 2px var(--primary); }
  .smsg { font-size: 12.5px; color: var(--muted-foreground); min-height: 2.6em; }
  .smsg b { color: var(--foreground); }
  .warncard { border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); border-radius: 12px; padding: 12px; display: grid; gap: 8px; font-size: 13px; }

  /* ---- scene: customers ---- */
  .sc-cust { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
  @media (max-width: 560px) { .sc-cust { grid-template-columns: 1fr; } }
  .srcs { display: grid; gap: 10px; padding-top: 30px; }
  .src { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; background: var(--card); box-shadow: var(--elev-card); transition: transform .7s cubic-bezier(.5,0,.3,1), opacity .6s; }
  .src .ib { width: 18px; height: 18px; color: var(--primary-ink); flex: none; }
  .src.fly { transform: translateX(130px) scale(.6); opacity: 0; }
  .srcs .sm-note { text-align: center; }
  .sc-cust .c360 { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
  .sc-cust .c-stats b { transition: color .3s; }
  .tl-i { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
  .tl-i.on { opacity: 1; transform: none; }
  .seqc { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
  .seqs { white-space: nowrap; }
  .seqs { border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; transition: border-color .3s, background-color .3s; }
  .seqs .ib { width: 16px; height: 16px; color: var(--primary-ink); flex: none; }
  .seqs.done { border-color: var(--primary); background: var(--accent); }
  .seqs.stop { opacity: .45; text-decoration: line-through; }
  .seqnote { font-weight: 600; color: var(--success); white-space: nowrap; }

  /* ---- scene: finance ---- */
  .sc-fin .exin { margin: 16px 16px 0; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--primary); border-radius: 12px; padding: 11px 14px; font-size: 15px; min-height: 48px; }
  .sc-fin .exin .ib { width: 20px; height: 20px; color: var(--primary-ink); flex: none; }
  .parsed { margin: 10px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--muted); font-size: 13px; }
  .parsed .sbtn { margin-left: auto; }
  .parsed .saved { margin-left: auto; color: var(--success); font-weight: 700; display: none; }
  .parsed.done .sbtn { display: none; } .parsed.done .saved { display: inline; }
  .sc-fin .fin { padding-top: 12px; }
  .tile b { transition: color .3s; }
  .tile.bump { box-shadow: 0 0 0 2px var(--primary); }
  .sc-fin .bar { transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .sc-fin.low .bar { transform: scaleY(.05); }
  .profit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; }
  .profit b { font: 800 20px/1 "Plus Jakarta Sans", sans-serif; color: var(--success); font-variant-numeric: tabular-nums; }
  .profit .sbtn { margin-left: auto; }

  /* ---- scene: people intelligence ---- */
  .sc-ppl { padding: 16px; display: grid; gap: 14px; }
  .cap { display: grid; gap: 10px; }
  .caprow { display: grid; grid-template-columns: 120px 1fr 92px; gap: 10px; align-items: center; font-size: 13px; }
  .caprow .who-set .av { width: 24px; height: 24px; font-size: 10px; }
  .capbar { height: 10px; border-radius: 999px; background: var(--muted); overflow: hidden; }
  .capbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width 1s cubic-bezier(.2,.7,.2,1); }
  .capbar.off i { background: repeating-linear-gradient(135deg, var(--primary) 0 4px, transparent 4px 8px); }
  .caprow small { color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; }
  .fair { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; background: var(--card); }
  .fair h5 { margin: 0; font: 700 14px/1.2 "Plus Jakarta Sans", sans-serif; display: flex; gap: 8px; align-items: center; }
  .fline { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; }
  .fline.on { opacity: 1; transform: none; }
  .fline b { font-weight: 700; }
  .fline small { color: var(--muted-foreground); }
  .leave { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; background: var(--card); font-size: 13px; }
  .leave .btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .leave .ok-note { color: var(--success); font-weight: 600; display: none; }
  .leave.done .ok-note { display: inline; } .leave.done .sbtn { display: none; }

  /* ---- scene: AI ---- */
  .sc-ai .chat { min-height: 380px; align-content: start; }
  .typing-in { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 8px 8px 16px; font-size: 13.5px; min-height: 46px; }
  .typing-in .qt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .typing-in b { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; flex: none; }
  .tstep { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13.5px; opacity: 0; transition: opacity .3s; }
  .tstep.on { opacity: 1; }
  .msg { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
  .msg.on { opacity: 1; transform: none; }

  /* more grid icons, pricing icons, chips */
  .mcard .ic svg, .pro-card .ic svg, .points .ic svg { width: 26px; height: 26px; }
  .pick .dot { width: 22px; height: 22px; }
  .built-row svg { width: 22px; height: 22px; }
  .built-row span { display: inline-flex; align-items: center; gap: 8px; }

  /* phones and small tablets: heading, then the picture, then the steps under it */
  @media (max-width: 960px) {
    .seg-grid, .seg.flip .seg-grid { gap: 0; }
    .seg-copy { display: contents; }
    .seg-copy > * { order: 1; }
    .seg-grid > .stage { order: 2; margin: 24px 0 4px; }
    .seg-copy > .steps-list, .seg-copy > .facts, .seg-copy > .works-with { order: 3; }
  }

  /* ---- v4.1 fixes from Akeeb's screenshots ---- */
  .bar-lbls { margin-top: 8px; }                              /* month names sat under the bars */
  .grid-scroll, .hk, .hcal-wrap, .sgrid-wrap, .table-box, .segbar .wrap { overflow-y: hidden; }   /* no stray up-down scrollbars */
  .blk { overflow: hidden; padding: 2px; }
  .blk.half { inset: 4px 50% 4px 4px; }
  .blk.sq { inset: 4px 4px 4px 52%; }
  html.dark .phone { background: var(--background); box-shadow: 0 0 0 1px var(--border), var(--elev-overlay); }

  /* ---- v4.2: "Built for" businesses become tiles that stand out, and lift on hover ---- */
  .built { padding-block: 44px 20px; }
  .built p { font-size: 15px; font-weight: 600; color: var(--muted-foreground); }
  .built-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  @media (max-width: 1100px) { .built-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .built-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .built-row span:last-child { grid-column: 1 / -1; } }
  .built-row span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
      padding: 20px 10px 18px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--border); box-shadow: var(--elev-card);
      font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--foreground); opacity: 1; cursor: default;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .3s, background-color .25s, color .25s; }
  .built-row span .ico { width: 34px; height: 34px; color: var(--primary-ink); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
  .built-row span:hover { transform: translateY(-6px); border-color: var(--primary); color: var(--primary-ink);
      background: color-mix(in srgb, var(--primary) 7%, var(--card)); box-shadow: var(--elev-overlay), 0 14px 30px color-mix(in srgb, var(--primary) 22%, transparent); }
  .built-row span:hover .ico { transform: scale(1.22); }

  /* phone fixes from the audit */
  @media (max-width: 600px) { .kbar kbd { display: none; } .blk { font-size: 9.5px; letter-spacing: -.01em; } }
  @media (max-width: 600px) {
    .b-wrap { padding: 0 10px 12px; }
    .sc-build .tg th { padding: 8px 7px; font-size: 11.5px; }
    .sc-build .tg td { padding: 0 7px; font-size: 12px; }
    .sc-build .tg td.st { width: 86px; padding: 0; }
    .sc-build .tg .cell { font-size: 11.5px; }
    .sc-build.has-col .newcol { max-width: 80px; padding-inline: 7px !important; }
    .sc-build .tpl-row { gap: 6px; padding: 12px 10px; }
    .tpl { padding: 9px; font-size: 12px; }
  }

/* yearly: the 12-month total crossed out, the 10-month total highlighted */
.amount .was { display: none; font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-weight: 600; font-size: 22px; color: var(--muted-foreground); text-decoration-thickness: 2px; margin-right: 8px; align-self: center; }
.plans.yearly .amount .was { display: inline; }
.plans.yearly .amount .big[data-y] { color: var(--primary); }
.plans.yearly .plan .sub { color: var(--primary-ink); font-weight: 600; }

/* ===== hero sandbox ===== */
.window.attn { animation: attn 1.4s ease; }
@keyframes attn { 0%, 100% { outline: 0 solid transparent; } 35% { outline: 4px solid color-mix(in srgb, var(--primary) 55%, transparent); } }
.sbx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 9px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 7%, var(--card)); font-size: 13px; }
.sbx-t { color: var(--muted-foreground); } .sbx-t b { color: var(--primary-ink); font-weight: 700; }
.sbx-b { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.sbx-b button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); transition: border-color .15s, color .15s, transform .15s; }
.sbx-b button:hover { border-color: var(--primary); color: var(--primary-ink); transform: translateY(-1px); }
.sbx-b button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.sbx-b button .ib { display: inline-grid; } .sbx-b button .ico { width: 14px; height: 14px; }
.sbx-b button em { font-style: normal; font-weight: 600; opacity: .75; }
.sbx-b button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.side .item.has-new::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-left: auto; }
.main-pane.special .views, .main-pane.special .hint-line { display: none; }
.sbx-tg .xcol { width: 34px; padding: 0 4px; text-align: center; }
.sbx-tg td.ed { cursor: text; } .sbx-tg td.ed:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
.cellin { width: 100%; min-width: 80px; padding: 4px 7px; font-size: 13px; }
.ownbtn, .daybtn, .delbtn { all: unset; cursor: pointer; border-radius: 8px; padding: 3px 6px; margin-left: -6px; transition: background-color .15s; }
.ownbtn:hover, .daybtn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ownbtn:focus-visible, .daybtn:focus-visible, .delbtn:focus-visible { outline: 2px solid var(--ring); }
.delbtn { margin: 0; font-size: 17px; line-height: 1; color: var(--muted-foreground); opacity: 0; padding: 3px 8px; }
.sbx-tg tr:hover .delbtn, .delbtn:focus-visible { opacity: 1; } .delbtn:hover { color: var(--destructive-ink); background: color-mix(in srgb, var(--destructive) 12%, transparent); }
@media (hover: none) { .delbtn { opacity: .7; } }
.sbx-lede { font-size: 13.5px; color: var(--muted-foreground); margin: 14px 0 12px; max-width: 62ch; }
.sbx-lede b { color: var(--foreground); }
.sbx-h { font-size: 13px; margin: 16px 0 8px; }
.sbx-rules { display: grid; gap: 7px; }
@media (min-width: 1000px) { .sbx-rules { grid-template-columns: 1fr 1fr; } }
.sbx-rule { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--grid); border-radius: 10px; font-size: 13px; background: var(--card); opacity: .62; transition: opacity .2s, border-color .2s; }
.sbx-rule.on { opacity: 1; border-color: color-mix(in srgb, var(--primary) 30%, var(--grid)); }
.sw { all: unset; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background-color .2s; }
.sw i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: transform .2s; }
.sw[aria-checked="true"] { background: var(--primary); } .sw[aria-checked="true"] i { transform: translateX(14px); }
.sw:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.slotc { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.sbx-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.sbx-log li { display: flex; align-items: center; gap: 9px; animation: logIn .3s ease; }
.sbx-log li i { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; color: var(--muted-foreground); background: var(--muted); }
.sbx-log li.auto i { color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 14%, transparent); } .sbx-log li i .ico { width: 12px; height: 12px; }
.sbx-log li em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; }
@keyframes logIn { from { opacity: 0; transform: translateY(-4px); } }
.sbx-empty { font-size: 13px; color: var(--muted-foreground); }
.sbx-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sbx-prod { border: 1px solid var(--grid); border-radius: 12px; padding: 12px; display: grid; gap: 6px; justify-items: start; font-size: 13px; background: var(--card); }
.sbx-prod .ph { width: 100%; height: 64px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 9%, var(--muted)); display: grid; place-items: center; color: var(--primary-ink); }
.sbx-prod .ph .ico { width: 26px; height: 26px; } .sbx-prod span { color: var(--muted-foreground); }
.sbx-note { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--success) 9%, transparent); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.sbx-note .btn { margin-left: auto; }
.sbx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbx-kpis div { border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.sbx-kpis small { color: var(--muted-foreground); font-size: 12px; } .sbx-kpis b { display: block; font: 800 24px "Plus Jakarta Sans", Inter, sans-serif; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sbx-shop { grid-template-columns: 1fr; } .sbx-prod .ph { height: 44px; } .sbx-t { flex-basis: 100%; } .sbx-b { margin-left: 0; } }

/* ===== automations: one rule across a whole board ===== */
.casc { display: grid; gap: 12px; }
.casc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.casc-rule { font-size: 13px; color: var(--muted-foreground); flex: 1 1 260px; } .casc-rule b { color: var(--foreground); }
.casc-count { display: flex; gap: 14px; }
.casc-count div { text-align: right; } .casc-count b { display: block; font: 800 26px/1 "Plus Jakarta Sans", Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--primary); }
.casc-count small { font-size: 11.5px; color: var(--muted-foreground); }
.casc-grid { display: grid; grid-template-columns: minmax(96px, 1.3fr) repeat(4, minmax(0, 1fr)); border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.casc-grid > div { height: 31px; display: flex; align-items: center; padding: 0 9px; border-bottom: 1px solid var(--grid); border-left: 1px solid var(--grid); white-space: nowrap; overflow: hidden; }
.casc-grid > div:nth-child(5n+1) { border-left: 0; font-weight: 600; }
.casc-grid > .hd { background: var(--muted); color: var(--muted-foreground); font-weight: 600; font-size: 11.5px; height: 28px; }
.casc-grid > .c { justify-content: center; font-weight: 600; transition: background-color .18s, color .18s; }
.casc-grid > .c.wait { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); font-weight: 500; }
.casc-grid > .c.pop { animation: cpop .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes cpop { 0% { transform: scale(.82); filter: brightness(1.35); } 100% { transform: none; filter: none; } }
.casc-grid > .c.did { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.casc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted-foreground); }
.casc-foot .btn { margin-left: auto; }
@media (max-width: 600px) { .casc-grid { grid-template-columns: 46px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .casc-grid > div { padding: 0 3px; height: 28px; } .casc-grid .nm { display: none; } .casc-grid { font-size: 10px; } .casc-count b { font-size: 21px; } }
.toast { pointer-events: none; }

/* ===== faces on owner and assignee circles ===== */
.av.face { background-size: cover; background-position: center; color: transparent; font-size: 0; box-shadow: 0 0 0 1.5px var(--card), 0 0 0 2.5px color-mix(in srgb, var(--foreground) 14%, transparent); }
.av.face + .av.face { box-shadow: 0 0 0 2px var(--card); }
.sbx-tg .av, .hcard .av { width: 30px; height: 30px; }
.statpop button.pp { display: flex; align-items: center; gap: 9px; text-align: left; background: transparent; color: var(--foreground); padding: 5px 8px; }
.statpop button.pp:hover { background: var(--muted); transform: none; }
.statpop button.pp .av { width: 28px; height: 28px; flex: none; }

/* phones: the sandbox table fits the window instead of hiding Status behind a sideways scroll.
   Due and Total drop out (they are still in Kanban/Calendar); Order, Customer, Owner and Status stay. */
@media (max-width: 600px) {
  table.sbx-tg { min-width: 0; table-layout: auto; font-size: 13px; }
  .sbx-tg th:nth-child(5), .sbx-tg td:nth-child(5), .sbx-tg th:nth-child(6), .sbx-tg td:nth-child(6) { display: none; }
  .sbx-tg th, .sbx-tg td { padding-left: 8px; padding-right: 8px; }
  .sbx-tg td.st { width: 92px; max-width: 92px; padding: 0; white-space: normal; }
  .sbx-tg td.st .cellbtn { white-space: normal; line-height: 1.15; font-size: 12px; padding: 0 6px; text-align: center; }
  .sbx-tg td:first-child { padding-right: 4px; }
  .sbx-tg td[data-f="b"] { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .sbx-tg .xcol { width: 22px; padding: 0 2px; }
  .site-head { background: color-mix(in srgb, var(--card) 97%, transparent); }
}