/* KAIRO UI v3.0 — isolated presentation layer.
   Every rule is scoped to html.kairo-v3 so the v20.10.144 baseline remains reversible. */

/* Plus Jakarta Sans, self-hosted (SIL OFL 1.1, see fonts/OFL-PlusJakartaSans.txt). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html.kairo-v3{
  --v3-ink:#173a59;
  --v3-ink-soft:#31556f;
  --v3-primary:#25b9b0;
  --v3-primary-dark:#168f8a;
  --v3-primary-soft:#e6f8f6;
  --v3-accent:#173a59;
  --v3-on-primary:#082f35;
  --v3-sky:#f1f9fb;
  --v3-sky-strong:#b8dfe9;
  --v3-gold:#dfa94a;
  --v3-gold-soft:#fff5d7;
  --v3-canvas:#f7faf9;
  --v3-surface:#fff;
  --v3-surface-subtle:#f9fcfc;
  --v3-line:#d9e9ed;
  --v3-muted:#62798a;
  --v3-danger:#c94d62;
  --v3-success:#287d68;
  --v3-container:1240px;
  --v3-page-gutter:32px;
  --v3-section-gap:24px;
  --v3-card-gap:16px;
  --v3-card-padding:20px;
  --v3-r-sm:12px;
  --v3-r-md:16px;
  --v3-r-lg:18px;
  --v3-shadow:0 8px 24px rgba(23,58,89,.055);
  --v3-shadow-hover:0 12px 30px rgba(23,58,89,.085);
}
html.kairo-v3 body{font-family:"Plus Jakarta Sans",Arial,sans-serif;color:var(--v3-ink)}
html.kairo-v3 #kairo-mobile-notif-sheet{display:none}

/* Public landing/auth moved to the isolated KAIRO UI v3.3 source below. */

/* KAIRO UI v3.4 — authenticated shell and reusable internal card system. */
html.kairo-v3 body.authenticated {
  background: var(--v3-canvas) !important;
  color: var(--v3-ink) !important;
}

/* Living Origami background (kairo.css + kairo-app.js), in the KAIRO / workspace layout colours
   and tuned to read through the gaps between cards. Kept light: no drop-shadow filters, few
   cranes on phones, paused while the tab is hidden (kairo-app.js) or with reduced motion. */
html.kairo-v3 .living-origami-bg {
  /* Softened: cranes mix the layout colours with the canvas so they never look loud. */
  --brand-primary: color-mix(in srgb, var(--v3-primary) 72%, var(--v3-canvas));
  --brand-accent: color-mix(in srgb, var(--v3-accent) 55%, var(--v3-canvas));
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--v3-primary) 14%, transparent), transparent 38%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--v3-accent) 8%, transparent), transparent 40%),
    radial-gradient(circle at 70% 92%, color-mix(in srgb, var(--v3-primary) 9%, transparent), transparent 42%),
    linear-gradient(150deg, color-mix(in srgb, var(--v3-primary) 4%, var(--v3-canvas)), color-mix(in srgb, var(--v3-accent) 4%, var(--v3-canvas)));
}

html.kairo-v3 body.saas-dark .living-origami-bg {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--v3-primary) 13%, transparent), transparent 38%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, #5b8fd6 9%, transparent), transparent 40%),
    radial-gradient(circle at 70% 92%, color-mix(in srgb, var(--v3-primary) 8%, transparent), transparent 42%),
    var(--v3-canvas);
}

html.kairo-v3 .origami-part {
  filter: none;
}

html.kairo-v3 body.authenticated .origami-drifter {
  opacity: .5 !important;
}

html.kairo-v3 body.authenticated.saas-dark .origami-drifter {
  opacity: .4 !important;
}

/* Dark mode: navy wings would vanish on the dark canvas, so they use a lighter blue. */
html.kairo-v3 body.saas-dark .living-origami-bg {
  --brand-accent: #7f9fc8;
}

@media (max-width: 760px) {
  html.kairo-v3 body.authenticated .origami-drifter {
    opacity: .4 !important;
  }

  html.kairo-v3 body.authenticated.saas-dark .origami-drifter {
    opacity: .32 !important;
  }
}

html.kairo-v3 #app-shell .header {
  background: color-mix(in srgb, var(--v3-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--v3-line) !important;
  box-shadow: none !important;
}

html.kairo-v3 #app-shell main.container {
  width: auto;
  max-width: var(--v3-container);
  padding: 30px var(--v3-page-gutter) 80px !important;
}

html.kairo-v3 #app-shell main.container > .toolbar.kairo-page-header {
  align-items: center !important;
  gap: 20px;
  margin: 0 0 22px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .page-title {
  color: var(--v3-ink) !important;
  font-size: clamp(25px, 2.5vw, 32px) !important;
  font-weight: 800;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}

html.kairo-v3 .page-sub,
html.kairo-v3 .muted {
  color: var(--v3-muted) !important;
  line-height: 1.55;
}

/* Sidebar and content use the same visual grid. */
html.kairo-v3 #saas-sidebar {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  box-shadow: 8px 0 24px rgba(23, 58, 89, .045) !important;
}

html.kairo-v3 #saas-sidebar::before {
  background: linear-gradient(180deg, var(--v3-sky), transparent) !important;
}

html.kairo-v3 .saas-side-brand img {
  display: none !important;
}

html.kairo-v3 .saas-side-brand::before {
  content: "K";
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--v3-ink);
  color: var(--v3-primary);
  font-size: 19px;
  font-weight: 800;
}

