/* =========================================================
   MeraWorkflow stylesheet
   One set of colour tokens per theme. Everything on the page
   reads from these tokens, so switching theme only swaps the
   values below. No stacked overrides, no !important patches.
   Tokens are RGB triples so Tailwind can apply opacity,
   e.g. bg-accent/10 or border-line/10.
   ========================================================= */

/* ---------- 1. THEME TOKENS ---------- */

:root,
html[data-theme="dark"] {
  --bg: 11 17 24;          /* page            #0B1118 */
  --card: 18 26 35;        /* card            #121A23 */
  --elevated: 24 35 48;    /* raised card     #182330 */
  --sunken: 8 12 18;       /* inset areas     #080C12 */
  --ink: 241 245 249;      /* headings        #F1F5F9 */
  --body: 148 163 184;     /* body text       #94A3B8 */
  --muted: 112 128 150;    /* small labels    #708096 */
  --line: 255 255 255;     /* borders (used with opacity) */
  --accent: 91 141 239;    /* brand blue      #5B8DEF */
  --accent-hover: 110 156 250;
  --accent-ink: 147 180 255; /* accent text on tinted backgrounds */
  --green: 52 211 153;
  --amber: 251 191 36;
  --red: 248 113 113;
  --violet: 167 139 250;
  --cyan: 34 211 238;
  --shadow: 0 0 0;
  --shadow-a: .28;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: 201 208 217;       /* page            #C9D0D9  cool grey, never white */
  --card: 221 226 232;     /* card            #DDE2E8  lifts off the page without glare */
  --elevated: 229 233 238; /* raised card     #E5E9EE */
  --sunken: 210 216 223;   /* inset areas     #D2D8DF */
  --ink: 17 24 39;         /* headings        #111827 */
  --body: 71 82 97;        /* body text       #475261 */
  --muted: 84 96 112;      /* small labels    #546070 */
  --line: 23 32 42;
  --accent: 59 111 212;    /* brand blue      #3B6FD4  darker for contrast on grey */
  --accent-hover: 47 96 194;
  --accent-ink: 40 82 168;
  --green: 4 128 88;
  --amber: 168 102 0;
  --red: 196 50 50;
  --violet: 104 70 204;
  --cyan: 6 122 150;
  --shadow: 30 41 59;
  --shadow-a: .10;
  color-scheme: light;
}


/* ---------- 2. BASE ---------- */

html {
  scroll-behavior: smooth;
  background: rgb(var(--bg));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: rgb(var(--bg));
  color: rgb(var(--body));
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, h4 {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  color: rgb(var(--ink));
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Numbers in dashboards line up digit for digit */
.tabular { font-variant-numeric: tabular-nums; }

a, button { -webkit-tap-highlight-color: transparent; }

::selection {
  background: rgb(var(--accent));
  color: #fff;
}

/* Sections land below the sticky header when linked to. */
section[id] { scroll-margin-top: 88px; }

/* Views are switched by script using the hidden attribute. */
.site-view[hidden] { display: none !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgb(var(--accent));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Thin scrollbar that follows the theme */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--accent) / .55) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgb(var(--bg)); }
::-webkit-scrollbar-thumb {
  background: rgb(var(--accent) / .45);
  border-radius: 999px;
  border: 2px solid rgb(var(--bg));
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent) / .7); }


/* ---------- 3. PAGE BACKGROUND GLOW ---------- */

.page-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 38rem at 8% -12%, rgb(var(--accent) / .11), transparent 62%),
    radial-gradient(48rem 36rem at 102% 18%, rgb(var(--violet) / .07), transparent 60%);
}
html[data-theme="light"] .page-glow { opacity: .8; }


/* ---------- 4. HEADER & NAVIGATION ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(var(--bg) / .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: rgb(var(--line) / .08); }

/* ---------- Logo: folded ribbon MW ---------- */
.logo-mark {
  width: 38px;
  height: 38px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 6px 14px rgb(var(--accent) / .30));
}
.logo-tile {
  fill: rgb(var(--accent));
  transform-box: fill-box;
  transform-origin: center;
}
.logo-ribbon line {
  stroke: #fff;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
}
.logo-ribbon .shade { stroke-opacity: .62; }

/* Wordmark pieces rise from behind a clip */
.logo-wm > span { display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: bottom; }
.logo-wm > span > span { display: inline-block; }