html.kairo-v3 .saas-side-brand-copy strong {
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab,
html.kairo-v3 .saas-settings-side-btn {
  min-height: 42px;
  border-radius: 12px !important;
  color: var(--v3-muted) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab:hover,
html.kairo-v3 .saas-settings-side-btn:hover {
  background: var(--v3-sky) !important;
  border-color: var(--v3-line) !important;
  box-shadow: none !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab.active,
html.kairo-v3 .saas-settings-side-btn.active {
  background: var(--v3-sky) !important;
  border-color: var(--v3-sky-strong) !important;
  box-shadow: inset 3px 0 0 var(--v3-primary) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab.active .saas-nav-icon,
html.kairo-v3 .saas-settings-side-btn.active .saas-nav-icon {
  color: var(--v3-primary-dark);
}

/* Minimized sidebar (desktop): a 76px rail where every icon keeps the exact x
   position it has when expanded, so expand/minimize only animates the rail width
   and fades the labels instead of jumping. */
@media (min-width: 901px) {
  html.kairo-v3 {
    --sidebar-mini: 96px;
    --kairo-rail-ease: cubic-bezier(.2, .7, .2, 1);
  }

  html.kairo-v3 #saas-sidebar {
    overflow: hidden;
    transition: width .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 #app-shell main.container {
    transition: margin-left .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 #app-shell .header {
    transition: left .26s var(--kairo-rail-ease), width .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar {
    width: calc(var(--sidebar-mini) - 20px);
  }

  html.kairo-v3 .saas-sidebar-nav .tab,
  html.kairo-v3 .saas-settings-side-btn {
    overflow: hidden;
    white-space: nowrap;
  }

  /* Labels fade and collapse their width instead of display:none. */
  html.kairo-v3 #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    max-width: 170px;
    opacity: 1;
    transition: opacity .18s ease .08s, max-width .26s var(--kairo-rail-ease);
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-nav-label {
    display: inline-block;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-side-brand-copy {
    display: block;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease, max-width .26s var(--kairo-rail-ease);
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-side-brand {
    padding: 4px 7px 10px;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-sidebar-nav {
    padding-right: 0;
  }

  /* Same padding as expanded, fixed rail-sized box: icon stays put, nothing is clipped. */
  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar :is(.saas-sidebar-nav .tab, .saas-settings-side-btn) {
    width: 52px;
    min-width: 52px;
    padding: 11px 12px;
    justify-content: flex-start;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .kairo-feedback-link {
    width: 52px !important;
    min-width: 52px !important;
    height: 38px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-collapse-btn {
    width: 52px;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html.kairo-v3 :is(#saas-sidebar, #app-shell main.container, #app-shell .header),
  html.kairo-v3 #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    transition: none !important;
  }
}

/* Settings > Workspace & Branding: heading + Reset above the layout colours. */
html.kairo-v3 .kairo-layout-colors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-layout-colors-title {
  color: var(--v3-ink);
  font-size: 14px;
  font-weight: 800;
}

html.kairo-v3 .kairo-layout-colors-head .page-sub {
  margin-top: 3px;
  font-size: 12px;
}

html.kairo-v3 .kairo-layout-colors-head .btn {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
}

/* Settings > Topik: rows have no price column, so they get their own 3-column grid
   (kairo.css forced the 4-column package grid and stacked the buttons). Actions sit in
   one row like Package & Harga. */
html.kairo-v3 #settings .settings-master-row.settings-topic-master-row {
  grid-template-columns: minmax(110px, .7fr) minmax(240px, 2.5fr) auto !important;
}

html.kairo-v3 #settings .settings-topic-master-row .settings-master-actions {
  flex-wrap: nowrap;
}

@media (max-width: 700px) {
  html.kairo-v3 #settings .settings-master-row.settings-topic-master-row {
    grid-template-columns: 1fr 1.4fr !important;
  }

  html.kairo-v3 #settings .settings-topic-master-row .settings-master-actions {
    flex-wrap: wrap;
  }
}

/* Accent buttons: text colour picked for contrast against the workspace accent. */
html.kairo-v3 .btn-pink {
  color: var(--kairo-on-accent, #fff) !important;
}

/* Dark mode contrast fixes (audited per menu). Light mode is unchanged. */
html.kairo-v3 body.saas-dark #app-shell .table-wrap {
  background: var(--v3-surface) !important;
}

html.kairo-v3 body.saas-dark #app-shell .customer-db-name-btn {
  color: color-mix(in srgb, var(--v3-primary) 55%, #fff) !important;
}

html.kairo-v3 body.saas-dark #app-shell .btn-gold {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

/* Row hover: kairo.css paints the hovered <tr> near-white (also in dark) and only gives the
   cells a 3.5% overlay, so light text disappeared. Dark mode uses one solid, dark highlight. */
html.kairo-v3 body.saas-dark #app-shell table tbody tr:hover {
  background: transparent !important;
}

html.kairo-v3 body.saas-dark #app-shell #dashboard table tbody tr:nth-child(n):hover > td,
html.kairo-v3 body.saas-dark #app-shell table tbody tr:nth-child(n):hover > td {
  background: var(--v3-sky) !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(.sh-select-trigger, .sh-select-label, .sh-select-option) {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .sh-select-trigger.placeholder,
html.kairo-v3 body.saas-dark #app-shell .sh-select-trigger.placeholder .sh-select-label {
  color: var(--v3-muted) !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(.sh-select-option:hover, .sh-select-option:focus-visible, .sh-select-option.selected) {
  background: var(--v3-sky) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .notice {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(#tx-total, .total-box, .total-box strong, .customer-selected-note) {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .shift-stat-value {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-up {
  color: #7fd6a8 !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-down {
  color: #ff9aa5 !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-flat {
  color: var(--v3-muted) !important;
}

html.kairo-v3 body.saas-dark #close-shift-btn:not(:disabled) {
  background: rgba(229, 72, 77, .16) !important;
  border-color: rgba(229, 72, 77, .42) !important;
  color: #ffa3ab !important;
}

html.kairo-v3 body.saas-dark #kairo-v3-dashboard-head small {
  color: var(--v3-primary);
}

html.kairo-v3 body.saas-dark #app-shell #saas-workspace-pill {
  background: var(--v3-surface-subtle) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill :is(strong, small) {
  color: inherit !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill small {
  opacity: .82;
}

/* Light/dark switch: a short whole-page cross-fade (View Transitions API). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

/* Header notifications (bell next to the dark-mode toggle). */
html.kairo-v3 .kairo-notif {
  position: relative;
  display: flex;
}

html.kairo-v3 .kairo-notif-btn {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--v3-line);
  border-radius: 11px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  cursor: pointer;
}

html.kairo-v3 .kairo-notif-btn:hover,
html.kairo-v3 .kairo-notif-btn[aria-expanded="true"] {
  background: var(--v3-sky);
}

html.kairo-v3 .kairo-notif-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

html.kairo-v3 .kairo-notif-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--v3-surface);
  border-radius: 50%;
  background: #e5484d;
}

html.kairo-v3 .kairo-notif-dot[hidden] {
  display: none;
}

html.kairo-v3 .kairo-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: min(330px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-md);
  background: var(--v3-surface);
  box-shadow: 0 18px 44px rgba(13, 30, 45, .18);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-notif-panel[hidden] {
  display: none;
}

html.kairo-v3 .kairo-notif-head {
  display: grid;
  gap: 2px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-notif-head strong {
  font-size: 14px;
}

html.kairo-v3 .kairo-notif-head span,
html.kairo-v3 .kairo-notif-empty {
  color: var(--v3-muted);
  font-size: 12px;
}

html.kairo-v3 .kairo-notif-list {
  display: grid;
  max-height: 300px;
  overflow: auto;
  padding: 6px 0;
}

html.kairo-v3 .kairo-notif-empty {
  padding: 14px 4px;
  text-align: center;
}

html.kairo-v3 .kairo-notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 10px;
}

html.kairo-v3 .kairo-notif-item + .kairo-notif-item {
  border-top: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-notif-item div {
  display: grid;
  min-width: 0;
}

html.kairo-v3 .kairo-notif-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-notif-item span {
  color: var(--v3-muted);
  font-size: 11px;
}

html.kairo-v3 .kairo-notif-item em {
  flex: none;
  color: var(--v3-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

html.kairo-v3 .kairo-notif-item.is-urgent em {
  color: #e5484d;
}

html.kairo-v3 body.saas-dark .kairo-notif-item.is-urgent em {
  color: #ff7d82;
}

html.kairo-v3 .kairo-notif-open {
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  background: var(--v3-sky);
  color: var(--v3-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Page toolbar: the period filter and Export Excel only apply to Dashboard,
   Performance and Withdraw. Orders, Customer Database, Promo, Petty Cash and
   Settings keep just Refresh. Plan-independent, so it applies to every package. */
html.kairo-v3 #app-shell main.container:has(> section.section.active:is(#input, #customers, #promo, #cash, #settings)) > .toolbar :is(#period-group, #custom-range, .btn[onclick^="exportExcel"]) {
  display: none !important;
}

/* Page enter animation (kairo.css sectionIn) used fill-mode "both", so a finished page kept a
   transform and trapped every position:fixed child inside it (e.g. the mobile Orders tool menu
   opened ~1,400px below the screen). Keep the entrance, drop the leftover transform. */
html.kairo-v3 #app-shell .section.active {
  animation-fill-mode: backwards;
}

/* Orders "Manual / Autofill" picker: on phones too it drops down right under its button, like
   desktop (it used to be a sheet fixed above the bottom nav, far from the button). */
html.kairo-v3 #input .orders-tool-item { touch-action: manipulation; }
@media (max-width: 700px) {
  html.kairo-v3 #input .orders-tool-menu { width: min(360px, calc(100vw - 56px)); }
}

/* Alert pop-ups (showToast): stack fixed at the top right so it stays in view while scrolling. */
html.kairo-v3 .kairo-toast-stack {
  position: fixed;
  top: calc(var(--kairo-toast-top, 16px) + env(safe-area-inset-top));
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

html.kairo-v3 .kairo-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  box-shadow: 0 12px 32px rgba(15, 35, 55, .16);
  pointer-events: auto;
  animation: kairo-toast-in .22s cubic-bezier(.2, .7, .2, 1);
  transition: opacity .2s ease, transform .2s ease;
}

html.kairo-v3 .kairo-toast.is-leaving {
  opacity: 0;
  transform: translateX(16px);
}

@keyframes kairo-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

html.kairo-v3 .kairo-toast-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kairo-toast.is-success .kairo-toast-icon { color: #0f7b5f; }
html.kairo-v3 .kairo-toast.is-info .kairo-toast-icon { color: var(--v3-ink); }
html.kairo-v3 .kairo-toast.is-warning .kairo-toast-icon { color: #a15c07; }
html.kairo-v3 .kairo-toast.is-error .kairo-toast-icon { color: #c8323a; }

html.kairo-v3 body.saas-dark .kairo-toast {
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

html.kairo-v3 body.saas-dark .kairo-toast.is-success .kairo-toast-icon { color: #4fd1a5; }
html.kairo-v3 body.saas-dark .kairo-toast.is-warning .kairo-toast-icon { color: #f5b83d; }
html.kairo-v3 body.saas-dark .kairo-toast.is-error .kairo-toast-icon { color: #ff7d82; }

html.kairo-v3 .kairo-toast-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

html.kairo-v3 .kairo-toast-copy strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

html.kairo-v3 .kairo-toast-copy span {
  color: var(--v3-ink-soft);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html.kairo-v3 .kairo-toast-close {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -2px 0 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v3-muted);
  cursor: pointer;
}

html.kairo-v3 .kairo-toast-close:hover,
html.kairo-v3 .kairo-toast-close:focus-visible {
  background: var(--v3-sky);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-toast-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Petty Cash: shared date filter above "Riwayat Pengeluaran" and "Riwayat Pemasukan". */
html.kairo-v3 .cash-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

html.kairo-v3 .cash-filter-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.kairo-v3 .cash-filter-copy strong {
  color: var(--v3-ink);
  font-size: 13px;
}

html.kairo-v3 .cash-filter-copy small {
  color: var(--v3-muted);
  font-size: 11px;
  font-weight: 700;
}

html.kairo-v3 .cash-filter-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

html.kairo-v3 .cash-filter-controls .history-filter-select {
  flex: 0 0 auto;
  min-width: 180px;
}

html.kairo-v3 .cash-filter-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .cash-filter-custom[hidden] {
  display: none;
}

html.kairo-v3 .cash-filter-custom span {
  color: var(--v3-muted);
  font-size: 12px;
}

html.kairo-v3 .cash-filter-custom .history-filter-date {
  flex: 0 0 auto;
  width: 150px;
}

@media (max-width: 640px) {
  html.kairo-v3 .cash-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  html.kairo-v3 .cash-filter-controls,
  html.kairo-v3 .cash-filter-controls .history-filter-select {
    width: 100%;
  }

  html.kairo-v3 .cash-filter-custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
  }

  html.kairo-v3 .cash-filter-custom .history-filter-date {
    width: 100%;
    min-width: 0;
  }
}

/* Date fields next to the history/petty-cash filter selects: kairo.css gives them a near-white
   fill with no dark-mode rule, so their light text was unreadable in dark mode. */
html.kairo-v3 body.saas-dark .history-filter-date {
  border-color: var(--v3-line);
  background: var(--v3-surface);
  color: var(--v3-ink);
  color-scheme: dark;
}

/* Refresh / Export Excel: SVG icons instead of glyphs (iOS draws ⬇ as an emoji). */
html.kairo-v3 #app-shell main.container > .toolbar .btn:is(.kairo-refresh-btn, [onclick^="exportExcel"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

html.kairo-v3 .kairo-btn-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kairo-refresh-btn.is-refreshing {
  cursor: progress;
  opacity: .8;
}

html.kairo-v3 .kairo-refresh-btn.is-refreshing .kairo-btn-icon {
  animation: kairo-spin .8s linear infinite;
}

@keyframes kairo-spin {
  to { transform: rotate(360deg); }
}

html.kairo-v3 .saas-collapse-btn {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  box-shadow: none !important;
  color: var(--v3-ink) !important;
}

/* Base, information and list cards share one source of truth. */
html.kairo-v3 #app-shell .card,
html.kairo-v3 #app-shell .kpi {
  box-sizing: border-box;
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: var(--v3-shadow) !important;
}

html.kairo-v3 #app-shell .card {
  padding: var(--v3-card-padding) !important;
}

html.kairo-v3 #app-shell .card-title {
  color: var(--v3-ink) !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
}

html.kairo-v3 #app-shell .kairo-list-card,
html.kairo-v3 #app-shell .kairo-information-card {
  overflow: hidden;
}

/* Dashboard page header: context left, bounded actions right. */
html.kairo-v3 #kairo-v3-dashboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0 0 var(--v3-section-gap);
  padding: 16px 22px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-lg);
  background: var(--v3-sky);
}

html.kairo-v3 #kairo-v3-dashboard-head small {
  color: var(--v3-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

html.kairo-v3 #kairo-v3-dashboard-head h2 {
  margin: 4px 0 3px;
  color: var(--v3-ink);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

html.kairo-v3 #kairo-v3-dashboard-head p {
  margin: 0;
  color: var(--v3-muted);
  font-size: 11px;
}

html.kairo-v3 .kairo-live-clock {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 128px;
  padding: 8px 14px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
}

html.kairo-v3 .kairo-live-clock strong {
  color: var(--v3-ink);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

html.kairo-v3 .kairo-live-clock span {
  color: var(--v3-muted);
  font-size: 11px;
  font-weight: 700;
}






/* Stat cards (compact): icon on the left, label + value stacked beside it. */
html.kairo-v3 #dashboard .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: var(--v3-section-gap);
}

/* Seller template adds a Profit card (5 cards): three on top, two wider below. */
@media (min-width: 1241px) {
  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid > .kpi {
    grid-column: span 2;
  }

  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid > .kpi:nth-child(n + 4) {
    grid-column: span 3;
  }
}

html.kairo-v3 #dashboard .kpi {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  padding: 14px 16px !important;
  overflow: hidden;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}

html.kairo-v3 #dashboard .kpi > .kairo-stat-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html.kairo-v3 #dashboard .kpi > :not(.kairo-stat-icon) {
  grid-column: 2;
  min-width: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-label {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-value {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  letter-spacing: -.03em;
}

html.kairo-v3 #dashboard .kpi .kpi-eye {
  width: 24px;
  height: 24px;
  margin: -4px -4px -4px 0;
}

html.kairo-v3 #dashboard .kpi .kpi-eye svg {
  width: 14px;
  height: 14px;
}

html.kairo-v3 #dashboard .kpi::before {
  display: none !important;
}

html.kairo-v3 .kairo-stat-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--v3-primary-soft);
  color: var(--v3-primary-dark);
}

html.kairo-v3 .kairo-stat-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kpi[data-v3-tone="gold"] .kairo-stat-icon {
  background: var(--v3-gold-soft);
  color: #8a6421;
}

html.kairo-v3 .kpi[data-v3-tone="sky"] .kairo-stat-icon {
  background: var(--v3-sky);
  color: var(--v3-ink-soft);
}

html.kairo-v3 .kpi-head {
  align-items: center;
  min-width: 0;
}

html.kairo-v3 .kpi-label {
  color: var(--v3-muted) !important;
  font-size: 10px !important;
  font-weight: 750;
  line-height: 1.35;
}

html.kairo-v3 .kpi-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--v3-ink) !important;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
}

html.kairo-v3 .kpi-eye {
  width: 28px;
  height: 28px;
  border-color: var(--v3-line) !important;
  background: var(--v3-surface) !important;
  color: var(--v3-muted) !important;
}

/* Content grids and operational list panels. */
html.kairo-v3 #dashboard > .shift-card,
html.kairo-v3 #dashboard > #transaction-history-card,
html.kairo-v3 #dashboard > #seller-dashboard-history-card,
html.kairo-v3 #dashboard > #seller-dashboard-alert-row {
  margin-top: var(--v3-section-gap) !important;
}

/* Open Store card: controls + session stats on the left, Riwayat Open Store on the right.
   Same markup and IDs as before (kairo-app.js keeps updating them); layout only. */
/* Plain block (not the column flex-wrap from kairo.css): Safari stretched the
   buttons behind the stats with the flex version. */
html.kairo-v3 #dashboard > .shift-card .shift-top {
  display: block;
  align-self: start;
}

html.kairo-v3 #dashboard > .shift-card .shift-actions {
  display: grid;
  width: 100%;
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px;
}

html.kairo-v3 #dashboard > .shift-card .shift-actions .btn {
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  align-self: start;
}

html.kairo-v3 #dashboard > .shift-card .shift-stat {
  padding: 11px 14px;
}

html.kairo-v3 #dashboard > .shift-card .shift-stat-label {
  font-size: 11px;
}

html.kairo-v3 #dashboard > .shift-card .shift-history-head .card-title {
  font-size: 15px !important;
}

html.kairo-v3 #dashboard > .shift-card .shift-history :is(th, td) {
  text-align: center;
  white-space: nowrap;
}

html.kairo-v3 #dashboard > .shift-card .shift-history td.empty {
  white-space: normal;
}