/* Full intro on page load: tile pops, ribbon unfolds panel by panel, words rise */
.brand.is-intro .logo-tile { animation: logoPop .55s cubic-bezier(.34,1.56,.64,1) both; }
.brand.is-intro .logo-ribbon line,
.brand.is-fold .logo-ribbon line {
  animation: logoFold .28s cubic-bezier(.65,0,.35,1) both;
  animation-delay: calc(.25s + var(--i) * .13s);
}
.brand.is-fold .logo-ribbon line { animation-delay: calc(var(--i) * .1s); }
.brand.is-intro .logo-wm > span > span { animation: logoRise .7s cubic-bezier(.16,1,.3,1) both; }
.brand.is-intro .logo-wm > span:nth-child(1) > span { animation-delay: .55s; }
.brand.is-intro .logo-wm > span:nth-child(2) > span { animation-delay: .68s; }

@keyframes logoPop  { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes logoFold { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes logoRise { from { transform: translateY(110%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .brand .logo-tile, .brand .logo-ribbon line, .brand .logo-wm > span > span { animation: none !important; }
}

.nav-link {
  position: relative;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--body));
  transition: color .2s ease;
}
.nav-link:hover,
.nav-link.is-active { color: rgb(var(--ink)); }

/* One underline that slides to the active link */
.nav-indicator {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: rgb(var(--accent));
  opacity: 0;
  transition: left .4s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  pointer-events: none;
}

/* Flow Hub dropdown: opens on hover and on keyboard focus */
.hub-nav { position: relative; padding: 10px 0; margin: -10px 0; }
.hub-chevron { transition: transform .2s ease; }
.hub-nav:hover .hub-chevron,
.hub-nav:focus-within .hub-chevron { transform: rotate(180deg); }

.hub-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: 300px;
  padding: 8px;
  border-radius: 18px;
  background: rgb(var(--elevated));
  border: 1px solid rgb(var(--line) / .12);
  box-shadow: 0 24px 60px rgb(var(--shadow) / calc(var(--shadow-a) + .12));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s;
  z-index: 60;
}
.hub-nav:hover .hub-dropdown,
.hub-nav:focus-within .hub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.hub-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.hub-dropdown-item:hover { background: rgb(var(--accent) / .09); }

.hub-dd-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent) / .10);
  color: rgb(var(--accent-ink));
}
.hub-dd-title { display: block; font-size: 14px; font-weight: 600; color: rgb(var(--ink)); }
.hub-dd-desc  { display: block; font-size: 12px; color: rgb(var(--muted)); margin-top: 1px; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgb(var(--line) / .12);
  background: rgb(var(--card));
  color: rgb(var(--body));
  font-size: 13px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: rgb(var(--ink)); background: rgb(var(--elevated)); border-color: rgb(var(--line) / .2); }
.theme-icon-sun, .theme-icon-moon { display: inline-flex; animation: iconSpin .5s cubic-bezier(.16,1,.3,1); }
@keyframes iconSpin { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun { display: none; }

/* Mobile menu */
.menu-toggle {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--line) / .12);
  background: rgb(var(--card));
  color: rgb(var(--ink));
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  border-top: 1px solid rgb(var(--line) / .08);
  background: rgb(var(--bg));
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.mobile-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  color: rgb(var(--ink));
}
.mobile-link.is-active,
.mobile-link:hover { background: rgb(var(--accent) / .09); color: rgb(var(--accent-ink)); }
.mobile-sublink {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: rgb(var(--body));
}
.mobile-sublink:hover { color: rgb(var(--ink)); background: rgb(var(--line) / .04); }


/* ---------- 5. BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }

.btn-primary {
  background: rgb(var(--accent));
  color: #fff;
  border: 1px solid rgb(var(--accent));
  box-shadow: 0 8px 22px rgb(var(--accent) / .25);
}
.btn-primary:hover { background: rgb(var(--accent-hover)); transform: translateY(-1px); }

.btn-secondary {
  background: rgb(var(--card));
  color: rgb(var(--ink));
  border: 1px solid rgb(var(--line) / .14);
}
.btn-secondary:hover { background: rgb(var(--elevated)); border-color: rgb(var(--line) / .22); transform: translateY(-1px); }

.btn:active { transform: translateY(0) scale(.98); }
.btn .btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }


/* ---------- 6. SURFACES, LABELS, ICONS ---------- */

.surface {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--line) / .09);
  box-shadow: 0 12px 32px rgb(var(--shadow) / var(--shadow-a));
}

.surface-elevated {
  background: rgb(var(--elevated));
  border: 1px solid rgb(var(--line) / .12);
  box-shadow: 0 20px 50px rgb(var(--shadow) / calc(var(--shadow-a) + .04));
}

/* Inset panel inside a card (mockup tiles, form groups) */
.well {
  background: rgb(var(--line) / .035);
  border: 1px solid rgb(var(--line) / .08);
}
html[data-theme="light"] .well { background: rgb(var(--sunken) / .55); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(var(--accent) / .10);
  border: 1px solid rgb(var(--accent) / .25);
  color: rgb(var(--accent-ink));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.pulse-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--accent));
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: pulse 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pulse { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.section-title {
  margin-top: 18px;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.section-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(var(--body));
}
.text-center .section-lead { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .section-lead { font-size: 1.125rem; } }

/* Quiet section label. The pill (.eyebrow) is kept for status only. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--accent-ink));
}
.kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--accent));
}

.icon-tile {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent) / .10);
  border: 1px solid rgb(var(--accent) / .22);
  color: rgb(var(--accent-ink));
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgb(var(--line) / .06);
  color: rgb(var(--muted));
  border: 1px solid rgb(var(--line) / .08);
}

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
}


/* ---------- 7. INTERACTIVE CARDS ---------- */

.interactive-card {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.interactive-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgb(var(--accent) / .12), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.interactive-card > * { position: relative; z-index: 1; }
.interactive-card:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--accent) / .32);
  box-shadow: 0 24px 50px rgb(var(--shadow) / calc(var(--shadow-a) + .08));
}
.interactive-card:hover::before { opacity: 1; }
.interactive-card:hover .icon-tile { transform: scale(1.08) rotate(-3deg); }


/* ---------- 8. MOTION ---------- */

/* Hero elements animate in on load (no script needed). */
.hero-in {
  opacity: 0;
  animation: heroIn .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll reveal. Content is only hidden when script is running
   (html.js), so nothing can get stuck invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1),
              border-color .35s ease, box-shadow .35s ease;
}
.js .stagger.is-visible > * { opacity: 1; transform: none; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
/* After the entrance, hover lift must respond instantly. */
.js .stagger.is-settled > * { transition-delay: 0ms; }
.js .stagger.is-settled > .interactive-card:hover { transform: translateY(-5px); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.float   { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7s ease-in-out 2s infinite; }


/* ---------- 9. HOW IT WORKS: INTERACTIVE STEPPER ---------- */

.step-list { position: relative; display: flex; flex-direction: column; gap: 6px; }

/* Vertical line linking the step numbers */
.step-list::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 38px;
  bottom: 38px;
  width: 1px;
  background: rgb(var(--line) / .12);
}

.step-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step-item:hover { background: rgb(var(--line) / .035); }
.step-item[aria-selected="true"] {
  background: rgb(var(--card));
  border-color: rgb(var(--line) / .10);
  box-shadow: 0 14px 34px rgb(var(--shadow) / var(--shadow-a));
}

.step-num {
  position: relative;
  z-index: 1;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--line) / .16);
  color: rgb(var(--muted));
  font: 800 13px/1 "Manrope", sans-serif;
  letter-spacing: .03em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.step-item[aria-selected="true"] .step-num {
  background: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #fff;
}

.step-body { display: block; padding-top: 8px; min-width: 0; }
.step-title {
  display: block;
  font: 700 17px/1.3 "Manrope", sans-serif;
  letter-spacing: -0.02em;
  color: rgb(var(--body));
  transition: color .25s ease;
}
.step-item[aria-selected="true"] .step-title { color: rgb(var(--ink)); }

/* Description expands only on the active step */
.step-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1);
}
.step-desc > span {
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgb(var(--body));
}
.step-item[aria-selected="true"] .step-desc { grid-template-rows: 1fr; }
.step-item[aria-selected="true"] .step-desc > span { padding-top: 6px; }