@media (min-width: 901px) {
  html.kairo-v3 #dashboard > .shift-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }

  /* Explicit lines: left column = controls (row 1) then stats (row 2); history spans both. */
  html.kairo-v3 #dashboard > .shift-card .shift-top {
    grid-column: 1;
    grid-row: 1;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-grid {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* History never sets the card height: height:0 + min-height:100% makes it fill
     exactly the left column (bottom aligned with Durasi); extra rows scroll inside. */
  html.kairo-v3 #dashboard > .shift-card .shift-history {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    height: 0;
    min-height: 100%;
    margin-top: 0;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
}

/* Mobile: each Riwayat Open Store row becomes a card.
   Omzet ........ Status
   Mulai          Tutup
   Durasi         Transaksi
   [Hapus] */
@media (max-width: 700px) {
  html.kairo-v3 #dashboard > .shift-card .shift-history .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent !important;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history table {
    display: block;
    min-width: 0;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history thead {
    display: none;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody {
    display: grid;
    gap: 10px;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody tr {
    display: grid;
    padding: 12px 14px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-r-sm);
    background: var(--v3-surface);
    grid-template-areas:
      "omzet status"
      "mulai tutup"
      "durasi trx"
      "aksi aksi";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody tr.shift-row-active {
    border-color: var(--v3-primary);
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    text-align: left;
    white-space: normal;
  }

  /* Beats kairo.css cell, zebra and active-row backgrounds so each card has one surface. */
  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody tr:nth-child(n) td {
    background: transparent !important;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4))::before {
    display: block;
    margin-bottom: 2px;
    color: var(--v3-muted);
    font-size: 11px;
    font-weight: 600;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(1) { grid-area: mulai; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(1)::before { content: "Mulai"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(2) { grid-area: tutup; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(2)::before { content: "Tutup"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(3) { grid-area: durasi; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(3)::before { content: "Durasi"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(4) { grid-area: trx; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(4)::before { content: "Transaksi"; }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(5) {
    grid-area: omzet;
    align-self: center;
    font-size: 16px;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(6) {
    grid-area: status;
    align-self: center;
    justify-self: end;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(7) {
    grid-area: aksi;
    padding-top: 10px;
    border-top: 1px solid var(--v3-line);
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(7) .shift-delete-btn {
    width: 100%;
    min-height: 34px;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td.empty {
    grid-column: 1 / -1;
    padding: 10px 0;
    color: var(--v3-muted);
    text-align: center;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td.empty::before {
    content: none;
  }
}

/* Riwayat Transaksi: compact 7-column table. Qty, Topic, Add On, Tip and
   Pembayaran stay in the DOM (kairo-app.js renders 12 cells) and move to the
   Detail dialog opened from the Aksi column (see kairo-v3.js). */
html.kairo-v3 #transaction-history-card .history-table-wrap table {
  width: 100%;
  min-width: 720px;
}

html.kairo-v3 #transaction-history-card .history-table-wrap :is(th, td):is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(11)) {
  display: none;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap thead th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--v3-line);
  background: var(--v3-surface-subtle) !important;
  color: var(--v3-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--v3-line);
  color: var(--v3-ink);
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(1),
html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(2) {
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(3) {
  font-weight: 650;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(5) .badge {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

/* Every visible column is centred, header and content alike. */
html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(thead th, tbody td) {
  text-align: center;
}

html.kairo-v3 #transaction-history-card .history-table-wrap .reading-status-wrap {
  justify-content: center;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(th, td):nth-child(10) {
  white-space: nowrap;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(th, td):nth-child(12) {
  width: 1%;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) > div {
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 6px !important;
}

/* Original Struk / Hapus buttons stay in the row for kairo-app.js; the Aksi menu clicks them. */
html.kairo-v3 #transaction-history-card .history-table-wrap .kairo-tx-original-action {
  display: none !important;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) button {
  min-height: 30px;
  padding: 0 10px !important;
  border-radius: 9px;
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:hover td {
  background: var(--v3-sky);
}

html.kairo-v3 #transaction-history-card .history-table-wrap td.empty {
  padding: 22px 14px;
  color: var(--v3-muted);
  text-align: center;
}

/* Mobile: each history row becomes a card.
   name ......... total
   date · start   status
   paket
   [Detail] [Struk] [Hapus / Cancel] */
@media (max-width: 700px) {
  html.kairo-v3 #transaction-history-card .history-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent !important;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap table {
    display: block;
    min-width: 0;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap thead {
    display: none;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr {
    display: grid;
    padding: 12px 14px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-r-sm);
    background: var(--v3-surface);
    grid-template-areas:
      "name name total"
      "date start status"
      "paket paket paket"
      "aksi aksi aksi";
    grid-template-columns: max-content minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:hover td {
    background: transparent;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  /* Beats kairo.css zebra rows (tr:nth-child(2n) td) so cards keep one surface. */
  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody tr:nth-child(n) td {
    background: transparent !important;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(11)) {
    display: none;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(1) {
    grid-area: date;
    color: var(--v3-muted);
    font-size: 12px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(2) {
    grid-area: start;
    color: var(--v3-muted);
    font-size: 12px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(2)::before {
    content: "· ";
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(3) {
    grid-area: name;
    overflow: hidden;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(4) {
    grid-area: status;
    justify-self: end;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(5) {
    grid-area: paket;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(5) .badge {
    max-width: 100%;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td:nth-child(10) {
    grid-area: total;
    justify-self: end;
    font-size: 14px;
    text-align: right;
  }

  html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap tbody td:nth-child(12) {
    width: auto;
    grid-area: aksi;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--v3-line);
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) button {
    min-height: 34px;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td.empty {
    grid-column: 1 / -1;
    padding: 10px 0;
  }
}

html.kairo-v3 :is(.kairo-tx-detail-btn, .kairo-tx-menu-btn) {
  border: 1px solid var(--v3-line);
  background: var(--v3-surface);
  color: var(--v3-ink);
  cursor: pointer;
}

html.kairo-v3 :is(.kairo-tx-detail-btn, .kairo-tx-menu-btn):hover,
html.kairo-v3 .kairo-tx-menu-btn[aria-expanded="true"] {
  border-color: var(--v3-sky-strong);
  background: var(--v3-sky);
}

html.kairo-v3 .kairo-tx-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

html.kairo-v3 .kairo-tx-menu-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

html.kairo-v3 .kairo-tx-menu {
  position: fixed;
  z-index: 100001;
  display: grid;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
  box-shadow: 0 16px 40px rgba(13, 30, 45, .18);
}

html.kairo-v3 .kairo-tx-menu[hidden] {
  display: none;
}

html.kairo-v3 .kairo-tx-menu button {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v3-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

html.kairo-v3 .kairo-tx-menu button:is(:hover, :focus-visible) {
  background: var(--v3-sky);
  outline: none;
}

html.kairo-v3 .kairo-tx-menu button.is-danger {
  color: var(--v3-danger);
}

/* Detail dialog for a history row. */
html.kairo-v3 .kairo-tx-detail {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  padding: 16px;
  place-items: center;
}

html.kairo-v3 .kairo-tx-detail[hidden] {
  display: none;
}

html.kairo-v3 .kairo-tx-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(13, 30, 45, .48);
  cursor: default;
}

html.kairo-v3 .kairo-tx-detail-card {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-lg);
  background: var(--v3-surface);
  box-shadow: 0 24px 64px rgba(13, 30, 45, .22);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-tx-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--v3-line);
  border-radius: 9px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

html.kairo-v3 .kairo-tx-detail-card h3 {
  margin: 0 40px 4px 0;
  font-size: 17px;
  font-weight: 800;
}

html.kairo-v3 .kairo-tx-detail-card > p {
  margin: 0 0 16px;
  color: var(--v3-muted);
  font-size: 13px;
}

html.kairo-v3 .kairo-tx-detail-card dl {
  display: grid;
  margin: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
}

html.kairo-v3 .kairo-tx-detail-card :is(dt, dd) {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--v3-line);
  font-size: 13px;
  line-height: 1.45;
}

html.kairo-v3 .kairo-tx-detail-card dt {
  padding-right: 18px;
  color: var(--v3-muted);
  font-weight: 600;
}

html.kairo-v3 .kairo-tx-detail-card dd {
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

html.kairo-v3 #dashboard .seller-dashboard-alert-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v3-card-gap);
  align-items: stretch;
}

html.kairo-v3 #dashboard .seller-dashboard-alert-row > .card {
  height: 100%;
  margin: 0 !important;
}

html.kairo-v3 #dashboard .seller-expiry-row,
html.kairo-v3 #dashboard .seller-outstanding-row,
html.kairo-v3 #dashboard .seller-history-card {
  border-color: var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface-subtle);
}

html.kairo-v3 #dashboard .seller-expiry-list,
html.kairo-v3 #dashboard .seller-outstanding-list,
html.kairo-v3 #dashboard .seller-history-list {
  gap: 8px;
}

html.kairo-v3 #dashboard .seller-dashboard-history-head,
html.kairo-v3 #dashboard .seller-expiry-head,
html.kairo-v3 #dashboard .seller-outstanding-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
  background: var(--v3-surface);
}

html.kairo-v3 table thead th {
  background: var(--v3-sky) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 table tbody td {
  border-color: var(--v3-line) !important;
}

html.kairo-v3 .btn,
html.kairo-v3 .period-btn {
  border-radius: var(--v3-r-sm) !important;
}

html.kairo-v3 .btn-green,
html.kairo-v3 .period-btn.active {
  background: var(--v3-primary) !important;
  border-color: var(--v3-primary) !important;
  color: var(--v3-on-primary) !important;
}

html.kairo-v3 .btn-gold {
  background: var(--v3-gold-soft) !important;
  border-color: #efd68d !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .btn-light,
html.kairo-v3 .period-btn:not(.active) {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .input,
html.kairo-v3 .control,
html.kairo-v3 select,
html.kairo-v3 textarea {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  border-radius: var(--v3-r-sm) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .input:focus,
html.kairo-v3 .control:focus,
html.kairo-v3 select:focus,
html.kairo-v3 textarea:focus {
  outline: 0 !important;
  border-color: var(--v3-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-primary) 17%, transparent) !important;
}

html.kairo-v3 .notice {
  border: 1px solid color-mix(in srgb, var(--v3-gold) 30%, var(--v3-line)) !important;
  border-radius: var(--v3-r-sm) !important;
  background: var(--v3-gold-soft) !important;
  color: #765919 !important;
}

/* Existing operational pages consume the same foundation without layout rewrites. */
html.kairo-v3 #performance .performance-intro {
  background: var(--v3-sky) !important;
  border-color: var(--v3-sky-strong) !important;
}

html.kairo-v3 .chart-wrap {
  padding: 8px;
  border-radius: var(--v3-r-md);
  background: var(--v3-surface-subtle);
}

html.kairo-v3 #input > .card {
  max-width: 1080px;
  margin-inline: auto;
}

html.kairo-v3 .modal-card {
  border-color: var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: 0 24px 60px rgba(23, 58, 89, .18) !important;
}

/* Dark mode keeps the same hierarchy and role mapping. */
html.kairo-v3 body.saas-dark {
  --v3-ink:#edf5f8;
  --v3-ink-soft:#c5d8e2;
  --v3-canvas:#0e1926;
  --v3-surface:#142436;
  --v3-surface-subtle:#182b3f;
  --v3-line:#2a4156;
  --v3-muted:#aabcc9;
  --v3-primary-soft:#153d40;
  --v3-sky:#172f42;
  --v3-sky-strong:#315a70;
  --v3-gold-soft:#3a311c;
  --v3-shadow:0 8px 24px rgba(0,0,0,.16);
  background: var(--v3-canvas) !important;
}

html.kairo-v3 body.saas-dark #saas-sidebar,
html.kairo-v3 body.saas-dark #app-shell .header {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
}

html.kairo-v3 body.saas-dark .saas-sidebar-nav .tab.active,
html.kairo-v3 body.saas-dark .saas-settings-side-btn.active {
  background: var(--v3-sky) !important;
  border-color: var(--v3-sky-strong) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark .seller-expiry-row,
html.kairo-v3 body.saas-dark .seller-outstanding-row,
html.kairo-v3 body.saas-dark .seller-history-card {
  background: var(--v3-surface-subtle) !important;
  border-color: var(--v3-line) !important;
}

/* Seller App Premium, dark mode: status colours lifted so they pass WCAG AA on the dark cards. */
html.kairo-v3 body.saas-dark .seller-expiry-badge.is-active,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-active {
  color: #6fd9bd;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-soon,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-soon {
  color: #e7c77f;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-urgent,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-urgent {
  color: #f4a77c;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-expired,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-expired,
html.kairo-v3 body.saas-dark .seller-outstanding-money strong {
  color: #f59aa2;
}

html.kairo-v3 body.saas-dark .seller-settings-db-status {
  background: color-mix(in srgb, var(--v3-primary) 16%, transparent);
  color: #7fe0d9;
}

/* Seller primary buttons use the same dark ink on teal as .btn-green (white on teal is ~2.4:1). */
html.kairo-v3 body.seller-app-premium .seller-choice.active,
html.kairo-v3 body.seller-app-premium .seller-selection button,
html.kairo-v3 body.seller-app-premium .seller-save-btn,
html.kairo-v3 body.seller-app-premium .seller-add-product-btn,
html.kairo-v3 body.seller-app-premium .seller-add-product-save,
html.kairo-v3 body.seller-app-premium .seller-setting-save,
html.kairo-v3 body.seller-app-premium .seller-settings-category-tabs button.active {
  color: var(--v3-on-primary);
}

/* Customer history dialog: kairo.css darkens the stat boxes but left the contact boxes white;
   give them the same dark box as the stats beneath them. */
html.kairo-v3 body.saas-dark .customer-contact-item {
  background: #292e35 !important;
  border-color: #3e4651 !important;
}

html.kairo-v3 body.saas-dark .customer-contact-item span {
  color: #cdd5df;
}

html.kairo-v3 body.saas-dark .customer-contact-item strong {
  color: #fff;
}

@media (max-width: 1120px) {
  html.kairo-v3 {
    --v3-page-gutter: 24px;
  }
}

/* Four compact stat cards in a row only fit when the large values stay on one line. */
@media (max-width: 1240px) {
  html.kairo-v3 #dashboard .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* An odd last card (seller: 5 cards) takes the full row instead of sitting alone. */
  html.kairo-v3 #dashboard .kpi-grid > .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  html.kairo-v3 {
    --v3-page-gutter: 16px;
    --v3-section-gap: 18px;
    --v3-card-gap: 12px;
    --v3-card-padding: 17px;
  }

  html.kairo-v3 #app-shell main.container {
    max-width: none;
    padding: 20px var(--v3-page-gutter) 112px !important;
  }

  html.kairo-v3 #app-shell main.container > .toolbar.kairo-page-header {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
  }

  html.kairo-v3 #kairo-v3-dashboard-head {
    gap: 18px;
    padding: 19px;
  }

  html.kairo-v3 #dashboard .seller-dashboard-alert-row,
  html.kairo-v3 .platform-analytics-grid,
  html.kairo-v3 .grid-main,
  html.kairo-v3 .grid-2,
  html.kairo-v3 .withdraw-history-grid {
    grid-template-columns: 1fr !important;
  }

  html.kairo-v3 #dashboard .seller-dashboard-alert-row > .card {
    height: auto;
  }
}

@media (max-width: 520px) {
  html.kairo-v3 #kairo-v3-dashboard-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html.kairo-v3 .kairo-live-clock {
    justify-items: start;
    justify-self: start;
  }

  /* Phone: icon beside the label, value gets the full card width so it never wraps. */
  html.kairo-v3 #dashboard .kpi {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px !important;
    column-gap: 8px;
    row-gap: 6px;
  }

  html.kairo-v3 #dashboard .kpi > .kairo-stat-icon {
    grid-row: 1;
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  html.kairo-v3 #dashboard .kpi .kairo-stat-icon svg {
    width: 15px;
    height: 15px;
  }

  html.kairo-v3 #dashboard .kpi > .kpi-value {
    grid-column: 1 / -1;
    font-size: 17px !important;
  }
}

@media (max-width: 900px) {
  /* Notifications sheet (bottom nav, 4th button): opens like the More sheet. */
  html.kairo-v3 #kairo-mobile-notif-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 121;
    pointer-events: none;
    visibility: hidden;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open {
    pointer-events: auto;
    visibility: visible;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open .kairo-mobile-more-backdrop {
    opacity: 1;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open .kairo-mobile-more-panel {
    transform: none;
    opacity: 1;
  }

  html.kairo-v3 .kairo-mobile-notif-panel .kairo-notif-list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    margin-bottom: 8px;
  }

  html.kairo-v3 .kairo-mobile-notif-panel .kairo-notif-open {
    min-height: 42px;
  }

  /* The centre Orders button keeps its gradient when Orders is the open page
     (kairo.css paints every active nav button with a pale fill). */
  html.kairo-v3 #saas-mobile-bottom .kairo-mobile-orders-main.active {
    background: linear-gradient(155deg, color-mix(in srgb, var(--brand-accent) 92%, #fff), var(--brand-primary)) !important;
    color: #fff !important;
  }

  html.kairo-v3 .kairo-mobile-notif-icon {
    position: relative;
  }

  html.kairo-v3 .kairo-mobile-notif-icon .kairo-notif-dot {
    top: -2px;
    right: -3px;
    border-color: var(--v3-surface);
  }

  /* Toolbar: period filter, custom dates, Refresh and Export share one height and type size. */
  html.kairo-v3 #app-shell main.container > .toolbar .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #period-group {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #custom-range.show {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  html.kairo-v3 #app-shell main.container > .toolbar :is(.period-btn, .btn, #custom-range .control) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    white-space: normal;
    text-align: center;
  }

  html.kairo-v3 #app-shell main.container > .toolbar .btn {
    font-size: 13px !important;
  }

  /* Pages where Refresh is alone get a full-width button. */
  html.kairo-v3 #app-shell main.container:has(> section.section.active:is(#input, #customers, #promo, #cash, #settings)) > .toolbar .kairo-refresh-btn,
  html.kairo-v3 body.kairo-mobile-history #app-shell main.container > .toolbar .kairo-refresh-btn {
    grid-column: 1 / -1;
  }

  /* History (bottom nav): the Dashboard page showing only the transaction history,
     which in turn is left out of the mobile Dashboard. */
  html.kairo-v3 body:not(.kairo-mobile-history) #dashboard > :is(#transaction-history-card, #seller-dashboard-history-card) {
    display: none !important;
  }

  html.kairo-v3 body.kairo-mobile-history #dashboard > :not(#transaction-history-card, #seller-dashboard-history-card) {
    display: none !important;
  }

  html.kairo-v3 body.kairo-mobile-history #app-shell main.container > .toolbar :is(#period-group, #custom-range, .btn[onclick^="exportExcel"]) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 *,
  html.kairo-v3 *::before,
  html.kairo-v3 *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* KAIRO UI v3.5 — single-source public landing adapted from selected component structures.
   All public styles are scoped to #kairo-entry so authenticated screens remain untouched. */
html.kairo-v3 {
  --kairo-delft: #173a59;
  --kairo-delft-soft: #31556f;
  --kairo-turquoise: #25b9b0;
  --kairo-turquoise-dark: #168f8a;
  --kairo-sky-050: #f3fafb;
  --kairo-sky-100: #dceff4;
  --kairo-sky-200: #b8dfe9;
  --kairo-gold: #dfa94a;
  --kairo-gold-050: #fff5d7;
  --kairo-warm-050: #fff9e9;
  --kairo-off-white: #fbfcf8;
  --kairo-white: #ffffff;
  --kairo-entry-line: #d9e9ed;
  --kairo-entry-muted: #62798a;
  --kairo-entry-shadow: 0 24px 64px rgba(23, 58, 89, .12);
  --kairo-entry-shadow-soft: 0 14px 36px rgba(23, 58, 89, .08);
  --kairo-entry-container: 1180px;
  scroll-behavior: smooth;
}

html.kairo-v3 body.auth-locked {
  background: var(--kairo-off-white) !important;
}

html.kairo-v3 body.authenticated #kairo-entry {
  display: none;
}

html.kairo-v3 body.auth-locked #kairo-entry {
  display: block;
}

/* Restore landing content hidden by kairo.css auth-locked header/main rule. */
html.kairo-v3 body.auth-locked #kairo-entry main.kairo-landing-main {
  display: block !important;
}

html.kairo-v3 body.auth-locked #kairo-entry .kairo-lp-section-head {
  display: block !important;
}

html.kairo-v3 body.auth-locked #kairo-entry .kairo-lp-dash-main > header {
  display: flex !important;
}

/* Landing pages: Home, Features, Solutions, Pricing, About (hash-based, see kairo-v3.js). */
html.kairo-v3 #kairo-entry[data-page] .kairo-landing-main > section {
  display: none;
}

html.kairo-v3 #kairo-entry[data-page="home"] .kairo-landing-main > :is(#home, #home-highlights, #home-plans, .kairo-lp-cta, #faq),
html.kairo-v3 #kairo-entry[data-page="features"] .kairo-landing-main > :is(#features, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="solutions"] .kairo-landing-main > :is(#solutions, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="pricing"] .kairo-landing-main > :is(#pricing, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="about"] .kairo-landing-main > :is(#about, .kairo-lp-cta) {
  display: block;
}

/* Logged out, #app-shell only holds hidden header/main; kairo.css forces it visible
   with a 100vh min-height, which left an empty screen below the landing footer. */
html.kairo-v3 body.auth-locked #app-shell {
  display: none !important;
}

html.kairo-v3 .kairo-lp-footer-wrap {
  padding-bottom: 34px;
}

/* #masuk: direct login link for existing customers, no landing content behind the dialog. */
html.kairo-v3 #kairo-entry[data-page="masuk"] .kairo-lp-footer-wrap {
  display: none;
}

html.kairo-v3 .kairo-login-home {
  display: none;
  margin: 12px 0 0;
  font-size: 11px;
  text-align: center;
}

html.kairo-v3 #kairo-entry[data-page="masuk"] .kairo-login-home {
  display: block;
}