/* Progress bar under the active step, drives auto-advance */
.step-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: rgb(var(--accent));
}
.stepper.is-auto .step-item[aria-selected="true"] .step-progress {
  animation: stepProgress var(--step-duration, 5s) linear forwards;
}
.stepper.is-paused .step-progress,
.stepper.is-offscreen .step-progress { animation-play-state: paused !important; }
@keyframes stepProgress { from { width: 0; } to { width: 100%; } }

/* Preview stage */
.step-panel { animation: panelIn .45s cubic-bezier(.16,1,.3,1); }
.step-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mock-label { font-size: 11px; font-weight: 600; color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: .06em; }
.mock-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgb(var(--bg) / .55);
  border: 1px solid rgb(var(--line) / .10);
  font-size: 14px;
  color: rgb(var(--ink));
}
html[data-theme="light"] .mock-field { background: rgb(var(--elevated)); }

.mock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.mock-btn.primary { background: rgb(var(--accent)); color: #fff; }
.mock-btn.ghost { border: 1px solid rgb(var(--line) / .14); color: rgb(var(--ink)); }

@media (max-width: 1023px) {
  .step-item { padding: 14px 16px; }
  .step-list::before { left: 35px; }
}


/* ---------- 10. FLOW HUB TABS ---------- */

.hub-tab {
  flex: none;
  white-space: nowrap;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--body));
  border: 1px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.hub-tab:hover { color: rgb(var(--ink)); background: rgb(var(--line) / .04); }
.hub-tab[aria-selected="true"] {
  color: rgb(var(--ink));
  background: rgb(var(--accent) / .12);
  border-color: rgb(var(--accent) / .30);
}
.hub-panel { animation: panelIn .4s cubic-bezier(.16,1,.3,1); }
.hub-panel[hidden] { display: none; }


/* ---------- 11. FORMS ---------- */

.field-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: rgb(var(--ink)); }
.field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgb(var(--bg) / .6);
  border: 1px solid rgb(var(--line) / .12);
  color: rgb(var(--ink));
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="light"] .field { background: rgb(var(--elevated)); }
.field::placeholder { color: rgb(var(--muted)); }
.field:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 4px rgb(var(--accent) / .16); }
select.field { appearance: none; padding-right: 40px; cursor: pointer; }
select.field option { background: rgb(var(--elevated)); color: rgb(var(--ink)); }


/* ---------- 12. HERO TEXTURE AND LIVE DASHBOARD ---------- */

.hero-grid {
  position: absolute;
  inset: -72px 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--line) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--line) / .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 25%, transparent 75%);
}
html[data-theme="light"] .hero-grid { opacity: .8; }

/* The hero dashboard "switches on": bars grow, progress fills, activity arrives */
.js .live-dash [data-bar] {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms + 600ms);
}
.js .live-dash [data-fill] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1) 900ms;
}
.js .live-dash [data-pop] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 140ms + 900ms);
}
.js .live-dash.is-live [data-bar],
.js .live-dash.is-live [data-fill],
.js .live-dash.is-live [data-pop] { transform: none; opacity: 1; }

/* Showcase dashboard settles from a slight 3D tilt as it scrolls in (driven by script) */
.tilt { transform-origin: 50% 0; will-change: transform; }


/* ---------- 13. TOOLS ---------- */

.tool-card { display: flex; flex-direction: column; }
.tool-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 24px rgb(var(--shadow) / calc(var(--shadow-a) + .06));
}
.tool-mark.blue   { background: linear-gradient(140deg, rgb(var(--accent)), rgb(var(--accent-ink))); }
.tool-mark.violet { background: linear-gradient(140deg, rgb(var(--violet)), rgb(var(--accent))); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgb(var(--green));
  background: rgb(var(--green) / .10);
  border: 1px solid rgb(var(--green) / .25);
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Sign-in steps */
#signin-form [hidden] { display: none !important; }
.signin-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgb(var(--line) / .05);
  border: 1px solid rgb(var(--line) / .12);
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--muted));
}
.pw-toggle:hover { color: rgb(var(--ink)); }
.code-field { font: 700 22px/1 "Manrope", sans-serif; letter-spacing: .5em; text-align: center; padding-left: .5em; }
.btn[disabled] { opacity: .65; pointer-events: none; }

/* Signed-in / signed-out UI (session is set by script) */
html:not(.is-signed-in) .signed-in-only { display: none !important; }
html.is-signed-in .signed-out-only { display: none !important; }
.tool-card[hidden] { display: none !important; }