html.kairo-v3 .kairo-login-home a {
  color: var(--kairo-entry-muted);
  font-weight: 700;
}

html.kairo-v3 .kairo-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 2px 0 14px;
  color: var(--kairo-delft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html.kairo-v3 .kairo-login-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--kairo-turquoise-dark);
}

html.kairo-v3 .kairo-lp-footer-wrap > .kairo-lp-footer {
  margin-top: 38px;
}

html.kairo-v3 .kairo-nav-links a[aria-current="page"] {
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

html.kairo-v3 body.kairo-dialog-open {
  overflow: hidden;
}

html.kairo-v3 .kairo-entry,
html.kairo-v3 .kairo-entry *,
html.kairo-v3 .kairo-entry *::before,
html.kairo-v3 .kairo-entry *::after {
  box-sizing: border-box;
}

html.kairo-v3 .kairo-entry {
  min-height: 100vh;
  overflow: clip;
  background: var(--kairo-off-white);
  color: var(--kairo-delft);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

html.kairo-v3 .kairo-entry button,
html.kairo-v3 .kairo-entry a,
html.kairo-v3 .kairo-entry input {
  font-family: inherit;
}

html.kairo-v3 .kairo-entry img,
html.kairo-v3 .kairo-entry svg {
  display: block;
}

html.kairo-v3 .kairo-entry svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html.kairo-v3 .kairo-entry-container {
  width: min(calc(100% - 48px), var(--kairo-entry-container));
  margin-inline: auto;
}

html.kairo-v3 .kairo-entry [id] {
  scroll-margin-top: 92px;
}

html.kairo-v3 .kairo-entry-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(217, 233, 237, .82);
  background: rgba(251, 252, 248, .92);
  backdrop-filter: blur(16px);
}

html.kairo-v3 .kairo-nav-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

html.kairo-v3 .kairo-entry-brand,
html.kairo-v3 .kairo-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kairo-delft);
  text-decoration: none;
}

html.kairo-v3 .kairo-entry-brand > span,
html.kairo-v3 .kairo-login-brand > span {
  display: grid;
  gap: 1px;
}

html.kairo-v3 .kairo-entry-brand strong,
html.kairo-v3 .kairo-login-brand strong {
  font-size: 13px;
  line-height: 1;
  letter-spacing: -.02em;
}

html.kairo-v3 .kairo-entry-brand small,
html.kairo-v3 .kairo-login-brand small {
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .18em;
}

html.kairo-v3 .kairo-nav-menu,
html.kairo-v3 .kairo-nav-links,
html.kairo-v3 .kairo-nav-actions {
  display: flex;
  align-items: center;
}

html.kairo-v3 .kairo-nav-menu {
  flex: 1;
  justify-content: flex-end;
  gap: clamp(26px, 4vw, 58px);
}

html.kairo-v3 .kairo-nav-links {
  gap: 28px;
}

html.kairo-v3 .kairo-nav-links a {
  position: relative;
  padding: 10px 0;
  color: var(--kairo-delft-soft);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

html.kairo-v3 .kairo-nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--kairo-turquoise);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-nav-links a:hover::after,
html.kairo-v3 .kairo-nav-links a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

html.kairo-v3 .kairo-nav-actions {
  gap: 10px;
}

html.kairo-v3 .kairo-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-button:hover {
  transform: translateY(-1px);
}

html.kairo-v3 .kairo-button-primary {
  background: var(--kairo-turquoise);
  color: #082f3b;
  box-shadow: 0 10px 22px rgba(37, 185, 176, .18);
}

html.kairo-v3 .kairo-button-primary:hover {
  background: #31c7bd;
}

html.kairo-v3 .kairo-button-secondary {
  border-color: var(--kairo-entry-line);
  background: var(--kairo-white);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-button-text {
  background: transparent;
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-button-large {
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 15px;
  font-size: 13px;
}

html.kairo-v3 .kairo-menu-toggle {
  display: none;
}

html.kairo-v3 .kairo-lp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 112px);
  background:
    radial-gradient(circle at 6% 16%, rgba(255, 245, 215, .96) 0 14%, transparent 34%),
    radial-gradient(circle at 95% 42%, rgba(220, 239, 244, .9) 0 16%, transparent 37%),
    var(--kairo-off-white);
}

html.kairo-v3 .kairo-lp-hero::before {
  position: absolute;
  top: 17%;
  right: 9%;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(37, 185, 176, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

html.kairo-v3 .kairo-lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(540px, 1.18fr);
  align-items: center;
  gap: clamp(42px, 6vw, 84px);
}

html.kairo-v3 .kairo-lp-hero-copy {
  min-width: 0;
}

html.kairo-v3 .kairo-lp-hero h1 {
  max-width: 660px;
  margin: 22px 0 19px;
  color: var(--kairo-delft);
  font-size: clamp(44px, 5.4vw, 70px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.058em;
}

html.kairo-v3 .kairo-entry mark {
  padding: 0;
  background: transparent;
  color: var(--kairo-turquoise-dark);
}

html.kairo-v3 .kairo-lp-hero-copy > p {
  max-width: 610px;
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 16px;
  line-height: 1.75;
}

html.kairo-v3 .kairo-lp-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
}

html.kairo-v3 .kairo-lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 24px;
  color: var(--kairo-entry-muted);
  font-size: 9px;
  font-weight: 700;
}

html.kairo-v3 .kairo-lp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .kairo-lp-trust i {
  display: grid;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--kairo-sky-100);
  color: var(--kairo-turquoise-dark);
  font-size: 10px;
  font-style: normal;
  place-items: center;
}

html.kairo-v3 .kairo-lp-hero-visual {
  position: relative;
  min-width: 0;
  padding: 24px 0 34px;
}

html.kairo-v3 .kairo-lp-preview {
  overflow: hidden;
  border: 1px solid var(--kairo-sky-200);
  border-radius: 18px;
  background: var(--kairo-white);
  box-shadow: var(--kairo-entry-shadow);
}

html.kairo-v3 .kairo-lp-preview-main {
  position: relative;
  z-index: 2;
  transform: rotate(.35deg);
}

html.kairo-v3 .kairo-lp-windowbar {
  display: grid;
  min-height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--kairo-entry-line);
  background: var(--kairo-sky-050);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

html.kairo-v3 .kairo-lp-dots {
  display: flex;
  gap: 5px;
}

html.kairo-v3 .kairo-lp-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kairo-sky-200);
}

html.kairo-v3 .kairo-lp-dots i:nth-child(2) {
  background: var(--kairo-gold);
}