/* ---------- 14. PAGE TRANSITIONS ---------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
}
.site-header { view-transition-name: site-header; }


/* ---------- 15. REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-in, .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; }
  .float, .float-2, .pulse-dot::after { animation: none !important; }
  .js .live-dash [data-bar], .js .live-dash [data-fill], .js .live-dash [data-pop] { transform: none !important; opacity: 1 !important; }
  .tilt { transform: none !important; }
}


/* ---------- 12. PAGE BUILDER BLOCKS (added with the master admin panel) ---------- */

.tool-mark.green  { background: linear-gradient(140deg, rgb(var(--green)), rgb(var(--cyan))); }
.tool-mark.amber  { background: linear-gradient(140deg, rgb(var(--amber)), rgb(var(--red))); }
.tool-mark.cyan   { background: linear-gradient(140deg, rgb(var(--cyan)), rgb(var(--accent))); }
.tool-mark.red    { background: linear-gradient(140deg, rgb(var(--red)), rgb(var(--violet))); }
.tool-mark.slate  { background: linear-gradient(140deg, rgb(var(--muted)), rgb(var(--body))); }
.tool-mark.has-logo { background: rgb(var(--elevated)); border: 1px solid rgb(var(--line) / .12); padding: 8px; overflow: hidden; }

/* Text written in the page editor */
.prose-mw { color: rgb(var(--body)); font-size: 1.0625rem; line-height: 1.75; }
.prose-mw > * + * { margin-top: 1em; }
.prose-mw h3, .prose-mw h4, .prose-mw h5 { color: rgb(var(--ink)); font-weight: 700; line-height: 1.3; margin-top: 1.6em; }
.prose-mw h3 { font-size: 1.5rem; }
.prose-mw h4 { font-size: 1.2rem; }
.prose-mw strong { color: rgb(var(--ink)); }
.prose-mw a { color: rgb(var(--accent-ink)); text-decoration: underline; text-underline-offset: 3px; }
.prose-mw ul, .prose-mw ol { padding-left: 1.3em; }
.prose-mw ul { list-style: disc; }
.prose-mw ol { list-style: decimal; }
.prose-mw li + li { margin-top: .35em; }
.text-center .prose-mw ul, .text-center .prose-mw ol { display: inline-block; text-align: left; }

/* Questions that open */
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-weight: 600; color: rgb(var(--ink)); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { flex: none; color: rgb(var(--muted)); transition: transform .25s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 22px 20px; font-size: 1rem; }

/* Pricing */
.plan-highlight { border-color: rgb(var(--accent) / .55); box-shadow: 0 0 0 1px rgb(var(--accent) / .35), 0 20px 50px rgb(var(--shadow) / calc(var(--shadow-a) + .04)); }

/* Contact form spam trap: invisible to people */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Flow Hub message (payment due, workspace paused) */
.hub-notice { border-color: rgb(var(--amber) / .4); background: rgb(var(--amber) / .08); }

/* Admin "view as" bar and page preview */
.impersonate-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 8px 16px; background: rgb(var(--amber)); color: #111827; font-size: 13.5px; }
.impersonate-bar button { font-weight: 700; text-decoration: underline; }
.impersonate-bar[hidden] { display: none; }
.preview-ribbon { position: fixed; z-index: 70; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  background: rgb(var(--amber)); color: #111827; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px rgb(0 0 0 / .25); pointer-events: none; }
.block-flash { animation: blockFlash 1.4s ease; }
@keyframes blockFlash { 0%, 40% { box-shadow: inset 0 0 0 3px rgb(var(--accent)); } 100% { box-shadow: inset 0 0 0 3px transparent; } }

/* White-label logos: a separate logo can be shown on the light theme */
.brand-logo-light { display: none; }
html[data-theme="light"] .brand-logo-light { display: block; }
html[data-theme="light"] .brand-logo-light ~ .brand-logo-dark,
html[data-theme="light"] .brand-logo-dark:has(+ .brand-logo-light) { display: none; }
.impersonate-bar { height: 38px; padding-top: 0; padding-bottom: 0; }
.is-impersonating .site-header { top: 38px; }
@media (max-width: 640px) { .impersonate-bar { height: auto; padding: 6px 12px; font-size: 12.5px; } .is-impersonating .site-header { top: 0; } }