html.kairo-v3 .kairo-lp-dots i:nth-child(3) {
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-address {
  min-width: 190px;
  padding: 5px 16px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 999px;
  background: var(--kairo-white);
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 700;
  text-align: center;
}

html.kairo-v3 .kairo-lp-status {
  justify-self: end;
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-dashboard {
  display: grid;
  min-height: 410px;
  grid-template-columns: 118px minmax(0, 1fr);
}

html.kairo-v3 .kairo-lp-dashboard aside {
  padding: 17px 10px;
  border-right: 1px solid var(--kairo-entry-line);
  background: #f8fbfc;
}

html.kairo-v3 .kairo-lp-dash-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 6px 20px;
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-dashboard aside > span {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  margin: 3px 0;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 750;
}

html.kairo-v3 .kairo-lp-dashboard aside > span i {
  width: 10px;
  height: 10px;
  border: 1.3px solid currentColor;
  border-radius: 3px;
}

html.kairo-v3 .kairo-lp-dashboard aside > span.is-active {
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-dashboard aside > span.is-active i {
  border-color: var(--kairo-turquoise-dark);
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-dash-main {
  min-width: 0;
  padding: 20px;
}

html.kairo-v3 .kairo-lp-dash-main > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

html.kairo-v3 .kairo-lp-dash-main header small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .09em;
}

html.kairo-v3 .kairo-lp-dash-main header h2 {
  margin: 5px 0 3px;
  color: var(--kairo-delft);
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -.035em;
}

html.kairo-v3 .kairo-lp-dash-main header p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 7px;
}

html.kairo-v3 .kairo-lp-dash-main header > b {
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: var(--kairo-delft);
  color: var(--kairo-white);
  font-size: 8px;
  place-items: center;
}

html.kairo-v3 .kairo-lp-stat-grid {
  display: grid;
  margin: 18px 0 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

html.kairo-v3 .kairo-lp-stat-grid article {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--kairo-entry-line);
  border-top: 3px solid var(--kairo-turquoise);
  border-radius: 11px;
  background: var(--kairo-white);
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-stat-grid article.is-gold {
  border-top-color: var(--kairo-gold);
  background: var(--kairo-warm-050);
}

html.kairo-v3 .kairo-lp-stat-grid article.is-sky {
  border-top-color: var(--kairo-sky-200);
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-stat-grid span,
html.kairo-v3 .kairo-lp-stat-grid small {
  overflow: hidden;
  color: var(--kairo-entry-muted);
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-stat-grid strong {
  margin: auto 0 3px;
  overflow: hidden;
  color: var(--kairo-delft);
  font-size: 11px;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(165px, .8fr);
  gap: 8px;
}

html.kairo-v3 .kairo-lp-chart,
html.kairo-v3 .kairo-lp-orders {
  min-width: 0;
  min-height: 182px;
  padding: 12px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 12px;
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html.kairo-v3 .kairo-lp-card-head > span {
  display: grid;
  gap: 2px;
}

html.kairo-v3 .kairo-lp-card-head strong {
  color: var(--kairo-delft);
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-card-head small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-card-head > b {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--kairo-sky-050);
  color: var(--kairo-turquoise-dark);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-chart > svg {
  width: 100%;
  height: 122px;
  margin-top: 9px;
}

html.kairo-v3 .kairo-lp-chart .area {
  fill: var(--kairo-sky-050);
  stroke: none;
}

html.kairo-v3 .kairo-lp-chart .line {
  fill: none;
  stroke: var(--kairo-turquoise);
  stroke-width: 4;
}

html.kairo-v3 .kairo-lp-orders > div:not(.kairo-lp-card-head) {
  display: grid;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--kairo-entry-line);
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .kairo-lp-orders > div:last-child {
  border-bottom: 0;
}

html.kairo-v3 .kairo-lp-orders > div > i {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

html.kairo-v3 .kairo-lp-orders > div > span {
  display: grid;
  min-width: 0;
}

html.kairo-v3 .kairo-lp-orders > div strong,
html.kairo-v3 .kairo-lp-orders > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-orders > div strong {
  color: var(--kairo-delft);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-orders > div small {
  color: var(--kairo-entry-muted);
  font-size: 5px;
}

html.kairo-v3 .kairo-lp-orders em {
  padding: 4px 5px;
  border-radius: 999px;
  background: var(--kairo-sky-050);
  color: var(--kairo-turquoise-dark);
  font-size: 5px;
  font-style: normal;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-mini {
  position: absolute;
  z-index: 3;
  display: flex;
  border: 1px solid rgba(184, 223, 233, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--kairo-entry-shadow-soft);
}

html.kairo-v3 .kairo-lp-mini-order {
  top: 0;
  right: -24px;
  width: 138px;
  padding: 14px;
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-mini-order span,
html.kairo-v3 .kairo-lp-mini-order small {
  color: var(--kairo-entry-muted);
  font-size: 7px;
}

html.kairo-v3 .kairo-lp-mini-order strong {
  margin: 4px 0 1px;
  color: var(--kairo-delft);
  font-size: 22px;
  letter-spacing: -.04em;
}

html.kairo-v3 .kairo-lp-mini-receipt {
  right: 28px;
  bottom: 0;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
}

html.kairo-v3 .kairo-lp-mini-receipt svg {
  width: 26px;
  height: 26px;
  color: var(--kairo-gold);
}

html.kairo-v3 .kairo-lp-mini-receipt span {
  display: grid;
  gap: 2px;
}

html.kairo-v3 .kairo-lp-mini-receipt strong {
  color: var(--kairo-delft);
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-mini-receipt small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-features,
html.kairo-v3 .kairo-lp-about,
html.kairo-v3 .kairo-lp-compare,
html.kairo-v3 .kairo-lp-pricing,
html.kairo-v3 .kairo-lp-cta,
html.kairo-v3 .kairo-lp-faq {
  padding: clamp(72px, 8vw, 104px) 0;
}

html.kairo-v3 .kairo-lp-features,
html.kairo-v3 .kairo-lp-pricing {
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-about,
html.kairo-v3 .kairo-lp-faq {
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-compare,
html.kairo-v3 .kairo-lp-cta {
  background: var(--kairo-off-white);
}

html.kairo-v3 .kairo-lp-section-head {
  max-width: 760px;
}

html.kairo-v3 .kairo-lp-section-head-center {
  margin-inline: auto;
  text-align: center;
}

html.kairo-v3 .kairo-lp-section-head h2,
html.kairo-v3 .kairo-lp-about-copy h2,
html.kairo-v3 .kairo-lp-cta-panel h2 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: clamp(30px, 4.1vw, 48px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.048em;
}

html.kairo-v3 .kairo-lp-section-head > p,
html.kairo-v3 .kairo-lp-about-copy > p,
html.kairo-v3 .kairo-lp-cta-panel p {
  max-width: 650px;
  margin: 15px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 15px;
  line-height: 1.72;
}

html.kairo-v3 .kairo-lp-section-head-center > p {
  margin-inline: auto;
}

html.kairo-v3 .kairo-lp-feature-list {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.kairo-v3 .kairo-lp-feature-list article {
  display: grid;
  min-width: 0;
  padding: 4px 24px;
  border-left: 1px solid var(--kairo-entry-line);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 13px;
}

html.kairo-v3 .kairo-lp-feature-list article:first-child {
  padding-left: 0;
  border-left: 0;
}

html.kairo-v3 .kairo-lp-feature-list article:last-child {
  padding-right: 0;
}

html.kairo-v3 .kairo-lp-icon {
  display: grid;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  place-items: center;
}

html.kairo-v3 .kairo-lp-icon.is-sky {
  background: var(--kairo-sky-100);
}

html.kairo-v3 .kairo-lp-icon.is-gold {
  background: #f4d48d;
}

html.kairo-v3 .kairo-lp-icon.is-warm {
  background: var(--kairo-gold-050);
}

html.kairo-v3 .kairo-lp-icon svg {
  width: 19px;
  height: 19px;
}

html.kairo-v3 .kairo-lp-feature-list h3 {
  margin: 1px 0 5px;
  color: var(--kairo-delft);
  font-size: 13px;
  line-height: 1.35;
}

html.kairo-v3 .kairo-lp-feature-list p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 12px;
  line-height: 1.6;
}

html.kairo-v3 .kairo-lp-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(50px, 7vw, 94px);
}

html.kairo-v3 .kairo-lp-about-visual {
  position: relative;
  min-width: 0;
  padding: 34px 48px 34px 28px;
}

html.kairo-v3 .kairo-lp-about-visual::before {
  position: absolute;
  inset: 0 8% 0 0;
  border-radius: 72px 138px 44px 108px;
  background: var(--kairo-delft);
  box-shadow: 0 24px 60px rgba(23, 58, 89, .14);
  content: "";
}

html.kairo-v3 .kairo-lp-about-visual::after {
  position: absolute;
  top: -24px;
  left: -20px;
  width: 122px;
  height: 122px;
  border: 1px solid rgba(37, 185, 176, .28);
  border-radius: 50%;
  content: "";
}

html.kairo-v3 .kairo-lp-flow {
  position: relative;
  z-index: 1;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--kairo-entry-shadow);
}

html.kairo-v3 .kairo-lp-flow-label {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
  font-size: 9px;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-flow > div {
  display: grid;
  padding: 13px 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

html.kairo-v3 .kairo-lp-flow > div i {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(2) i {
  background: var(--kairo-sky-100);
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(3) i {
  background: #f4d48d;
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(4) i {
  background: var(--kairo-gold-050);
}

html.kairo-v3 .kairo-lp-flow > div span {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-flow strong {
  color: var(--kairo-delft);
  font-size: 12px;
}

html.kairo-v3 .kairo-lp-flow small {
  color: var(--kairo-entry-muted);
  font-size: 10px;
}

html.kairo-v3 .kairo-lp-flow > b {
  display: block;
  height: 8px;
  margin-left: 17px;
  color: var(--kairo-sky-200);
  font-size: 12px;
  line-height: 8px;
}

html.kairo-v3 .kairo-lp-about-copy {
  min-width: 0;
}

html.kairo-v3 .kairo-lp-about-copy ul {
  display: grid;
  gap: 17px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-about-copy li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
}

html.kairo-v3 .kairo-lp-about-copy li > span {
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 11px;
  font-weight: 900;
  place-items: center;
}

html.kairo-v3 .kairo-lp-about-copy li div {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-about-copy li strong {
  color: var(--kairo-delft);
  font-size: 13px;
}

html.kairo-v3 .kairo-lp-about-copy li small {
  color: var(--kairo-entry-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

html.kairo-v3 .kairo-lp-compare-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

html.kairo-v3 .kairo-lp-compare-card {
  position: relative;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 18px;
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-compare-card.is-before {
  background: #f9faf9;
}

html.kairo-v3 .kairo-lp-compare-card.is-after {
  border-color: var(--kairo-sky-200);
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-compare-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-compare-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--kairo-delft);
  font-size: 14px;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-compare-card.is-after h3 {
  margin-top: 8px;
}

html.kairo-v3 .kairo-lp-compare-card h3 span,
html.kairo-v3 .kairo-lp-compare-card li > i {
  display: grid;
  border-radius: 50%;
  font-style: normal;
  place-items: center;
}

html.kairo-v3 .kairo-lp-compare-card h3 span {
  width: 26px;
  height: 26px;
  background: #edf1f2;
  color: #7a8a94;
}

html.kairo-v3 .kairo-lp-compare-card.is-after h3 span {
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-compare-card ul {
  display: grid;
  gap: 19px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-compare-card li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
}

html.kairo-v3 .kairo-lp-compare-card li > i {
  width: 24px;
  height: 24px;
  background: #edf1f2;
  color: #7a8a94;
  font-size: 11px;
  font-weight: 900;
}

html.kairo-v3 .kairo-lp-compare-card.is-after li > i {
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-compare-card li > span {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-compare-card li strong {
  color: var(--kairo-delft);
  font-size: 12px;
}

html.kairo-v3 .kairo-lp-compare-card li small {
  color: var(--kairo-entry-muted);
  font-size: 12px;
  line-height: 1.55;
}

html.kairo-v3 .kairo-lp-price-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

html.kairo-v3 .kairo-lp-price-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  padding: 28px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 18px;
  background: var(--kairo-white);
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-price-card.is-featured {
  border-color: var(--kairo-delft);
  background: var(--kairo-delft);
  color: var(--kairo-white);
  box-shadow: 0 22px 50px rgba(23, 58, 89, .15);
}

html.kairo-v3 .kairo-lp-price-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--kairo-gold);
  color: #503b12;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-price-card h3 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: 17px;
}

html.kairo-v3 .kairo-lp-price-card.is-featured h3 {
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-price-card > strong {
  margin-top: 28px;
  color: var(--kairo-delft);
  font-size: clamp(22px, 2.6vw, 31px);
  line-height: 1.14;
  letter-spacing: -.04em;
}

html.kairo-v3 .kairo-lp-price-card.is-featured > strong {
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-price-card > p {
  margin: 13px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

html.kairo-v3 .kairo-lp-price-card.is-featured > p,
html.kairo-v3 .kairo-lp-price-card.is-featured > small {
  color: #c6d5de;
}

html.kairo-v3 .kairo-lp-price-action {
  display: inline-flex;
  min-height: 46px;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid var(--kairo-turquoise);
  border-radius: 12px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

html.kairo-v3 .kairo-lp-price-action.is-secondary {
  border-color: var(--kairo-delft);
  background: var(--kairo-white);
  color: var(--kairo-delft);
}

/* Feature list inside each pricing card. */
html.kairo-v3 .kairo-lp-price-list {
  display: grid;
  gap: 9px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--kairo-delft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

html.kairo-v3 .kairo-lp-price-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: var(--kairo-turquoise);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kairo-lp-price-card.is-featured .kairo-lp-price-list li {
  color: #eef5f8;
}

html.kairo-v3 .kairo-lp-price-card > small {
  margin-top: 12px;
  color: var(--kairo-entry-muted);
  font-size: 11px;
  line-height: 1.5;
}

html.kairo-v3 .kairo-lp-cta {
  padding-top: 0;
}

html.kairo-v3 .kairo-lp-cta-panel {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: clamp(36px, 5vw, 60px);
  border-radius: 22px;
  background: var(--kairo-delft);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

html.kairo-v3 .kairo-lp-cta-panel::after {
  position: absolute;
  right: -80px;
  bottom: -150px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(37, 185, 176, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(37, 185, 176, .06), 0 0 0 70px rgba(37, 185, 176, .035);
  content: "";
  pointer-events: none;
}

html.kairo-v3 .kairo-lp-cta-panel > * {
  position: relative;
  z-index: 1;
}

html.kairo-v3 .kairo-lp-cta-panel h2 {
  max-width: 760px;
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-cta-panel h2 mark {
  color: #75d9d2;
}

html.kairo-v3 .kairo-lp-cta-panel p {
  color: #c6d5de;
}

html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
  min-width: 190px;
}

html.kairo-v3 .kairo-lp-faq {
  padding-bottom: 34px;
  background-image:
    linear-gradient(rgba(23, 58, 89, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 58, 89, .025) 1px, transparent 1px);
  background-size: 72px 72px;
}

html.kairo-v3 .kairo-lp-faq-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(34px, 6vw, 78px);
  row-gap: 0;
}

html.kairo-v3 .kairo-lp-faq-grid article {
  display: grid;
  min-width: 0;
  padding: 21px 0;
  border-bottom: 1px dashed rgba(23, 58, 89, .18);
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: flex-start;
  gap: 13px;
}

html.kairo-v3 .kairo-lp-faq-grid article > span {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid var(--kairo-sky-200);
  border-radius: 11px;
  background: var(--kairo-white);
  color: var(--kairo-turquoise-dark);
  font-size: 9px;
  font-weight: 900;
  place-items: center;
}

html.kairo-v3 .kairo-lp-faq-grid h3 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: 12px;
  line-height: 1.45;
}

html.kairo-v3 .kairo-lp-faq-grid p {
  margin: 4px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 12px;
  line-height: 1.62;
}

html.kairo-v3 .kairo-lp-footer {
  display: grid;
  margin-top: 72px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--kairo-entry-line);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

html.kairo-v3 .kairo-lp-footer p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 11px;
  text-align: center;
}

html.kairo-v3 .kairo-lp-footer > a:last-child {
  justify-self: end;
  color: var(--kairo-delft);
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .52s ease, transform .52s ease;
}

html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.kairo-v3 .kairo-login-dialog[hidden] {
  display: none !important;
}

html.kairo-v3 .kairo-login-dialog {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  padding: 24px;
  place-items: center;
}

html.kairo-v3 .kairo-login-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(15, 42, 63, .58);
  cursor: default;
  opacity: 0;
  transition: opacity .18s ease;
}

html.kairo-v3 .kairo-login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 20px;
  background: var(--kairo-white);
  box-shadow: 0 28px 80px rgba(15, 42, 63, .24);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-backdrop,
html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-card {
  opacity: 1;
}

html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-card {
  transform: none;
}

html.kairo-v3 .kairo-login-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 11px;
  background: var(--kairo-sky-050);
  color: var(--kairo-delft);
  font: 500 22px/1 Arial, sans-serif;
  cursor: pointer;
  place-items: center;
}

html.kairo-v3 .kairo-login-brand {
  margin-bottom: 30px;
}

html.kairo-v3 .kairo-login-card .auth-title {
  margin: 0;
  color: var(--kairo-delft) !important;
  font-size: 28px !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
}

html.kairo-v3 .kairo-login-intro {
  margin: 9px 0 24px;
  color: var(--kairo-entry-muted);
  font-size: 13px;
  line-height: 1.6;
}

html.kairo-v3 .kairo-login-card .form-group {
  margin-bottom: 16px;
}

html.kairo-v3 .kairo-login-card .label {
  display: block;
  margin-bottom: 7px;
  color: var(--kairo-delft-soft) !important;
  font-size: 11px;
  font-weight: 800;
}

html.kairo-v3 .kairo-login-card .input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--kairo-entry-line) !important;
  border-radius: 13px !important;
  background: var(--kairo-white) !important;
  color: var(--kairo-delft) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none !important;
}

html.kairo-v3 .kairo-login-card .input:focus {
  border-color: var(--kairo-turquoise) !important;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(37, 185, 176, .14) !important;
}

html.kairo-v3 .kairo-login-card .auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--kairo-turquoise) !important;
  color: #092f3e !important;
  font-weight: 800;
  box-shadow: none !important;
}

html.kairo-v3 .kairo-login-card .auth-error {
  display: none;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #efc3ca;
  border-radius: 11px;
  background: #fff2f4;
  color: #9d3044;
  font-size: 11px;
  line-height: 1.5;
}

html.kairo-v3 .kairo-login-card .kairo-password-wrap {
  position: relative;
}

html.kairo-v3 .kairo-login-card .kairo-eye {
  color: var(--kairo-entry-muted);
}

html.kairo-v3 .kairo-login-card .kairo-auth-secondary {
  display: block;
  margin: 13px auto 0;
  border: 0;
  background: none;
  color: var(--kairo-delft-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html.kairo-v3 .kairo-login-signup {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--kairo-entry-line);
  color: var(--kairo-entry-muted);
  font-size: 11px;
  text-align: center;
}

html.kairo-v3 .kairo-login-signup button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--kairo-turquoise-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

html.kairo-v3 .kairo-entry :focus-visible {
  outline: 3px solid rgba(37, 185, 176, .35);
  outline-offset: 3px;
}

@media (max-width: 1020px) {
  html.kairo-v3 .kairo-lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  html.kairo-v3 .kairo-lp-hero-copy {
    max-width: 760px;
  }

  html.kairo-v3 .kairo-lp-hero h1 {
    max-width: 760px;
  }

  html.kairo-v3 .kairo-lp-hero-visual {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  html.kairo-v3 .kairo-lp-feature-list article:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  html.kairo-v3 .kairo-entry-container {
    width: min(100% - 40px, var(--kairo-entry-container));
  }

  html.kairo-v3 .kairo-nav-inner {
    min-height: 70px;
  }

  html.kairo-v3 .kairo-menu-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid var(--kairo-entry-line);
    border-radius: 12px;
    background: var(--kairo-white);
    color: var(--kairo-delft);
    cursor: pointer;
    place-content: center;
    gap: 4px;
  }

  html.kairo-v3 .kairo-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
  }

  html.kairo-v3 .kairo-nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    left: 20px;
    display: none;
    padding: 18px;
    border: 1px solid var(--kairo-entry-line);
    border-radius: 17px;
    background: var(--kairo-white);
    box-shadow: var(--kairo-entry-shadow);
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  html.kairo-v3 #kairo-entry-nav.menu-open .kairo-nav-menu {
    display: flex;
  }

  html.kairo-v3 .kairo-nav-links {
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
  }

  html.kairo-v3 .kairo-nav-links a {
    padding: 11px 10px;
    border-radius: 10px;
  }

  html.kairo-v3 .kairo-nav-links a:hover {
    background: var(--kairo-sky-050);
  }

  html.kairo-v3 .kairo-nav-links a::after {
    display: none;
  }

  html.kairo-v3 .kairo-nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  html.kairo-v3 .kairo-lp-about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  html.kairo-v3 .kairo-lp-about-visual {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-about-copy {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-price-grid {
    grid-template-columns: 1fr;
    width: min(650px, 100%);
    margin-inline: auto;
    margin-top: 46px;
  }

  html.kairo-v3 .kairo-lp-price-card {
    min-height: 290px;
  }

  html.kairo-v3 .kairo-lp-cta-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
    width: max-content;
  }
}

@media (max-width: 700px) {
  html.kairo-v3 .kairo-entry-container {
    width: min(100% - 32px, var(--kairo-entry-container));
  }

  html.kairo-v3 .kairo-nav-inner {
    min-height: 66px;
  }

  html.kairo-v3 .kairo-entry-brand small {
    display: none;
  }

  html.kairo-v3 .kairo-lp-hero {
    padding: 50px 0 62px;
  }

  html.kairo-v3 .kairo-lp-hero h1 {
    margin: 20px 0 16px;
    font-size: clamp(38px, 12vw, 54px);
  }

  html.kairo-v3 .kairo-lp-hero-copy > p {
    font-size: 15px;
    line-height: 1.65;
  }

  html.kairo-v3 .kairo-lp-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: 24px;
  }

  html.kairo-v3 .kairo-lp-trust {
    display: grid;
    gap: 9px;
  }

  html.kairo-v3 .kairo-lp-hero-visual {
    padding-block: 12px 24px;
  }

  html.kairo-v3 .kairo-lp-mini {
    display: none;
  }

  html.kairo-v3 .kairo-lp-windowbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  html.kairo-v3 .kairo-lp-status {
    display: none;
  }

  html.kairo-v3 .kairo-lp-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.kairo-v3 .kairo-lp-dashboard {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-dashboard aside {
    display: none;
  }

  html.kairo-v3 .kairo-lp-dash-main {
    padding: 15px;
  }

  html.kairo-v3 .kairo-lp-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.kairo-v3 .kairo-lp-dash-grid {
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-orders {
    display: none;
  }

  html.kairo-v3 .kairo-lp-chart {
    min-height: 168px;
  }

  html.kairo-v3 .kairo-lp-chart > svg {
    height: 105px;
  }

  html.kairo-v3 .kairo-lp-features,
  html.kairo-v3 .kairo-lp-about,
  html.kairo-v3 .kairo-lp-compare,
  html.kairo-v3 .kairo-lp-pricing,
  html.kairo-v3 .kairo-lp-cta,
  html.kairo-v3 .kairo-lp-faq {
    padding: 64px 0;
  }

  html.kairo-v3 .kairo-lp-section-head h2,
  html.kairo-v3 .kairo-lp-about-copy h2,
  html.kairo-v3 .kairo-lp-cta-panel h2 {
    font-size: clamp(29px, 9vw, 40px);
  }

  html.kairo-v3 .kairo-lp-feature-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
  }

  html.kairo-v3 .kairo-lp-feature-list article,
  html.kairo-v3 .kairo-lp-feature-list article:first-child,
  html.kairo-v3 .kairo-lp-feature-list article:nth-child(3),
  html.kairo-v3 .kairo-lp-feature-list article:last-child {
    padding: 17px 0;
    border-top: 1px solid var(--kairo-entry-line);
    border-left: 0;
  }

  html.kairo-v3 .kairo-lp-feature-list article:first-child {
    padding-top: 0;
    border-top: 0;
  }

  html.kairo-v3 .kairo-lp-about-visual {
    padding: 22px 22px 22px 12px;
  }

  html.kairo-v3 .kairo-lp-about-visual::before {
    border-radius: 44px 82px 28px 62px;
  }

  html.kairo-v3 .kairo-lp-flow {
    padding: 19px;
  }

  html.kairo-v3 .kairo-lp-compare-grid,
  html.kairo-v3 .kairo-lp-faq-grid {
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-compare-grid {
    gap: 24px;
    margin-top: 40px;
  }

  html.kairo-v3 .kairo-lp-compare-card {
    padding: 22px 18px;
  }

  html.kairo-v3 .kairo-lp-price-grid {
    margin-top: 40px;
  }

  html.kairo-v3 .kairo-lp-price-card {
    min-height: 300px;
    padding: 24px;
  }

  html.kairo-v3 .kairo-lp-cta {
    padding-top: 0;
  }

  html.kairo-v3 .kairo-lp-cta-panel {
    padding: 32px 22px;
    border-radius: 18px;
  }

  html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
    width: 100%;
  }

  html.kairo-v3 .kairo-lp-faq-grid {
    margin-top: 34px;
  }

  html.kairo-v3 .kairo-lp-footer {
    margin-top: 54px;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  html.kairo-v3 .kairo-lp-footer p {
    text-align: left;
  }

  html.kairo-v3 .kairo-lp-footer > a:last-child {
    justify-self: start;
  }

  html.kairo-v3 .kairo-login-dialog {
    padding: 16px;
    align-items: end;
  }

  html.kairo-v3 .kairo-login-card {
    width: 100%;
    max-height: calc(100vh - 32px);
    padding: 26px 22px;
    border-radius: 20px;
  }

  html.kairo-v3 .kairo-login-brand {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 {
    scroll-behavior: auto;
  }

  html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Signup plan picker — cards in the landing pricing style (white / delft featured / white),
   then a collapsible comparison of only what differs. Markup: plan-compare block in kairo-app.js. */
html.kairo-v3 .kairo-pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding-top: 10px; }
html.kairo-v3 .kairo-pp-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 20px 18px 16px; text-align: left; font: inherit; color: var(--kairo-delft); cursor: pointer;
  background: var(--kairo-white); border: 1px solid var(--kairo-entry-line); border-radius: 20px;
  box-shadow: var(--kairo-entry-shadow-soft); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html.kairo-v3 .kairo-pp-card:hover { transform: translateY(-2px); box-shadow: var(--kairo-entry-shadow); }
html.kairo-v3 .kairo-pp-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 45%, transparent); outline-offset: 2px; }
html.kairo-v3 .kairo-pp-card.is-featured { background: var(--kairo-delft); border-color: var(--kairo-delft); color: #fff; }
html.kairo-v3 .kairo-pp-card.selected { border-color: var(--kairo-turquoise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kairo-turquoise) 28%, transparent), var(--kairo-entry-shadow); }
html.kairo-v3 .kairo-pp-badge {
  position: absolute; top: -11px; left: 18px; padding: 4px 10px; border-radius: 999px;
  background: var(--kairo-gold); color: var(--kairo-delft); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
html.kairo-v3 .kairo-pp-check {
  position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--kairo-entry-line); background: var(--kairo-white); color: transparent;
}
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-check { border-color: rgba(255, 255, 255, .35); background: transparent; }
html.kairo-v3 .kairo-pp-card.selected .kairo-pp-check { border-color: var(--kairo-turquoise); background: var(--kairo-turquoise); color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-name { font-size: 15px; font-weight: 800; }
html.kairo-v3 .kairo-pp-price { margin: 10px 0 6px; padding-right: 26px; font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
html.kairo-v3 .kairo-pp-copy { font-size: 12.5px; line-height: 1.5; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-copy { color: #c9dbe6; }
html.kairo-v3 .kairo-pp-points { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 8px; }
html.kairo-v3 .kairo-pp-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
html.kairo-v3 .kairo-pp-points svg,
html.kairo-v3 .kairo-pp-included svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--kairo-turquoise-dark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-points svg { stroke: var(--kairo-turquoise); }
html.kairo-v3 .kairo-pp-foot {
  margin-top: auto; width: 100%; padding-top: 12px; border-top: 1px solid var(--kairo-entry-line);
  font-size: 11px; font-weight: 700; color: var(--kairo-entry-muted);
}
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-foot { border-color: rgba(255, 255, 255, .16); color: #c9dbe6; }

html.kairo-v3 .kairo-pp-compare { margin-top: 16px; border: 1px solid var(--kairo-entry-line); border-radius: 18px; background: var(--kairo-white); overflow: hidden; }
html.kairo-v3 .kairo-pp-compare-title { padding: 14px 18px 4px; font-size: 13px; font-weight: 800; color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-compare:not(.is-open) .is-extra,
html.kairo-v3 .kairo-pp-compare:not(.is-open) .kairo-pp-included { display: none; }
html.kairo-v3 .kairo-pp-included { padding: 14px 18px 16px; border-top: 1px solid var(--kairo-entry-line); background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-pp-included strong { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 46px; padding: 10px 16px;
  border: 0; border-top: 1px solid var(--kairo-entry-line); background: var(--kairo-white);
  font: inherit; font-size: 13px; font-weight: 800; color: var(--kairo-turquoise-dark); cursor: pointer;
}
html.kairo-v3 .kairo-pp-more:hover { background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-pp-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 45%, transparent); outline-offset: -3px; }
html.kairo-v3 .kairo-pp-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
html.kairo-v3 .kairo-pp-more[aria-expanded="true"] svg { transform: rotate(180deg); }
html.kairo-v3 .kairo-pp-included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
html.kairo-v3 .kairo-pp-included li { display: flex; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-table-wrap { background: var(--kairo-white); }
html.kairo-v3 .kairo-pp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
html.kairo-v3 .kairo-pp-table th,
html.kairo-v3 .kairo-pp-table td { padding: 11px 10px; border-bottom: 1px solid var(--kairo-entry-line); font-size: 12.5px; text-align: center; vertical-align: middle; color: var(--kairo-delft); background: transparent; white-space: normal; overflow-wrap: anywhere; }
html.kairo-v3 .kairo-pp-table tbody tr:last-child > * { border-bottom: 0; }
html.kairo-v3 .kairo-pp-table th[scope="row"],
html.kairo-v3 .kairo-pp-table thead th:first-child { width: 40%; padding-left: 18px; text-align: left; font-weight: 600; }
html.kairo-v3 .kairo-pp-table thead th { font-size: 12px; font-weight: 800; }
html.kairo-v3 .kairo-pp-table thead th:first-child { color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-pp-table .is-selected { background: color-mix(in srgb, var(--kairo-turquoise) 9%, transparent); }
html.kairo-v3 .kairo-pp-table thead .is-selected { color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-yes,
html.kairo-v3 .kairo-pp-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
html.kairo-v3 .kairo-pp-yes { background: color-mix(in srgb, var(--kairo-turquoise) 16%, #fff); color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-no { color: #9aaab6; }
html.kairo-v3 .kairo-pp-yes svg,
html.kairo-v3 .kairo-pp-no svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-note { font-size: 11.5px; font-weight: 700; line-height: 1.3; }

@media (max-width: 760px) {
  /* Phone: compact header and card so the form starts sooner. */
  html.kairo-v3 #kairo-account-page { padding: 16px 12px 28px; }
  html.kairo-v3 .kairo-account-top { align-items: center; margin-bottom: 14px; }
  html.kairo-v3 .kairo-account-brand strong { font-size: 17px; }
  html.kairo-v3 .kairo-account-brand span { font-size: 10px; }
  html.kairo-v3 .kairo-back { flex: none; padding: 9px 12px; font-size: 12px; white-space: nowrap; }
  html.kairo-v3 .kairo-account-card { padding: 20px 16px; border-radius: 20px; }
  html.kairo-v3 .kairo-account-card h2 { font-size: 21px; }
  /* Plan cards: unselected = name, price and one line; details only on the chosen plan. */
  html.kairo-v3 .kairo-pp-grid { grid-template-columns: 1fr; gap: 10px; }
  html.kairo-v3 .kairo-pp-card { padding: 14px 14px 12px; border-radius: 16px; }
  html.kairo-v3 .kairo-pp-card.is-featured { margin-top: 6px; }
  html.kairo-v3 .kairo-pp-check { top: 13px; right: 13px; }
  html.kairo-v3 .kairo-pp-name { font-size: 13px; }
  html.kairo-v3 .kairo-pp-price { margin: 4px 0 2px; font-size: 19px; }
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-copy,
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-points { display: none; }
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-foot { margin-top: 2px; padding-top: 0; border-top: 0; }
  html.kairo-v3 .kairo-pp-points { margin: 10px 0 12px; gap: 7px; }
  html.kairo-v3 .kairo-pp-copy { font-size: 12px; }
  html.kairo-v3 .kairo-pp-included ul { grid-template-columns: 1fr; }
  html.kairo-v3 .kairo-pp-compare-title { padding: 12px 14px 2px; }
  html.kairo-v3 .kairo-pp-included { padding: 12px 14px 14px; }
  html.kairo-v3 .kairo-pp-table th,
  html.kairo-v3 .kairo-pp-table td { padding: 10px 4px; font-size: 11.5px; }
  html.kairo-v3 .kairo-pp-table th[scope="row"],
  html.kairo-v3 .kairo-pp-table thead th:first-child { width: 38%; padding-left: 14px; }
  html.kairo-v3 .kairo-pp-note { font-size: 10.5px; }
  /* Business type options: one compact row each (kairo.css sets these with !important). */
  html.kairo-v3 .kairo-business-grid { gap: 8px !important; }
  html.kairo-v3 .kairo-business-option { min-height: 0 !important; padding: 12px 40px 12px 12px !important; align-items: center !important; }
  html.kairo-v3 .kairo-business-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  html.kairo-v3 .kairo-business-icon svg { width: 20px !important; height: 20px !important; }
  html.kairo-v3 .kairo-business-option strong { font-size: 13px !important; }
  html.kairo-v3 .kairo-business-option small { font-size: 11px !important; }
  html.kairo-v3 .kairo-business-option.selected::before { top: 50% !important; right: 12px !important; transform: translateY(-50%); }
}

/* Orders: missed required field — red outline + short shake (kairo-v3.js). */
@keyframes kairoFieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
html.kairo-v3 #tx-form .kairo-field-shake { animation: kairoFieldShake .45s ease; }
html.kairo-v3 #tx-form .kairo-field-missing > .label,
html.kairo-v3 #tx-form .kairo-field-missing > label { color: var(--v3-danger) !important; }
html.kairo-v3 #tx-form .kairo-field-missing .input:not(.master-list *),
html.kairo-v3 #tx-form .kairo-field-missing .sh-select-trigger,
html.kairo-v3 #tx-form .kairo-field-missing .master-list {
  border-color: var(--v3-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-danger) 18%, transparent) !important;
}
html.kairo-v3 #tx-form .kairo-field-missing .master-list { border: 1px solid var(--v3-danger) !important; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { html.kairo-v3 #tx-form .kairo-field-shake { animation: none; } }
html.kairo-v3 body.saas-dark #tx-form .kairo-field-missing { --v3-danger: #ff7d82; }

/* Pro price: monthly price + 6-month deal (normal price struck through). */
html.kairo-v3 .kairo-lp-price-card > strong > span { margin-left: 2px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-lp-price-card.is-featured > strong > span { color: #c6d5de; }
html.kairo-v3 .kairo-lp-price-deal {
  display: grid; gap: 2px;
  margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
html.kairo-v3 .kairo-lp-price-deal > span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #c6d5de; }
html.kairo-v3 .kairo-lp-price-deal > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html.kairo-v3 .kairo-lp-price-deal s { font-size: 13px; color: #9fb6c5; }
html.kairo-v3 .kairo-lp-price-deal b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--kairo-white); }
html.kairo-v3 .kairo-pp-price small { margin-left: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; opacity: .75; }
html.kairo-v3 .kairo-pp-deal {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700;
}
html.kairo-v3 .kairo-pp-deal span { color: #c9dbe6; }
html.kairo-v3 .kairo-pp-deal s { color: #9fb6c5; }
html.kairo-v3 .kairo-pp-deal b { color: var(--kairo-gold); font-weight: 800; }

/* Home: "Kenapa KAIRO" strip (reuses .kairo-lp-feature-list) + Gratis/Pro summary. */
html.kairo-v3 .kairo-lp-more-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 34px;
  color: var(--kairo-delft); font-size: 14px; font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--kairo-turquoise); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
html.kairo-v3 .kairo-lp-more-link:hover { color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-lp-more-link.is-center { display: flex; justify-content: center; }
html.kairo-v3 .kairo-lp-plans-lite { padding: clamp(64px, 7vw, 92px) 0; background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-lp-plan-lite-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  width: min(820px, 100%); margin: 40px auto 0;
}
html.kairo-v3 .kairo-lp-plan-lite {
  display: flex; flex-direction: column; min-width: 0; padding: 26px;
  border: 1px solid var(--kairo-entry-line); border-radius: 18px; background: var(--kairo-white);
}
html.kairo-v3 .kairo-lp-plan-lite.is-featured { border-color: var(--kairo-delft); background: var(--kairo-delft); box-shadow: 0 22px 50px rgba(23, 58, 89, .15); }
html.kairo-v3 .kairo-lp-plan-lite h3 { margin: 0; color: var(--kairo-delft); font-size: 17px; }
html.kairo-v3 .kairo-lp-plan-lite > strong { margin-top: 18px; color: var(--kairo-delft); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.04em; }
html.kairo-v3 .kairo-lp-plan-lite > strong > span { margin-left: 2px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-lp-plan-lite.is-featured h3,
html.kairo-v3 .kairo-lp-plan-lite.is-featured > strong { color: var(--kairo-white); }
html.kairo-v3 .kairo-lp-plan-lite.is-featured > strong > span { color: #c6d5de; }
html.kairo-v3 .kairo-lp-plan-lite-deal { margin: 10px 0 0; color: #c6d5de; font-size: 13px; font-weight: 700; }
html.kairo-v3 .kairo-lp-plan-lite-deal s { margin: 0 4px; color: #9fb6c5; font-weight: 600; }
html.kairo-v3 .kairo-lp-plan-lite-deal b { color: var(--kairo-gold); }
html.kairo-v3 .kairo-lp-plan-lite .kairo-lp-price-list { margin: 18px 0 22px; }
html.kairo-v3 .kairo-lp-plan-lite.is-featured .kairo-lp-price-list li { color: #eef5f8; }

/* Features page: real screenshots (demo data) + compact list of other features. */
html.kairo-v3 .kairo-lp-pro-tag {
  display: inline-flex; margin-left: 4px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--kairo-gold-050); color: #7a5410; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
html.kairo-v3 .kairo-lp-showcase { display: grid; gap: clamp(48px, 7vw, 88px); margin-top: 52px; }
html.kairo-v3 .kairo-lp-showcase-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px);
}
html.kairo-v3 .kairo-lp-showcase-row.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
html.kairo-v3 .kairo-lp-showcase-row.is-flipped .kairo-lp-shot { grid-column: 2; grid-row: 1; }
html.kairo-v3 .kairo-lp-showcase-row.is-flipped .kairo-lp-showcase-copy { grid-column: 1; grid-row: 1; }
html.kairo-v3 .kairo-lp-shot {
  margin: 0; padding: 12px; border: 1px solid var(--kairo-entry-line); border-radius: 22px;
  background: var(--kairo-sky-050); box-shadow: var(--kairo-entry-shadow-soft);
}
html.kairo-v3 .kairo-lp-shot img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--kairo-white); }
html.kairo-v3 .kairo-lp-shot.is-tall { justify-self: center; width: min(420px, 100%); }
html.kairo-v3 .kairo-lp-showcase-copy h3 { margin: 0; color: var(--kairo-delft); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; }
html.kairo-v3 .kairo-lp-showcase-copy > p { margin: 12px 0 0; color: var(--kairo-entry-muted); font-size: 15px; line-height: 1.7; }
html.kairo-v3 .kairo-lp-showcase-copy .kairo-lp-price-list { margin: 18px 0 0; }
html.kairo-v3 .kairo-lp-more-features { margin-top: clamp(56px, 7vw, 88px); padding-top: 32px; border-top: 1px solid var(--kairo-entry-line); }
html.kairo-v3 .kairo-lp-more-features h3 { margin: 0; color: var(--kairo-delft); font-size: 18px; }
html.kairo-v3 .kairo-lp-more-features ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin: 22px 0 0; padding: 0; list-style: none;
}
html.kairo-v3 .kairo-lp-more-features li { display: grid; gap: 4px; }
html.kairo-v3 .kairo-lp-more-features strong { color: var(--kairo-delft); font-size: 14px; }
html.kairo-v3 .kairo-lp-more-features li > span { color: var(--kairo-entry-muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 860px) {
  html.kairo-v3 .kairo-lp-showcase-row,
  html.kairo-v3 .kairo-lp-showcase-row.is-flipped { grid-template-columns: 1fr; gap: 22px; }
  html.kairo-v3 .kairo-lp-showcase-row.is-flipped :is(.kairo-lp-shot, .kairo-lp-showcase-copy) { grid-column: 1; grid-row: auto; }
  html.kairo-v3 .kairo-lp-more-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html.kairo-v3 .kairo-lp-plan-lite-grid { grid-template-columns: 1fr; margin-top: 30px; }
  html.kairo-v3 .kairo-lp-plan-lite { padding: 22px; }
  html.kairo-v3 .kairo-lp-shot { padding: 8px; border-radius: 16px; }
  html.kairo-v3 .kairo-lp-shot img { border-radius: 10px; }
  html.kairo-v3 .kairo-lp-shot.is-tall { width: min(300px, 100%); }
  html.kairo-v3 .kairo-lp-more-features ul { grid-template-columns: 1fr; gap: 16px; }
}

/* Dashboard upgrade hint (Gratis only, kairo-v3.js): clear but quiet — one slim row, dismissible. */
html.kairo-v3 #kairo-upgrade-hint:not([hidden]) {
  display: flex; align-items: center; gap: 14px; margin: 0 0 var(--v3-card-gap, 16px); padding: 12px 14px 12px 16px;
  border: 1px solid color-mix(in srgb, var(--v3-primary) 28%, var(--v3-line)); border-radius: var(--v3-r-md, 16px);
  background: color-mix(in srgb, var(--v3-primary) 6%, var(--v3-surface));
}
html.kairo-v3 .kairo-upgrade-hint-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--v3-primary) 16%, var(--v3-surface)); color: var(--v3-primary-dark);
}
html.kairo-v3 .kairo-upgrade-hint-icon svg,
html.kairo-v3 .kairo-upgrade-hint-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-upgrade-hint-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.kairo-v3 .kairo-upgrade-hint-copy strong { color: var(--v3-ink); font-size: 13.5px; }
html.kairo-v3 .kairo-upgrade-hint-copy span { color: var(--v3-ink-soft); font-size: 12.5px; line-height: 1.45; }
html.kairo-v3 .kairo-upgrade-hint-actions { flex: none; display: flex; align-items: center; gap: 6px; }
html.kairo-v3 .kairo-upgrade-hint-copy .is-short { display: none; }
html.kairo-v3 .kairo-upgrade-hint-cta {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--v3-primary); color: var(--v3-on-primary); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
html.kairo-v3 .kairo-upgrade-hint-cta:hover { background: var(--v3-primary-dark); color: #fff; }
html.kairo-v3 .kairo-upgrade-hint-close {
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--v3-muted);
}
html.kairo-v3 .kairo-upgrade-hint-close:hover { background: color-mix(in srgb, var(--v3-ink) 7%, transparent); color: var(--v3-ink); }
html.kairo-v3 :is(.kairo-upgrade-hint-cta, .kairo-upgrade-hint-close):focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
@media (max-width: 640px) {
  html.kairo-v3 #kairo-upgrade-hint:not([hidden]) { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 10px 12px; padding: 12px; align-items: start; }
  html.kairo-v3 .kairo-upgrade-hint-actions { display: contents; }
  html.kairo-v3 .kairo-upgrade-hint-copy .is-long { display: none; }
  html.kairo-v3 .kairo-upgrade-hint-copy .is-short { display: inline; }
  html.kairo-v3 .kairo-upgrade-hint-close { grid-column: 3; grid-row: 1; }
  html.kairo-v3 .kairo-upgrade-hint-cta { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; }
}