:root{
  --bg:hsl(222,22%,6%);
  --bg-2:hsl(222,20%,8%);
  --bg-3:hsl(222,18%,11%);
  --surface:hsla(222,20%,10%,.62);
  --surface-2:hsla(222,20%,10%,.86);
  --surface-3:hsla(222,18%,12%,.94);
  --line:hsla(220,14%,30%,.28);
  --line-strong:hsla(220,14%,40%,.42);
  --text:hsl(210,22%,94%);
  --text-2:hsl(215,14%,60%);
  --text-3:hsl(215,12%,40%);
  --accent:hsl(38,92%,58%);
  --accent-2:hsl(38,100%,70%);
  --accent-soft:hsla(38,92%,58%,.1);
  --accent-soft-2:hsla(38,92%,58%,.2);
  --accent-glow:hsla(38,92%,58%,.32);
  /* Dark ink for content placed ON the orange accent. The previous
     code referenced var(--accent-ink) without ever defining it, so
     active segmented pills, the operation tab-bar active state, and
     the Continue-to-Paymob accented button rendered with light-grey
     inherited text on an orange background, looking like an empty
     accent strip with barely-visible labels. A very dark ink gives
     strong contrast in both themes; same hue as accent so it stays
     part of the same accent system. */
  --accent-ink:hsl(28,80%,12%);
  --blue:hsl(210,72%,72%);
  --green:hsl(155,60%,54%);
  --red:hsl(0,72%,70%);
  --shadow:0 28px 80px -30px rgba(0,0,0,.6);
  --shadow-soft:0 16px 40px -24px rgba(0,0,0,.5);
  --shadow-glow:0 0 44px -14px var(--accent-glow);
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --max:1280px;
  --narrow:960px;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.2,.8,.24,1);
  --t-fast:.18s;
  --t-med:.34s;
  --t-slow:.72s;
  --nav-h:72px;
}

html[data-theme="light"]{
  --bg:hsl(36,30%,96%);
  --bg-2:hsl(36,24%,93%);
  --bg-3:hsl(34,22%,89%);
  --surface:hsla(42,48%,98%,.78);
  --surface-2:hsla(42,48%,98%,.94);
  --surface-3:hsla(38,36%,94%,.96);
  --line:hsla(30,18%,42%,.14);
  --line-strong:hsla(30,18%,42%,.24);
  --text:hsl(222,22%,12%);
  --text-2:hsl(222,14%,34%);
  --text-3:hsl(222,12%,50%);
  --accent:hsl(28,78%,42%);
  --accent-2:hsl(30,84%,54%);
  --accent-soft:hsla(28,78%,42%,.1);
  --accent-soft-2:hsla(28,78%,42%,.18);
  --accent-glow:hsla(28,78%,42%,.28);
  /* Light theme accent is a deeper amber, so the ink on it is a
     near-white instead of the dark ink used in the dark theme. */
  --accent-ink:hsl(38,90%,98%);
  --blue:hsl(210,60%,44%);
  --green:hsl(155,60%,32%);
  --red:hsl(0,55%,48%);
  --shadow:0 28px 70px -30px rgba(81,55,23,.18);
  --shadow-soft:0 14px 32px -22px rgba(81,55,23,.16);
  --shadow-glow:0 0 44px -14px var(--accent-glow);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font:15px/1.72 var(--font-body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1100px 560px at 50% -6%, hsla(38,92%,58%,.045), transparent 60%),
    radial-gradient(900px 480px at 100% 20%, hsla(210,72%,56%,.024), transparent 66%),
    radial-gradient(900px 480px at 50% 112%, hsla(222,28%,16%,.36), transparent 62%),
    linear-gradient(180deg, hsl(222,22%,8%) 0%, var(--bg) 48%, hsl(222,22%,7%) 100%);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 560px at 50% -6%, hsla(28,78%,42%,.11), transparent 60%),
    radial-gradient(900px 480px at 100% 20%, hsla(210,60%,44%,.05), transparent 66%),
    linear-gradient(180deg, hsl(36,32%,95%) 0%, var(--bg) 48%, hsl(36,30%,92%) 100%);
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  letter-spacing:-.028em;
  line-height:1.06;
  color:var(--text);
}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{font-family:inherit}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
svg{display:block;flex-shrink:0}

.hidden{display:none !important}
.mini{font-size:12px;color:var(--text-3);line-height:1.72}
.eyebrow,
.section-kicker,
.hero-kicker,
.workspace-kpi-label,
.presence-label,
.hero-metric-label{
  display:inline-block;
  font:700 11.5px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.section-kicker,
.hero-kicker{color:var(--accent)}
.workspace-kpi-label,
.presence-label,
.hero-metric-label{color:var(--text-3)}

.container{max-width:var(--max);margin:0 auto;padding:0 36px}
.section{
  padding:92px 0;
  position:relative;
  isolation:isolate;
}
.section::after{
  content:"";
  position:absolute;
  left:clamp(20px,5vw,40px);
  right:clamp(20px,5vw,40px);
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
  pointer-events:none;
  opacity:.9;
}
.section-alt{
  background:
    linear-gradient(180deg, hsla(220,18%,12%,.22), hsla(220,16%,10%,.08));
}
html[data-theme="light"] .section-alt{
  background:linear-gradient(180deg, hsla(36,24%,90%,.5), hsla(36,22%,92%,.22));
}
.section-narrow{max-width:var(--narrow)}
.section-head{
  display:grid;
  gap:16px;
  margin-bottom:44px;
  max-width:760px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/*
  Grid items inside a centered section head default to `stretch`. The kicker,
  title (760px max), and sub (660px max) would each line up against the left
  edge of the 760px container instead of being centered. justify-self:center
  centers the bounding box of each child within the parent grid track so the
  smaller-max-width sub paragraph stays optically centered under the title.
*/
.section-head.center > *{justify-self:center}
.section-title{
  font-size:clamp(2rem,3vw,3rem);
  font-weight:700;
  letter-spacing:-.028em;
  text-wrap:balance;
  max-width:760px;
}
.section-sub{
  max-width:660px;
  color:var(--text-2);
  font-size:15.5px;
  line-height:1.82;
  text-wrap:pretty;
}
.how-outro{margin:26px auto 0;text-align:center}

.glass,
.workspace-panel,
.workspace-kpi,
.workspace-note,
.feature-spotlight,
.story-step,
.status-box,
.faq-item,
.auth-card,
.auth-side-panel,
.hero-panel,
.workspace-presence,
.includes-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.02);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 22px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font:600 14px/1 var(--font-display);
  letter-spacing:.005em;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    filter var(--t-med) var(--ease);
  will-change:transform;
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.btn-primary{
  color:hsl(222,22%,7%);
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 28px -16px var(--accent-glow);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px var(--accent-glow), inset 0 0 0 1px hsla(38,100%,70%,.22);
  filter:brightness(1.04);
}
.btn-ghost{
  color:var(--text);
  background:hsla(220,18%,12%,.32);
  border-color:var(--line);
}
html[data-theme="light"] .btn-ghost{background:hsla(36,36%,90%,.62)}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft-2);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.5);
}
.btn-line{color:var(--text);background:transparent;border-color:var(--line)}
.btn-line:hover{border-color:var(--accent-soft-2);transform:translateY(-2px)}
.btn-soft{color:var(--text);background:var(--accent-soft);border-color:var(--accent-soft-2)}
.btn-soft:hover{transform:translateY(-2px);background:var(--accent-soft-2)}
.btn[disabled]{opacity:.55;transform:none;box-shadow:none;cursor:not-allowed;filter:none}

/*
  OAuth (Google / Microsoft) sign-in buttons. Visually primary so they read
  as the recommended sign-in path even though we render them on dark mode
  with a polished "card" surface rather than the warm orange of .btn-primary.
  We keep brand accuracy on the glyph (Google's four-color G, Microsoft's
  four-square logo) and use a neutral white-ish surface so both providers
  look correct side-by-side. Email/password remains visible below.
*/
.oauth-providers{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:6px 0 18px;
}
.oauth-providers.hidden{display:none}
.btn-oauth{
  width:100%;
  min-height:48px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  color:#1f1d1a;
  text-decoration:none;
  font:600 14px/1 var(--font-display);
  letter-spacing:.005em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 6px 18px -14px rgba(0,0,0,.45);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease);
}
.btn-oauth:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.5);
  border-color:var(--accent-soft-2);
  background:#fafafa;
}
.btn-oauth:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 6px 18px -14px rgba(0,0,0,.45)}
.btn-oauth.hidden{display:none}
.btn-oauth .oauth-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:none;
}
.btn-oauth .oauth-label{font-weight:600}
html[data-theme="light"] .btn-oauth{background:#ffffff;color:#1f1d1a}
.oauth-recommendation{
  margin:0;
  text-align:center;
  color:var(--muted);
}
.oauth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:6px 0 14px;
  color:var(--muted);
  font:600 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.oauth-divider.hidden{display:none}
.oauth-divider::before,
.oauth-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--line);
}

/*
  Auth helpers: small reassurance + checklist copy that appears under the
  signup / sign-in / forgot / reset forms. Tone is calm and informational,
  not warning. Color uses the muted token so it doesn't compete with form
  labels.
*/
.auth-helper-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.auth-helper-list{
  margin:10px 0 0;
  padding:0 0 0 18px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.auth-helper-list li{margin:0 0 4px}
.auth-helper-list li:last-child{margin-bottom:0}

/*
  Loading state for primary CTAs and OAuth buttons. Matches the visual
  language of .btn[disabled] but adds a subtle pulse so the customer sees
  something is happening without breaking the rest of the page.
*/
.btn.is-loading,
.btn-oauth.is-loading{
  cursor:progress;
  opacity:.78;
  filter:saturate(.9);
}
.btn.is-loading::after{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-left:8px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:auth-spin .65s linear infinite;
  vertical-align:-1px;
}
.btn-oauth.is-loading .oauth-glyph{
  animation:auth-spin 1.1s linear infinite;
}
/*
  Inert state for the OAuth provider the customer did NOT click. Dim and
  unclickable so the customer can see only one path is loading, but no
  spinner - only the clicked provider should appear to be triggering.
*/
.btn-oauth.is-inert{
  opacity:.45;
  filter:saturate(.6);
  cursor:not-allowed;
  pointer-events:none;
}
.btn-oauth.is-inert .oauth-glyph{animation:none}
@keyframes auth-spin{
  to{transform:rotate(360deg)}
}

.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:hsla(222,22%,6%,.72);
  border-bottom:1px solid hsla(220,14%,30%,.28);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  transition:
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.site-nav.nav-scrolled{
  background:hsla(222,22%,6%,.92);
  border-bottom-color:hsla(220,14%,40%,.4);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.4);
}
html[data-theme="light"] .site-nav{background:hsla(36,30%,94%,.76);border-bottom-color:hsla(30,18%,42%,.1)}
html[data-theme="light"] .site-nav.nav-scrolled{background:hsla(36,30%,94%,.96);border-bottom-color:hsla(30,18%,42%,.18)}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 36px;
  height:var(--nav-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.brand{display:inline-flex;align-items:center;line-height:0;color:var(--text);text-decoration:none}
.brand svg{display:block;height:22px;width:auto;fill:currentColor}
.nav-links{display:flex;justify-content:center;gap:4px}
.nav-links a{
  position:relative;
  padding:10px 14px;
  border-radius:10px;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:500;
  transition:color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:4px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0;
  transform:scaleX(.6);
  transform-origin:center;
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active,
.nav-links a.is-section-active{color:var(--text);background:hsla(220,18%,12%,.4)}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.is-active,
html[data-theme="light"] .nav-links a.is-section-active{background:hsla(36,30%,88%,.62)}
.nav-links a:hover::after,
.nav-links a.is-active::after,
.nav-links a.is-section-active::after{opacity:.9;transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:10px}
.theme-toggle,
.nav-mobile{
  min-width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(220,18%,12%,.36);
  color:var(--text);
  cursor:pointer;
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .nav-mobile{background:hsla(36,36%,90%,.62)}
.theme-toggle:hover,
.nav-mobile:hover{border-color:var(--accent-soft-2);transform:translateY(-1px)}
.theme-toggle [data-theme-label]{color:var(--text-2);font-size:12px}
.nav-mobile{display:none}
.mobile-menu{display:none;padding:10px 20px 20px;border-top:1px solid var(--line);background:var(--bg-2)}
.mobile-menu.open{display:flex;flex-direction:column;gap:6px;box-shadow:0 20px 40px rgba(0,0,0,.24)}
.mobile-menu a{padding:12px 14px;border-radius:12px;color:var(--text-2);transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.mobile-menu a:hover{background:hsla(220,18%,12%,.4);color:var(--text);transform:translateX(2px)}
.mobile-menu .btn{width:100%;margin-top:8px}

.hero{position:relative;overflow:hidden}
.hero-home{padding:96px 0 44px}
.hero-glow{
  position:absolute;
  top:-340px;
  left:50%;
  transform:translateX(-50%);
  width:1120px;
  height:860px;
  background:radial-gradient(ellipse at center, var(--accent-soft) 0%, hsla(38,92%,58%,.028) 28%, transparent 68%);
  pointer-events:none;
  z-index:0;
  animation:heroGlowFloat 12s ease-in-out infinite alternate;
}
@keyframes heroGlowFloat{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  100%{transform:translateX(-50%) translateY(18px) scale(1.04)}
}
.hero-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.hero-copy{display:grid;gap:18px;max-width:880px;margin:0 auto;text-align:center;justify-items:center;padding-top:8px}

/* Desktop hero: true two-column layout. Copy block on the left
   (kicker, headline, sub, proof, CTAs, note), Live gate preview
   card on the right, vertically aligned to the top so the headline
   and the preview's eyebrow start near the same y. At <=1120px
   the base single-column rule above takes over and the panel
   stacks below the copy, which is intentional. */
@media (min-width:1121px){
  .hero-shell{
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    gap:48px;
    align-items:start;
  }
  .hero-copy{
    max-width:none;
    margin:0;
    text-align:left;
    justify-items:start;
    padding-top:18px;
  }
  /* Slightly tighter title at desktop so the two columns balance
     without the headline ballooning past the preview card height. */
  .hero-copy .hero-title{
    font-size:clamp(2.8rem,4.4vw,3.8rem);
  }
  .hero-actions{justify-content:flex-start}
  .hero-panel{
    max-width:none;
    margin:0;
    align-self:start;
  }
}
.hero-title{
  max-width:880px;
  font-size:clamp(2.6rem,5vw,4.2rem);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.02;
  text-wrap:balance;
  color:var(--text);
}
.hero-sub{
  max-width:680px;
  color:var(--text-2);
  font-size:17px;
  line-height:1.78;
  text-wrap:pretty;
}
.hero-sub.hero-sub-soft{
  margin-top:-6px;
  color:var(--text-3);
  font-size:15px;
  line-height:1.7;
}
.hero-note{max-width:620px;color:var(--text-3);font-size:13.5px;line-height:1.75;text-wrap:pretty}
.hero-pills,
.compact-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:720px;margin:0 auto}
.hero-pill,
.preview-chip,
.ops-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(220,18%,12%,.46);
  color:var(--text-2);
  font-size:12.5px;
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}
html[data-theme="light"] .hero-pill,
html[data-theme="light"] .preview-chip,
html[data-theme="light"] .ops-chip{background:hsla(36,36%,92%,.5)}
.hero-pill,
.preview-chip{padding:9px 14px}
.hero-pill:hover{transform:translateY(-1px);border-color:var(--accent-soft-2);color:var(--text)}
.ops-chip{padding:8px 12px}
.ops-chip.is-active{
  color:var(--text);
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
  transform:translateY(-1px);
  box-shadow:0 8px 18px -12px var(--accent-glow);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.hero-panel{
  max-width:960px;
  margin:0 auto;
  padding:26px;
  border-color:var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.88), hsla(222,18%,12%,.96)),
    linear-gradient(180deg, hsla(38,92%,58%,.06), transparent 26%);
  box-shadow:var(--shadow), 0 0 48px -24px var(--accent-glow);
}
html[data-theme="light"] .hero-panel{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.94), hsla(38,36%,94%,.98)),
    linear-gradient(180deg, hsla(28,78%,42%,.08), transparent 28%);
}
.hero-panel-head,
.workspace-presence-head,
.workspace-summary-head,
.workspace-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.hero-panel h2{font-size:22px;margin-top:6px;letter-spacing:-.02em}
.signal-live{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font:700 11.5px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.signal-live span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 6px hsla(155,60%,54%,.14);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 6px hsla(155,60%,54%,.14)}
  50%{box-shadow:0 0 0 10px hsla(155,60%,54%,.04)}
}
.hero-stat-stack,
.workspace-support-list,
.workspace-flow{display:grid;gap:12px}
.hero-stat-row,
.workspace-flow-step{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.hero-stat-row:first-child,
.workspace-flow-step:first-child{border-top:none;padding-top:2px}
.hero-stat-row strong,
.workspace-flow-step b{display:block;margin-bottom:5px;color:var(--text);font:700 15px/1.3 var(--font-display);letter-spacing:-.01em}
.hero-stat-row p,
.workspace-flow-step span{color:var(--text-2);font-size:13.5px;line-height:1.72}
.workspace-flow-step strong{
  display:inline-flex;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  font:700 12px/1 var(--font-display);
  flex-shrink:0;
}
.hero-micro-metrics,
.presence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.hero-metric,
.presence-stat{
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.48);
  transition:border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .hero-metric,
html[data-theme="light"] .presence-stat{background:hsla(42,36%,94%,.7)}
.hero-metric:hover,
.presence-stat:hover{border-color:var(--accent-soft-2);transform:translateY(-1px)}
.hero-metric strong,
.presence-stat strong{display:block;margin-top:8px;font:700 18px/1.28 var(--font-display);letter-spacing:-.01em;color:var(--text)}

.preview-bars{display:flex;align-items:flex-end;gap:10px;height:104px;padding-top:6px;margin-top:16px}
.preview-bars span{
  display:block;
  flex:1;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  opacity:.92;
  transform-origin:bottom;
  transform:scaleY(.2);
  transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.hero-panel.is-visible .preview-bars span{animation:barRise .95s var(--ease) both}
.hero-panel.is-visible .preview-bars span:nth-child(1){animation-delay:.02s}
.hero-panel.is-visible .preview-bars span:nth-child(2){animation-delay:.08s}
.hero-panel.is-visible .preview-bars span:nth-child(3){animation-delay:.14s}
.hero-panel.is-visible .preview-bars span:nth-child(4){animation-delay:.2s}
.hero-panel.is-visible .preview-bars span:nth-child(5){animation-delay:.26s}
.hero-panel.is-visible .preview-bars span:nth-child(6){animation-delay:.32s}
.hero-panel.is-visible .preview-bars span:nth-child(7){animation-delay:.38s}
@keyframes barRise{
  from{transform:scaleY(.2);opacity:.35}
  to{transform:scaleY(1);opacity:.92}
}
.preview-legend{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  font-size:11px;
  color:var(--text-3);
  letter-spacing:.04em;
}

.ops-rail-section{padding:4px 0 10px}
.ops-rail-section .container{position:relative}
.ops-rail-premium{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:15px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.ops-rail-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  opacity:.6;
  transform:translateX(-100%);
  animation:opsSweep 8s linear infinite;
  pointer-events:none;
}
@keyframes opsSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.ops-status{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-2);
  font:700 11.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  z-index:1;
}
.ops-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px hsla(155,60%,54%,.14);
  animation:pulse 2.4s ease-in-out infinite;
}
.ops-signals{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}

.hero-copy,
.hero-panel,
.workspace-intro,
.workspace-presence,
.workspace-panel,
.workspace-note,
.workspace-kpi,
.presence-stat,
.auth-card,
.auth-side-panel,
.includes-card,
.story-step,
.feature-spotlight{min-width:0}

.presence-stat strong,
.workspace-note h3,
.workspace-heading,
.workspace-heading-sm,
.auth-title,
.card-copy,
.hero-sub,
.section-sub,
.hero-note,
.mini,
.workspace-sub,
.workspace-subtle{overflow-wrap:anywhere;text-wrap:pretty}

.story-steps,
.premium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.workspace-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.workspace-columns > .workspace-panel{height:100%}
.story-step,
.feature-spotlight{padding:30px;transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease)}
.story-step:hover,
.feature-spotlight:hover{transform:translateY(-3px);border-color:var(--accent-soft-2);box-shadow:var(--shadow-soft), 0 0 0 1px var(--accent-soft) inset}
.includes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.includes-card{padding:30px;display:grid;gap:14px;transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease)}
.includes-card:hover{transform:translateY(-3px);border-color:var(--accent-soft-2);box-shadow:var(--shadow-soft), 0 0 0 1px var(--accent-soft) inset}
.includes-card h3{font-size:22px;line-height:1.14;text-wrap:balance}
.includes-card p{max-width:560px;color:var(--text-2);font-size:14px;line-height:1.82;text-wrap:pretty}
.includes-chips{display:flex;flex-wrap:wrap;gap:8px}
.story-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  font:700 13px/1 var(--font-display);
  letter-spacing:.04em;
  margin-bottom:18px;
}
.story-step h3,
.feature-spotlight h3{margin-bottom:10px;font-size:20px;line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.story-step p,
.feature-spotlight p{color:var(--text-2);font-size:13.5px;line-height:1.82;text-wrap:pretty}

/* Top-level pricing section. Two panels (configurator + status
   comparison) separated by a calm gap, then a compact trust line
   and a single-line footnote. The pricing-section drops the heavy
   single-card studio chrome the previous layout used. */
.pricing-section{display:grid;gap:22px}

/* Configurator panel. The customer's primary input + the headline
   answer share one calm card. The slider studio sits at the top in
   a centered column; the hero answer sits below with the average +
   pricing context as a stacked sub-block. */
.pricing-configurator{
  display:grid;
  gap:24px;
  padding:32px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:var(--surface-2);
  isolation:isolate;
  position:relative;
}
.pricing-configurator::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:radial-gradient(80% 60% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
  pointer-events:none;
  z-index:-1;
  opacity:.55;
}
.pricing-hero{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:6px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.pricing-hero-label{
  font:600 11px/1.2 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
  margin-top:18px;
}
.pricing-hero strong{
  display:block;
  font:800 clamp(2.6rem, 5.2vw, 3.8rem)/1.02 var(--font-display);
  letter-spacing:-.025em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.pricing-hero-meta{
  margin:4px 0 0;
  display:inline-flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  font:500 14px/1.5 var(--font-display);
  color:var(--text-2);
}
.pricing-hero-meta > span:first-child{
  color:var(--text);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pricing-hero-meta-tail{color:var(--text-2)}
.pricing-hero-aux{
  margin:2px 0 0;
  font:600 11.5px/1.4 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-2);
}
.pricing-hero[data-current-status]:not([data-current-status="standard"]) .pricing-hero-aux{
  color:var(--accent);
}
/* Quiet caption directly under the hero stack. Carries the
   volume-decrease promise next to the average value. Stays small
   so the hero number remains the eye's first stop. */
.pricing-hero-caption{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
}

/* Status panel. Holds the eyebrow + caption + blurb, the comparison
   list, and the trailing buying-vs-using note. On the account drawer
   the panel also wraps the progress card. */
.pricing-status-panel{
  display:grid;
  gap:18px;
  padding:28px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:var(--surface);
}
.pricing-status-head{display:grid;gap:6px}
/* Dynamic context label between the eyebrow and the blurb. Carries
   the live-updated "For X admissions" so the reader can see at a
   glance which admission count the comparison rows are pricing.
   The label updates on every slider event via [data-status-context];
   that live update is itself the strongest cue that the comparison
   responds to the slider, so a separate "prices update with your
   selection" line is no longer needed. */
.pricing-status-context{
  margin:0;
  font:600 13.5px/1.4 var(--font-display);
  color:var(--text);
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}
.pricing-status-blurb{
  margin:0;
  max-width:64ch;
  font-size:14px;
  line-height:1.55;
  color:var(--text-2);
  text-wrap:pretty;
}
.pricing-status-note{
  margin:0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
  text-wrap:pretty;
}

/* Operator Status comparison list. Five full-width rows. Each row
   is split into two zones with their own internal stack:
     left  zone .operator-status-row-meta  -> name + eligibility
     right zone .operator-status-row-price -> total + per-admission average
   This keeps the eligibility line on a single readable line at every
   desktop width (the previous 4-column grid let "5,000 eligible paid
   admissions used" wrap to a stranded "admissions used."). The current
   account row picks up an accent left stripe + tinted background only
   on the account drawer; the homepage never highlights a row. */
.operator-status-list{
  list-style:none;
  margin:0;
  padding:0;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
  overflow:hidden;
}
.operator-status-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  transition:background var(--t-med) var(--ease);
}
@media (prefers-reduced-motion:no-preference){
  .operator-status-row{animation:operatorStatusRowEnter 240ms var(--ease) both}
}
@keyframes operatorStatusRowEnter{
  from{opacity:.55;transform:translateY(2px)}
  to{opacity:1;transform:translateY(0)}
}
.operator-status-row:last-child{border-bottom:none}
.operator-status-row.is-current{
  background:var(--accent-soft);
}
html[data-theme="light"] .operator-status-row.is-current{
  background:hsla(28, 92%, 56%, .14);
}
.operator-status-row.is-current::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--accent);
}
.operator-status-row-meta{
  display:grid;
  gap:6px;
  min-width:0;
}
.operator-status-row-price{
  display:grid;
  gap:4px;
  justify-items:end;
  min-width:0;
}
.operator-status-row-name{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.operator-status-row-name > span:first-child{
  font:700 15.5px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.operator-status-row-tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font:600 10px/1.6 var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--accent-ink);
  white-space:nowrap;
}
.operator-status-row-tag.is-baseline{
  background:transparent;
  color:var(--text-2);
  border:1px solid var(--line-strong);
}
.operator-status-row-eligibility{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--text-2);
  text-wrap:pretty;
}
.operator-status-row-total{
  font:700 22px/1.1 var(--font-display);
  letter-spacing:-.015em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.operator-status-row-avg{
  font-size:13px;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* Pricing input. Centered slider + readout used on the homepage and
   inside the account-side Buy admissions drawer. The slider is the
   customer's primary action; making it visually anchored centers
   the configurator. */
.pricing-input{
  display:grid;
  gap:14px;
  justify-items:center;
  text-align:center;
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.pricing-input .pricing-range{width:100%}
.pricing-input-readout{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.pricing-input-readout span{color:var(--text-2);font-size:14px;align-self:flex-end;padding-bottom:6px}

.pricing-range{
  width:100%;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  accent-color:var(--accent);
  -webkit-appearance:none;
  appearance:none;
  height:6px;
}
.pricing-range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent) var(--slider-progress,50%), hsla(220,18%,20%,.5) var(--slider-progress,50%));
}
html[data-theme="light"] .pricing-range::-webkit-slider-runnable-track{
  background:linear-gradient(90deg, var(--accent) var(--slider-progress,50%), hsla(30,18%,60%,.4) var(--slider-progress,50%));
}
.pricing-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top:-7px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--accent-2);
  border:2px solid var(--bg);
  box-shadow:0 4px 14px -4px var(--accent-glow);
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease);
}
.pricing-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.pricing-range::-moz-range-thumb{
  width:20px;height:20px;
  border-radius:50%;
  background:var(--accent-2);
  border:2px solid var(--bg);
  box-shadow:0 4px 14px -4px var(--accent-glow);
  cursor:pointer;
}
.pricing-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:hsla(220,18%,20%,.5);
}
/* Slider readout. The clamp keeps the input number confidently big
   on desktop without crossing the hero answer's clamp ceiling, so
   the answer always reads larger than the input. */
.pricing-number{
  width:auto;
  min-width:120px;
  padding:0;border:none;background:transparent;
  color:var(--text);font:800 clamp(28px, 3.6vw, 40px)/1 var(--font-display);letter-spacing:-.028em;
  text-align:center;
}
.workspace-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.workspace-columns,
.workspace-note-grid,
.workspace-kpi-grid,
.presence-grid,
.hero-micro-metrics{min-width:0}
.workspace-kpi{padding:20px 22px;transition:border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease)}
.workspace-kpi:hover{border-color:var(--accent-soft-2);transform:translateY(-2px)}
.workspace-kpi strong{display:block;margin-top:10px;font:800 clamp(1.7rem,2.6vw,2.2rem)/1 var(--font-display);letter-spacing:-.02em}
/* Compact trust line under the Operator Status section. Three product
   truths (monthly starter, first-admission-only billing, retries
   don't recount) inlined as dot-separated items. The first-admission
   rule carries .is-pillar so the customer's eye lands on the central
   billing invariant first. */
.pricing-trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
}
.pricing-trust-row li{
  display:inline-flex;
  align-items:center;
  position:relative;
}
.pricing-trust-row li + li::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--line-strong);
  transform:translateY(-50%);
}
.pricing-trust-row li span[data-free-trial-credits]{
  color:var(--text);
  font-weight:600;
  padding-inline-end:.18em;
}
.pricing-trust-row li.is-pillar{
  color:var(--text);
  font-weight:600;
}

/* Bottom block on the homepage. Wraps the billing-rules trust row +
   the Paymob/support payments line into a single calm bordered
   container so the bottom of the section feels intentional, not like
   leftover footnotes sitting in raw page space. The internal hairline
   visually separates the two zones (billing rules above, payments +
   support below) without dominating the eye. */
.pricing-bottom-block{
  margin-top:6px;
  padding:18px 22px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:transparent;
}
.pricing-bottom-block .pricing-trust-row{
  margin:0;
  gap:18px;
}
.pricing-bottom-divider{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0;
  opacity:.65;
}
.pricing-bottom-payments{
  margin:0;
  text-align:center;
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
  text-wrap:pretty;
}
.pricing-bottom-payments + .pricing-bottom-payments{margin-top:4px}
.pricing-bottom-payments a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
  transition:text-decoration-color var(--t-fast) var(--ease);
}
.pricing-bottom-payments a:hover{text-decoration-color:var(--accent)}

/* Account-side progress card. Premium row with the customer's status
   on the left, eligible-used-vs-next-threshold counter on the right,
   and an accent fill bar across the current segment. The eyebrow
   keeps the status name visually paired with the segment label. */
.operator-status-progress{
  display:grid;
  gap:10px;
  padding:18px 20px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:var(--surface-2);
}
.operator-status-progress-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.operator-status-progress-head > div:first-child{
  display:grid;
  gap:4px;
}
.operator-status-progress-eyebrow{
  font:600 11px/1.2 var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.operator-status-progress-head strong{
  display:block;
  font:700 18px/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.operator-status-progress-counter{
  align-self:flex-end;
  font:500 13px/1.4 var(--font-display);
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.operator-status-progress-bar{
  position:relative;
  height:6px;
  border-radius:999px;
  background:var(--line-strong);
  overflow:hidden;
}
.operator-status-progress-bar > span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width var(--t-med) var(--ease);
}
.operator-status-progress-meta{
  margin:0;
  font-size:12px;
  color:var(--text-2);
  line-height:1.55;
}

/* Account drawer call-to-action panel. Replaces the previous two-tile
   "Selected purchase / Next step" workspace-note-grid that duplicated
   the headline row. The status copy on the left is rewritten by
   account.js based on the open-payment state; the actions on the
   right are the Continue to Paymob button stack. */
.purchase-cta-panel{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:18px;
  padding:20px 22px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:var(--surface-2);
  margin-top:6px;
}
.purchase-cta-status{display:grid;gap:8px;align-content:start}
.purchase-cta-status .eyebrow{margin-bottom:2px}
.purchase-cta-status .card-copy{margin:0;color:var(--text)}
.purchase-cta-status .mini{margin:0;color:var(--text-2)}
.purchase-cta-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
}
.purchase-cta-actions .account-toolbar{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.purchase-cta-actions .btn{justify-content:center}
/* Trust block under the Continue to Paymob button. Two stacked
   lines: vendor assurance (slightly emphasized) + supported payment
   methods (calmer secondary). The block is one calm grouped unit so
   the right-side action area reads as button + reassurance + methods,
   not three loose footer fragments. */
.purchase-cta-trust{
  display:grid;
  gap:3px;
  text-align:center;
  margin-top:2px;
}
.purchase-cta-paymob-note{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  line-height:1.5;
  font-weight:500;
}
.purchase-cta-paymob-note a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
  transition:text-decoration-color var(--t-fast) var(--ease);
}
.purchase-cta-paymob-note a:hover{text-decoration-color:var(--accent)}
.purchase-cta-support-line{
  margin:0;
  color:var(--text-2);
  font-size:12px;
  line-height:1.5;
}
.purchase-cta-support-line a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
  transition:text-decoration-color var(--t-fast) var(--ease);
}
.purchase-cta-support-line a:hover{text-decoration-color:var(--accent)}

/* Mobile rules. The CTA panel collapses to one column. The
   pricing configurator panel keeps its centered slider primitive.
   The Operator Status comparison list keeps the same 2-zone layout
   on tablet, then stacks to a 1-column card layout under 480px so
   no row ever needs horizontal scrolling. */
@media (max-width:880px){
  .pricing-configurator{padding:24px}
  .pricing-status-panel{padding:22px}
  .purchase-cta-panel{grid-template-columns:1fr}
  .operator-status-row{padding:16px 18px;gap:14px}
  .pricing-trust-row{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .pricing-trust-row li + li::before{display:none}
}
@media (max-width:560px){
  .operator-status-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .operator-status-row-price{
    justify-items:start;
    grid-auto-flow:column;
    align-items:baseline;
    gap:14px;
    padding-top:6px;
    border-top:1px dashed var(--line);
    width:100%;
  }
  .operator-status-row-total{text-align:left;font-size:20px}
  .operator-status-row-avg{text-align:left;margin-left:auto}
}
@media (max-width:380px){
  .operator-status-row-price{
    grid-auto-flow:row;
    gap:2px;
  }
  .operator-status-row-avg{margin-left:0}
}

.faq-wrap{display:flex;flex-direction:column;gap:10px}
.faq-item{overflow:hidden;transition:border-color var(--t-med) var(--ease)}
.faq-item:hover{border-color:var(--accent-soft-2)}
.faq-button{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:22px 24px;
  border:none;
  background:none;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  font:600 15px/1.42 var(--font-display);
  letter-spacing:-.008em;
  transition:color var(--t-fast) var(--ease);
}
.faq-button:hover{color:var(--accent)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 24px;
  color:var(--text-2);
  font-size:14px;
  line-height:1.8;
  transition:max-height var(--t-med) var(--ease), padding-bottom var(--t-med) var(--ease);
  text-wrap:pretty;
}
.faq-item.open .faq-answer{max-height:320px;padding-bottom:22px}
.faq-caret{position:relative;width:12px;height:12px;flex-shrink:0;color:var(--text-3);transition:color var(--t-fast) var(--ease)}
.faq-button:hover .faq-caret{color:var(--accent)}
.faq-caret::before{
  content:"";
  position:absolute;
  left:1px;top:1px;
  width:8px;height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.faq-item.open .faq-caret::before{top:4px;transform:rotate(225deg)}

.cta-band{
  position:relative;
  overflow:hidden;
  padding:88px 0;
  text-align:center;
  isolation:isolate;
}
.cta-band::after{
  content:"";
  position:absolute;
  left:clamp(20px,5vw,40px);
  right:clamp(20px,5vw,40px);
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.cta-glow{
  position:absolute;
  bottom:-220px;
  left:50%;
  transform:translateX(-50%);
  width:820px;
  height:620px;
  background:radial-gradient(ellipse, var(--accent-soft) 0%, transparent 65%);
  pointer-events:none;
  z-index:-1;
  animation:ctaGlowFloat 14s ease-in-out infinite alternate;
}
@keyframes ctaGlowFloat{
  0%{transform:translateX(-50%) translateY(0)}
  100%{transform:translateX(-50%) translateY(-14px)}
}
.cta-inner{max-width:640px;margin:0 auto;padding:0 36px;display:grid;gap:18px;justify-items:center}
.cta-inner h2{font-size:clamp(2.2rem,3.6vw,3.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.cta-inner p{color:var(--text-2);font-size:16px;line-height:1.78;max-width:520px;text-wrap:pretty}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

.footer{
  position:relative;
  padding:56px 0 32px;
  background:hsla(222,22%,6%,.64);
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .footer{background:hsla(36,30%,92%,.6)}
.footer::before{
  content:"";
  position:absolute;
  left:clamp(20px,5vw,40px);
  right:clamp(20px,5vw,40px);
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 36px;display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.footer-brand{max-width:380px;color:var(--text-2)}
.footer-brand .brand{display:block;margin-bottom:14px}
.footer-brand p{font-size:13.5px;line-height:1.78;color:var(--text-2);text-wrap:pretty}
.footer-links{display:flex;gap:48px;flex-wrap:wrap}
.footer-links strong{display:block;margin-bottom:14px;color:var(--text-3);font:700 11px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase}
.footer-links a{
  position:relative;
  display:block;
  margin-bottom:10px;
  color:var(--text-2);
  font-size:13px;
  transition:color var(--t-fast) var(--ease);
}
.footer-links a:hover{color:var(--text)}
.footer-bottom{
  max-width:var(--max);
  margin:30px auto 0;
  padding:22px 36px 0;
  border-top:1px solid var(--line);
  color:var(--text-3);
  font-size:12px;
  letter-spacing:.02em;
}

.status-box{padding:15px 18px;color:var(--text);border-radius:var(--radius)}
.status-ok{background:hsla(155,60%,54%,.1);border-color:hsla(155,60%,54%,.24);color:var(--green)}
.status-err{background:hsla(0,72%,70%,.1);border-color:hsla(0,72%,70%,.22);color:var(--red)}
.status-info{background:hsla(210,72%,72%,.1);border-color:hsla(210,72%,72%,.22);color:var(--blue)}

.workspace-hero,
.legal-shell{position:relative;overflow:hidden;isolation:isolate}
.workspace-hero::before,
.legal-shell::before{
  content:"";
  position:absolute;
  top:-300px;
  left:50%;
  transform:translateX(-50%);
  width:980px;
  height:680px;
  background:radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 66%);
  pointer-events:none;
  z-index:-1;
  animation:heroGlowFloat 14s ease-in-out infinite alternate;
}
.workspace-hero{padding:88px 0 32px}
.workspace-hero-shell{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:28px;align-items:end}
/*
  Auth-mode hero: the unauthenticated visitor sees a calm, single-column
  intro that mirrors the homepage CTA in tone. The presence panel is
  hidden, so the intro doesn't need to share horizontal space.
*/
.workspace-hero-shell.is-auth{grid-template-columns:1fr;max-width:720px;align-items:start}
.workspace-intro{display:grid;gap:14px}
.account-hero-block{display:grid;gap:14px}
.account-title{
  max-width:600px;
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.08;
  text-wrap:balance;
}
.account-sub{
  max-width:560px;
  color:var(--text-2);
  font-size:16px;
  line-height:1.78;
  text-wrap:pretty;
}
.workspace-title{max-width:720px;font-size:clamp(2.2rem,3.8vw,3.6rem);font-weight:700;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
.workspace-sub,
.workspace-subtle{max-width:620px;color:var(--text-2);font-size:15.5px;line-height:1.82;text-wrap:pretty}
.workspace-presence{padding:26px}
.workspace-section{padding-top:30px}
.workspace-stack{display:grid;gap:20px}
.workspace-panel{padding:28px}
.workspace-heading{font-size:clamp(1.9rem,2.8vw,2.6rem);letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
.workspace-heading-sm{font-size:22px;line-height:1.18;letter-spacing:-.018em;text-wrap:balance}
.workspace-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.workspace-note{padding:22px}
.workspace-note h3{margin:10px 0 8px;font-size:20px;line-height:1.2;letter-spacing:-.015em}
.workspace-note p{color:var(--text-2);font-size:13.5px;line-height:1.76;text-wrap:pretty}
.account-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
/*
  Auth shell: shift the visual weight slightly toward the form so that
  the primary action (sign up / sign in) reads as the page's primary
  CTA, not a secondary helper next to a heavier value panel.
*/
.auth-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
.auth-card,
.auth-side-panel{padding:28px}
.auth-title{margin:12px 0 8px;max-width:560px;font-size:24px;line-height:1.22;letter-spacing:-.018em;text-wrap:balance}
.auth-subtitle{margin:0 0 20px;max-width:560px;font-size:14px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
/*
  Auth side panel: the right-hand reassurance card. Replaces the older
  "How it starts" workspace-flow layout; uses a checklist-style value
  list so the visitor can scan the four key promises without reading
  numbered steps.
*/
.auth-side-title{
  margin:8px 0 18px;
  font:700 22px/1.18 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
  text-wrap:balance;
}
.auth-value-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.auth-value-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.36);
  transition:border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .auth-value-list li{background:hsla(42,48%,98%,.6)}
.auth-value-list li:hover{
  border-color:var(--accent-soft-2);
  transform:translateY(-1px);
}
.auth-value-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  flex-shrink:0;
  position:relative;
  margin-top:1px;
}
.auth-value-mark::after{
  content:"";
  position:absolute;
  left:8px;
  top:6px;
  width:6px;
  height:11px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
}
.auth-value-list li > div{min-width:0}
.auth-value-list li strong{
  display:block;
  font:700 14.5px/1.4 var(--font-display);
  letter-spacing:-.008em;
  color:var(--text);
}
.auth-value-list li p{
  margin:4px 0 0;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
}
.auth-value-foot{
  margin:18px 0 0;
  text-align:center;
  color:var(--text-3);
}
html[data-theme="light"] .auth-value-foot{color:hsl(220,12%,42%)}

/*
  F-44: signed-in workspace "Next step" hero. Sits above the Account
  panel so the customer always sees one primary action. Uses the
  accent gradient surface so it reads as the page CTA, not a
  reference card.
*/
.workspace-next{
  position:relative;
  padding:30px 32px 28px;
  border-radius:var(--radius-lg);
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(38,92%,58%,.10), hsla(38,92%,58%,.02)),
    linear-gradient(180deg, hsla(222,20%,11%,.78), hsla(222,18%,13%,.92));
  box-shadow:var(--shadow-soft), 0 0 36px -22px var(--accent-glow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:grid;
  gap:14px;
}
html[data-theme="light"] .workspace-next{
  background:
    linear-gradient(180deg, hsla(28,78%,42%,.10), hsla(28,78%,42%,.02)),
    linear-gradient(180deg, hsla(42,48%,98%,.92), hsla(38,36%,94%,.96));
}
.workspace-next-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.workspace-next-progress{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--accent-soft-2);
  background:hsla(222,20%,10%,.4);
  color:var(--text-2);
  font:700 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
}
html[data-theme="light"] .workspace-next-progress{background:hsla(42,48%,98%,.7)}
.workspace-next-progress.is-empty{display:none}
.workspace-next-title{
  margin:0;
  font:700 clamp(1.6rem,2.8vw,2rem)/1.18 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:balance;
}
.workspace-next-description{
  margin:0;
  max-width:640px;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.7;
  text-wrap:pretty;
}
.workspace-next-actions{margin-top:6px}

/*
  F-46: end-of-step CTA block. Sits at the bottom of Tickets and any
  other step that finishes with a clear next action; reuses the
  workspace-next accent so the customer's eye lands on the Continue
  button without reading every line of the step body again.
*/
.operation-step-cta{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,20%,10%,.32));
}
html[data-theme="light"] .operation-step-cta{
  background:linear-gradient(180deg, hsla(28,78%,42%,.08), hsla(42,48%,98%,.7));
}
.operation-step-cta p.mini{margin:0 0 10px;color:var(--text-2)}
.operation-step-cta .account-toolbar{margin-top:0}

@media (max-width:760px){
  .workspace-next{padding:24px 22px 22px}
  .workspace-next-actions .btn{width:100%}
}

.tabs{display:flex;gap:8px;margin-bottom:20px}
.tab{
  flex:1;
  min-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
  font:600 13px/1 var(--font-display);
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover{color:var(--text);border-color:var(--accent-soft-2)}
.tab.active{color:var(--text);background:var(--accent-soft);border-color:var(--accent-soft-2)}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:7px;color:var(--text-2);font:600 11.5px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
input,select,textarea{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.44);
  color:var(--text);
  outline:none;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{background:hsla(42,48%,98%,.7)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);transform:translateY(-1px)}

/* Custom select polish.
   - color-scheme hints the browser to paint the native popup menu
     using dark / light surfaces (Chrome, Edge, Firefox honor this);
     this is what fixes the "harsh flat white menu" complaint in dark
     mode without needing a custom popup component.
   - appearance:none + a custom SVG chevron replaces the OS arrow so
     the closed select reads consistently with the rest of the form.
   - select:required:invalid is the standard CSS-only way to dim the
     placeholder option text until the user picks a real value; once
     a real option is selected the select becomes :valid and the text
     returns to var(--text).
   - <option> rules are a defensive supplement: Chromium honors
     background-color / color on options inside the popup; Safari /
     macOS mostly ignore them and use color-scheme instead. */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  color-scheme:dark;
  padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238b97a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  cursor:pointer;
}
select:hover{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23eef0f3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
select:required:invalid{color:var(--text-3)}
select option{
  background-color:hsl(222,22%,11%);
  color:var(--text);
  padding:8px 12px;
}
select option:disabled{color:var(--text-3)}
select option:checked{
  background-color:var(--accent-soft);
  color:var(--text);
}
html[data-theme="light"] select{
  color-scheme:light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237a7164' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html[data-theme="light"] select:hover{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23181c25' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html[data-theme="light"] select option{
  background-color:hsl(36,30%,98%);
  color:var(--text);
}

.table-wrap{overflow:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:hsla(222,20%,10%,.38)}
html[data-theme="light"] .table-wrap{background:hsla(42,48%,98%,.66)}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-size:13px}
th{color:var(--text-3);font:700 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:none}
.list-note{padding:18px;border-radius:var(--radius);border:1px dashed var(--line-strong);color:var(--text-2);font-size:14px;line-height:1.78}

.operations-list{display:grid;gap:16px;margin-top:24px}
.operation-card{padding:22px;border-radius:var(--radius-lg);border:1px solid var(--line);background:hsla(222,20%,10%,.38);display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
html[data-theme="light"] .operation-card{background:hsla(42,48%,98%,.66)}
.operation-card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.operation-card-title h3{margin:0 0 4px;font-size:19px;letter-spacing:-.014em}
.operation-card-title .mini{color:var(--text-3)}
.operation-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.operation-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.operation-meta-item{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);background:hsla(222,20%,10%,.22)}
html[data-theme="light"] .operation-meta-item{background:hsla(42,48%,98%,.5)}
.operation-meta-item span{display:block;color:var(--text-3);font:700 10px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.operation-meta-item strong{font-size:15px;letter-spacing:-.012em}
.lifecycle-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:700 11px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-strong);background:hsla(222,20%,15%,.5)}
html[data-theme="light"] .lifecycle-badge{background:hsla(42,48%,94%,.7)}
.lifecycle-badge::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--text-3)}
.lifecycle-badge.is-draft::before{background:#9aa4b2}
.lifecycle-badge.is-prepared{border-color:hsla(210,90%,60%,.4)}
.lifecycle-badge.is-prepared::before{background:#4c9aff}
.lifecycle-badge.is-active{border-color:hsla(140,70%,55%,.4)}
.lifecycle-badge.is-active::before{background:#3ecf8e}
.lifecycle-badge.is-ended_pending_sync{border-color:hsla(38,90%,60%,.45)}
.lifecycle-badge.is-ended_pending_sync::before{background:#f4a62a}
.lifecycle-badge.is-closed{border-color:hsla(220,10%,50%,.4)}
.lifecycle-badge.is-closed::before{background:#6b7385}
.lifecycle-badge.is-locked{border-color:hsla(0,70%,60%,.45)}
.lifecycle-badge.is-locked::before{background:#ef4b4b}
.operation-actions{display:flex;flex-wrap:wrap;gap:10px}
.operation-section{padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:hsla(222,20%,10%,.22);display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
html[data-theme="light"] .operation-section{background:hsla(42,48%,98%,.5)}
.operation-section > header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.operation-section > header h4{margin:0;font-size:15px;letter-spacing:-.012em}
.operation-section > header .mini{color:var(--text-3)}
.operation-detail-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:4px}
.operation-tab-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.operation-tab-bar .tab{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-2);font:600 12.5px/1 var(--font-body);cursor:pointer}
.operation-tab-bar .tab.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.machine-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:hsla(222,20%,10%,.22);cursor:pointer}
html[data-theme="light"] .machine-option{background:hsla(42,48%,98%,.5)}
.machine-option.is-disabled{opacity:.6;cursor:not-allowed}
.machine-option .machine-meta{color:var(--text-3);font-size:12.5px}
.operation-empty{padding:26px 24px;border-radius:var(--radius);border:1px dashed var(--line-strong);color:var(--text-2);font-size:14.5px;line-height:1.7;display:grid;gap:10px;justify-items:start}
.operation-empty strong{font:700 16px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text-1)}
.operation-empty p{margin:0}
.operation-empty-steps{margin:4px 0 4px;padding-left:22px;display:grid;gap:6px;color:var(--text-2)}
.operation-empty-steps li{line-height:1.55}

/* Guided Create Operation rework: chip-edited gates, ticket-type chips,
   single-machine card, and a small disclosure for "more details". All of
   these reuse the operation-step rounded-chip vocabulary so the workspace
   feels consistent with the existing UI rather than a separate widget. */
.guided-disclosure{margin-top:6px;padding:0;border:1px dashed var(--line);border-radius:var(--radius);background:hsla(222,20%,10%,.18)}
html[data-theme="light"] .guided-disclosure{background:hsla(42,48%,98%,.42)}
.guided-disclosure[open]{background:hsla(222,20%,10%,.28)}
html[data-theme="light"] .guided-disclosure[open]{background:hsla(42,48%,98%,.6)}
.guided-disclosure summary{cursor:pointer;padding:10px 14px;font:600 12.5px/1.2 var(--font-body);color:var(--text-2);letter-spacing:.01em;list-style:none}
.guided-disclosure summary::-webkit-details-marker{display:none}
.guided-disclosure summary::before{content:"+";display:inline-block;width:14px;color:var(--text-3);font-weight:700}
.guided-disclosure[open] summary::before{content:"\2212"}
.guided-disclosure > .field,
.guided-disclosure > .workspace-note-grid{padding:0 14px 12px}
.guided-disclosure > p{margin:0;padding:0 14px 12px}

.gate-chip-editor-shell{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:hsla(222,20%,10%,.22)}
html[data-theme="light"] .gate-chip-editor-shell{background:hsla(42,48%,98%,.5)}
.gate-chip-empty{color:var(--text-3);font-size:13px}
.gate-chip-row{display:flex;flex-wrap:wrap;gap:8px;min-height:8px}
.gate-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;border-radius:999px;border:1px solid hsla(140,70%,55%,.45);background:hsla(140,70%,55%,.1);color:var(--text-1);font:600 12.5px/1 var(--font-body)}
.gate-chip-label{letter-spacing:.01em}
.gate-chip-remove{appearance:none;border:none;background:transparent;color:var(--text-2);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.gate-chip-remove:hover{color:var(--text-1)}
.gate-presets{display:flex;flex-wrap:wrap;gap:6px}
.gate-preset{padding:6px 12px;border-radius:999px;border:1px dashed var(--line-strong);background:transparent;color:var(--text-2);font:600 12px/1 var(--font-body);cursor:pointer}
.gate-preset:hover{border-color:var(--accent-soft-2);color:var(--text-1)}
.gate-chip-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gate-chip-input{flex:1 1 180px;min-width:160px;padding:9px 12px;border-radius:var(--radius-sm,10px);border:1px solid var(--line);background:transparent;color:var(--text-1);font:500 13px/1.2 var(--font-body)}

.ticket-types-card{margin-top:16px;display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:hsla(222,20%,10%,.22)}
html[data-theme="light"] .ticket-types-card{background:hsla(42,48%,98%,.5)}
.ticket-types-card-head{display:grid;gap:4px}
.ticket-types-card-head h4{margin:0;font:700 14.5px/1.2 var(--font-display);letter-spacing:-.012em}
.ticket-type-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.ticket-type-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid var(--line);background:hsla(222,20%,10%,.28);color:var(--text-1);font:600 12.5px/1 var(--font-body)}
html[data-theme="light"] .ticket-type-chip{background:hsla(42,48%,98%,.7)}
.ticket-type-chip.is-missing{border-color:hsla(38,92%,58%,.55);background:hsla(38,92%,58%,.12);color:var(--text-1)}
.ticket-type-chip-label{letter-spacing:.01em}
.ticket-type-chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 6px;border-radius:999px;background:hsla(0,0%,100%,.08);color:var(--text-1);font-size:11.5px;font-weight:700}
html[data-theme="light"] .ticket-type-chip-count{background:hsla(0,0%,0%,.06)}
.ticket-type-chip.is-missing .ticket-type-chip-count{background:hsla(38,92%,58%,.18)}

.allocation-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 4px}
.allocation-summary-item{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);background:hsla(222,20%,10%,.22);display:grid;gap:4px}
html[data-theme="light"] .allocation-summary-item{background:hsla(42,48%,98%,.5)}
.allocation-summary-item span{color:var(--text-3);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.allocation-summary-item strong{font-size:18px;color:var(--text-1)}
@media (max-width:640px){.allocation-summary{grid-template-columns:1fr}}

.machine-card{display:grid;gap:6px;padding:16px 18px;border-radius:var(--radius);border:1px solid hsla(140,70%,55%,.45);background:hsla(140,70%,55%,.08)}
.machine-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.machine-card-head strong{font:700 16px/1.2 var(--font-display);letter-spacing:-.012em}
.machine-card-meta{color:var(--text-3);font-size:12.5px}

/* ============== Cockpit shell + drawer overlays ==================
   The signed-in account page now reads as a compact cockpit: a
   next-step hero, a small account summary, four card buttons, and
   two access-state notes. Heavy surfaces (operations list, payment
   slider, machines table, activity feed) live inside a single drawer
   host and only mount visually when the operator opens them. This
   keeps the default page short and calm while preserving the IDs
   account.js's render functions write into. */
.cockpit{display:grid;gap:18px}

/* ============== Primary operation module ==========================
   The visual center of the signed-in account workspace. Either
   surfaces the inline operation-details starter form (no draft yet)
   or expands the active draft's wizard card so the customer never
   has to open a drawer to keep working on the next operation. */
.primary-op{
  display:grid;
  gap:18px;
  scroll-margin-top:24px;
}
.primary-op-intro{
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
  padding:28px 26px 18px;
  border-radius:var(--radius-lg);
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,20%,10%,.30));
  box-shadow:0 6px 24px -22px var(--accent-glow);
}
html[data-theme="light"] .primary-op-intro{
  background:linear-gradient(180deg, hsla(28,78%,42%,.06), hsla(42,48%,98%,.78));
}
.primary-op-intro .section-kicker{color:var(--accent)}
.primary-op-intro-title{
  margin:2px 0 0;
  font:700 clamp(1.4rem, 2.4vw, 1.8rem)/1.18 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text-1);
  text-wrap:balance;
}
.primary-op-intro p{
  margin:0 auto;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.65;
  max-width:60ch;
}
.primary-op-create{margin-top:0}
/* Hide the workspace-hero entirely once the customer is signed in.
   The cockpit-summary's account-name header takes its place; the
   primary operation module owns the actionable headline below. */
.workspace-hero-shell.is-dashboard{display:none}

.cockpit-summary{
  padding:24px 26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.38);
  display:grid;
  gap:18px;
}
html[data-theme="light"] .cockpit-summary{background:hsla(42,48%,98%,.66)}
.cockpit-summary-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.cockpit-summary-head > div:first-child{display:grid;gap:4px;min-width:0}
.cockpit-summary-head h2{margin:0;font:700 22px/1.2 var(--font-display);letter-spacing:-.018em;color:var(--text-1)}
.cockpit-summary-head .workspace-subtle{color:var(--text-3);font-size:13.5px;line-height:1.5}
.cockpit-summary-head .account-toolbar{flex-wrap:wrap;gap:8px}
.cockpit-kpi-grid{
  display:grid;
  /* auto-fit lets the grid redistribute fluidly when a KPI tile is
     hidden (eg "Balance to reconcile" hides at 0). Without this, a
     4-cell fixed grid becomes a 2+1 orphan layout when one tile is
     removed. Min 180px gives each tile enough horizontal room for
     two-line aux helper text without cramping the value above. */
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
@media (max-width:880px){
  .cockpit-kpi-grid{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:10px}
}
.cockpit-kpi{
  /* The card is a 3-row grid: label / value / aux. align-content
     start anchors the rows to the top so a tile with empty aux
     doesn't get its value vertically centered. min-height matches
     the natural height of a tile with one line of aux so every tile
     in the row is the same height even when aux is empty - prevents
     the jagged baseline you get when some tiles have aux and some
     don't. The aux row still occupies its slot via min-height even
     when empty. */
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.22);
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-content:start;
  gap:8px;
  min-height:104px;
}
html[data-theme="light"] .cockpit-kpi{background:hsla(42,48%,98%,.5)}
.cockpit-kpi-label{
  color:var(--text-3);
  font:700 10.5px/1.15 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cockpit-kpi strong{
  font:700 22px/1.1 var(--font-display);
  letter-spacing:-.014em;
  color:var(--text-1);
}
.cockpit-kpi-grid-compact .cockpit-kpi{min-height:88px;padding:12px 14px;gap:6px}
.cockpit-kpi-grid-compact .cockpit-kpi strong{font-size:18px}
.cockpit-kpi-aux{
  display:block;
  color:var(--text-3);
  font:500 12px/1.45 var(--font-body);
  letter-spacing:0;
  text-transform:none;
  /* Reserve a row even when empty so tiles with aux text and tiles
     without aux text stay the same height in the same row. Falls
     back to a single line of breathing room. */
  min-height:1em;
}

/* Cockpit card grid - main entry points to each drawer. Buttons are
   square-ish cards with hover lift + clear CTA chip. The primary card
   (Operations) gets the accent border so the customer's eye lands on
   the most-used surface. */
.cockpit-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width:1100px){.cockpit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cockpit-grid{grid-template-columns:1fr}}
.cockpit-card{
  appearance:none;
  text-align:left;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.38);
  color:var(--text-1);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px;
  row-gap:6px;
  align-content:start;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease, background .2s ease;
  min-height:148px;
  position:relative;
}
html[data-theme="light"] .cockpit-card{background:hsla(42,48%,98%,.66)}
.cockpit-card:hover{
  border-color:var(--accent-soft-2);
  transform:translateY(-1px);
  box-shadow:0 12px 24px -22px var(--accent-glow);
}
.cockpit-card-primary{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.10), hsla(222,20%,10%,.32));
  box-shadow:0 6px 22px -18px var(--accent-glow);
}
html[data-theme="light"] .cockpit-card-primary{background:linear-gradient(180deg, hsla(28,78%,42%,.08), hsla(42,48%,98%,.78))}
.cockpit-card-eyebrow{
  grid-column:1;
  grid-row:1;
  align-self:center;
  font:700 10px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}
.cockpit-card-primary .cockpit-card-eyebrow{color:var(--accent)}
.cockpit-card-title{
  grid-column:1 / -1;
  grid-row:2;
  font:700 16px/1.25 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text-1);
  text-wrap:balance;
}
.cockpit-card-meta{
  grid-column:1 / -1;
  grid-row:3;
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
  margin-top:4px;
}
/* The CTA chip on each cockpit card is now a subtle arrow indicator
   in the top-right corner. The whole card is the button, so a heavy
   "OPEN" pill at the bottom was redundant noise; an arrow that
   brightens on hover communicates "click to open" without competing
   with the title. */
.cockpit-card-cta{
  grid-column:2;
  grid-row:1;
  align-self:start;
  justify-self:end;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-3);
  font-size:0;
  background:transparent;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.cockpit-card-cta::after{
  content:"";
  width:8px;
  height:8px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px, 1px);
}
.cockpit-card:hover .cockpit-card-cta{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
  transform:translateX(2px);
}
.cockpit-card-meta.needs-attention{color:hsl(38,92%,50%);font-weight:600}
html[data-theme="light"] .cockpit-card-meta.needs-attention{color:hsl(38,92%,38%)}
.cockpit-kpi.hidden{display:none}

/* Compact state cards (access state + automation message) - smaller
   than the old workspace-note-grid so the default page does not
   double up on heavy notes. */
.cockpit-state-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:880px){.cockpit-state-row{grid-template-columns:1fr}}
.cockpit-state-card{
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.22);
  display:grid;
  gap:6px;
  justify-items:center;
  text-align:center;
}
html[data-theme="light"] .cockpit-state-card{background:hsla(42,48%,98%,.5)}
.cockpit-state-card .eyebrow{color:var(--text-3)}
.cockpit-state-card h3{margin:0;font:700 15px/1.3 var(--font-display);letter-spacing:-.012em;text-wrap:balance}
.cockpit-state-card p{margin:0 auto;color:var(--text-2);font-size:13.5px;line-height:1.55;max-width:48ch}
.cockpit-state-card .mini{color:var(--text-3);max-width:48ch;margin:0 auto}

/* Modal host - one shell, one backdrop, multiple panels. The class
   name keeps the cockpit-drawer prefix so account.js's open/close
   API stays a single rename. The host sits above every page chrome
   element (nav, hero, footer) and locks page scroll while open.
   The shell is a flex column with three regions (head / body /
   optional footer); only the body scrolls so the head and any
   sticky CTA stay visible while the customer reads through the
   content. */
.cockpit-drawer-host{
  position:fixed;
  inset:0;
  /* Above the navigation chrome (z-index:100 used elsewhere on the
     page) so a fixed-position site-nav cannot bleed into the modal. */
  z-index:200;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 4vw, 48px) clamp(16px, 4vw, 32px);
}
.cockpit-drawer-host[data-drawer-open=""]{visibility:hidden}
.cockpit-drawer-host:not([data-drawer-open=""]){pointer-events:auto;visibility:visible}
.cockpit-drawer-backdrop{
  position:absolute;
  inset:0;
  background:hsla(222,30%,4%,.72);
  opacity:0;
  transition:opacity .22s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cockpit-drawer-host:not([data-drawer-open=""]) .cockpit-drawer-backdrop{opacity:1}
html[data-theme="light"] .cockpit-drawer-backdrop{background:hsla(220,40%,18%,.55)}
.cockpit-drawer-shell{
  position:relative;
  width:min(820px, 100%);
  /* Always cap at the viewport so the shell never extends below the
     fold; the body region inside scrolls instead. */
  max-height:min(100%, calc(100vh - 32px));
  background:hsla(222,22%,9%,.98);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px -28px hsla(0,0%,0%,.65), 0 0 60px -28px var(--accent-glow);
  transform:translateY(20px) scale(.97);
  opacity:0;
  transition:transform .25s cubic-bezier(.18,.74,.4,1), opacity .2s ease;
  /* The shell itself does NOT scroll; the body region inside does.
     This prevents a double-scroll experience where the head region
     could scroll out of view while the customer reads. */
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
html[data-theme="light"] .cockpit-drawer-shell{
  background:hsla(42,48%,98%,.99);
  box-shadow:0 30px 80px -28px hsla(220,40%,18%,.5), 0 0 50px -32px var(--accent-glow);
}
.cockpit-drawer-host:not([data-drawer-open=""]) .cockpit-drawer-shell{
  transform:translateY(0) scale(1);
  opacity:1;
}
@media (max-width:760px){
  .cockpit-drawer-host{padding:0;align-items:stretch}
  .cockpit-drawer-shell{
    width:100vw;
    max-height:100vh;
    height:100%;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
}

/* Page scroll lock. Lock both html AND body because different
   browsers/layouts use different scroll roots. Without the html
   lock, scrolling inside an open modal could bubble to the document
   and bring the footer into view behind the backdrop. The
   scrollbar-gutter rule reserves the gutter so locking does not
   produce a content shift on desktop. */
html.cockpit-drawer-locked,
body.cockpit-drawer-locked{
  overflow:hidden !important;
}
@supports (scrollbar-gutter: stable){
  html{scrollbar-gutter:stable}
}
body.cockpit-drawer-locked{overflow:hidden}
/* Each panel is a flex-column inside the shell so head and body
   become independent regions: head pinned at the top, body scrolls.
   flex-shrink:0 on the head keeps it from compressing when the body
   has lots of content. */
.cockpit-drawer-panel{
  display:none;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
}
.cockpit-drawer-host[data-drawer-open="operations"] [data-drawer-panel="operations"],
.cockpit-drawer-host[data-drawer-open="purchase"] [data-drawer-panel="purchase"],
.cockpit-drawer-host[data-drawer-open="machines"] [data-drawer-panel="machines"],
.cockpit-drawer-host[data-drawer-open="activity"] [data-drawer-panel="activity"],
.cockpit-drawer-host[data-drawer-open="help"] [data-drawer-panel="help"]{
  display:flex;
}
/* Modal header. Layout is a centered column for the title + helper
   text, with the close button absolutely pinned to the top-right so
   it cannot push the centered text off-axis at any breakpoint. */
.cockpit-drawer-head{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:28px 56px 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  background:inherit;
}
.cockpit-drawer-head > div:not(.drawer-payment-line){
  display:grid;
  gap:8px;
  justify-items:center;
  max-width:580px;
  width:100%;
  min-width:0;
}
.cockpit-drawer-head h2{
  margin:0;
  font:700 clamp(1.25rem, 2vw, 1.5rem)/1.22 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text-1);
  text-wrap:balance;
}
.cockpit-drawer-head .card-copy{
  margin:0 auto;
  color:var(--text-2);
  max-width:54ch;
  font-size:14.5px;
  line-height:1.65;
  text-wrap:pretty;
}
.cockpit-drawer-head p.mini{
  margin:0 auto;
  color:var(--text-3);
  max-width:54ch;
  line-height:1.55;
}
.cockpit-drawer-head .section-kicker{margin:0 0 2px}
/* Polished payment-line block: centered, two-line structure, calm
   surface so the customer reads it as reassurance, not noise. */
.drawer-payment-line{
  display:grid;
  gap:4px;
  justify-items:center;
  text-align:center;
  margin:6px auto 0;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.22);
  color:var(--text-3);
  font-size:12.75px;
  line-height:1.55;
  max-width:520px;
}
.drawer-payment-line p{margin:0;text-wrap:balance}
.drawer-payment-line strong{color:var(--text-2);font-weight:600}
html[data-theme="light"] .drawer-payment-line{background:hsla(42,48%,98%,.6);border-color:var(--line-strong)}
.cockpit-drawer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.cockpit-drawer-close{
  position:absolute;
  top:14px;
  right:14px;
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  width:38px;
  height:38px;
  border-radius:999px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.cockpit-drawer-close:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.cockpit-drawer-body{
  padding:22px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  /* Body is the ONLY scrollable region inside the shell. min-height:0
     is required for the flex-grow + overflow-auto pattern to actually
     respect the shell's max-height instead of overflowing it. */
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  /* Smoother scroll on iOS / Safari without sacrificing desktop. */
  -webkit-overflow-scrolling:touch;
}
@media (max-width:520px){
  .cockpit-drawer-head{padding:22px 52px 16px;gap:10px}
  .cockpit-drawer-body{padding:18px 18px 22px;gap:14px}
  .cockpit-drawer-close{top:10px;right:10px;width:34px;height:34px;font-size:20px}
}

/* Operations drawer segmented Active/History toggle + search row.
   align-items:center on the parent + an explicit min-height on each
   segment forces the pills to render with a stable visible height
   even when CSS blockification of inline-flex children inside a
   flex parent collapses their intrinsic vertical size. Without this
   the pills could compute to a few pixels tall, with the dark text
   on the orange accent appearing as a barely-visible sliver. */
.operations-segmented{
  display:inline-flex;
  align-items:center;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.28);
  gap:2px;
  align-self:flex-start;
  width:auto;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  min-height:46px;
  flex-shrink:0;
}
.operations-segmented::-webkit-scrollbar{display:none}
html[data-theme="light"] .operations-segmented{background:hsla(42,48%,98%,.7)}
.operations-segment{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 16px;
  min-height:36px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--text-2);
  font:600 13px/1 var(--font-body);
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.operations-segment:hover{color:var(--text-1)}
.operations-segment.is-active{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 6px 18px -10px var(--accent-glow);
}
.operations-segment-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:1px 7px;
  border-radius:999px;
  background:hsla(0,0%,100%,.10);
  font-size:11.5px;
  font-weight:700;
  color:inherit;
}
.operations-segment.is-active .operations-segment-count{
  background:hsla(0,0%,0%,.18);
  color:var(--accent-ink);
}
html[data-theme="light"] .operations-segment-count{background:hsla(0,0%,0%,.06)}

.operations-search-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.operations-search-input{flex:1 1 100%;min-width:160px}

/* Compact history row for closed operations. Single line per row,
   secondary buttons for re-download. Reads as a record, not an
   active card. */
.operation-history-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.18);
}
html[data-theme="light"] .operation-history-row{background:hsla(42,48%,98%,.4)}
.operation-history-main{display:grid;gap:4px;flex:1 1 280px;min-width:0}
.operation-history-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.operation-history-title strong{font:700 14.5px/1.25 var(--font-display);letter-spacing:-.012em;color:var(--text-1)}
.operation-history-meta{color:var(--text-3);line-height:1.5}
.operation-history-actions{display:flex;gap:8px;flex-wrap:wrap}
.operation-history-actions .btn{padding:7px 12px;font-size:12px}

/* Activity drawer status filter chips. */
.payment-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.payment-filter-chip{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  border-radius:999px;
  padding:6px 14px;
  font:600 12px/1 var(--font-body);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.payment-filter-chip:hover{border-color:var(--accent-soft-2);color:var(--text-1)}
.payment-filter-chip.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--text-1);
}

.cockpit-state-row.hidden{display:none}
#downloadNow.hidden{display:none}
.cockpit-wizard-create{
  display:grid;
  gap:14px;
  padding:24px 24px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.06), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .cockpit-wizard-create{background:linear-gradient(180deg, hsla(28,78%,42%,.06), hsla(42,48%,98%,.7))}
/* Centered intro block at the top of the create-operation form. The
   eyebrow, headline, and supporting line read as a balanced header
   above the (left-aligned) form fields below. */
.cockpit-wizard-create > .section-kicker,
.cockpit-wizard-create > h3,
.cockpit-wizard-create > .card-copy{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.cockpit-wizard-create h3{margin:2px auto 0;font:700 clamp(1.15rem, 1.8vw, 1.35rem)/1.25 var(--font-display);letter-spacing:-.012em;text-wrap:balance;max-width:32ch}
.cockpit-wizard-create > .card-copy{max-width:54ch;text-wrap:pretty;margin-bottom:6px}
.cockpit-wizard-create .section-kicker{color:var(--accent)}
.cockpit-wizard-create .account-toolbar{justify-content:center;margin-top:6px}

/* Visual gate access matrix - rows = ticket types, cols = gates,
   cells = pill toggles. Reads as a permissions surface, not a
   spreadsheet. Bulk controls live at the row tail; the helper line
   above the table explains what a tick means. */
.matrix-shell{margin-top:10px;display:grid;gap:8px}
.matrix-helper{color:var(--text-3);line-height:1.55}
.matrix-empty{color:var(--text-3);padding:10px 12px;border-radius:var(--radius-sm,10px);border:1px dashed var(--line);background:hsla(222,20%,10%,.18)}
html[data-theme="light"] .matrix-empty{background:hsla(42,48%,98%,.5)}
.matrix-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:hsla(222,20%,10%,.22)}
html[data-theme="light"] .matrix-table-wrap{background:hsla(42,48%,98%,.5)}
.matrix-table{width:100%;border-collapse:collapse;min-width:520px}
.matrix-table th,
.matrix-table td{
  padding:10px 12px;
  text-align:center;
  font-size:12.5px;
  border-bottom:1px solid var(--line);
}
.matrix-table thead th{
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-3);
  font-weight:700;
  font-size:11px;
}
.matrix-table tbody tr:last-child td,
.matrix-table tbody tr:last-child th{border-bottom:none}
.matrix-row-label{
  text-align:left;
  font:600 13px/1.3 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
  white-space:nowrap;
}
.matrix-cell{padding:6px 8px}
.matrix-toggle{
  appearance:none;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.28);
  color:var(--text-3);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
html[data-theme="light"] .matrix-toggle{background:hsla(42,48%,98%,.7)}
.matrix-toggle:hover{border-color:var(--accent-soft-2);color:var(--text-1)}
.matrix-toggle.is-on{
  border-color:hsla(140,70%,55%,.55);
  background:hsla(140,70%,55%,.18);
  color:#0b1d13;
}
html[data-theme="light"] .matrix-toggle.is-on{color:hsl(150,70%,18%)}
.matrix-row-actions{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.btn-tiny{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  border-radius:999px;
  padding:5px 10px;
  font:600 11px/1 var(--font-body);
  cursor:pointer;
  letter-spacing:.04em;
}
.btn-tiny:hover{border-color:var(--accent);color:var(--accent)}
.btn-tiny[disabled]{opacity:.5;cursor:not-allowed}

/* Step 7 Review list - clean readiness checklist with per-item Fix
   button. Uses the existing accent vocabulary rather than its own
   color system. */
.review-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.review-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.22);
}
html[data-theme="light"] .review-item{background:hsla(42,48%,98%,.5)}
.review-item.is-ready{border-color:hsla(140,70%,55%,.45);background:hsla(140,70%,55%,.06)}
.review-item.is-missing{border-color:hsla(38,92%,58%,.45);background:hsla(38,92%,58%,.06)}
.review-item-icon{
  width:30px;height:30px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--font-display);
  background:hsla(222,20%,10%,.28);
  color:var(--text-2);
  border:1px solid var(--line);
}
.review-item.is-ready .review-item-icon{background:hsla(140,70%,55%,.18);color:hsl(150,70%,38%);border-color:hsla(140,70%,55%,.55)}
.review-item.is-missing .review-item-icon{background:hsla(38,92%,58%,.16);color:hsl(38,92%,42%);border-color:hsla(38,92%,58%,.55)}
.review-item-body{display:grid;gap:2px}
.review-item-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.review-item-head strong{font:700 14px/1.25 var(--font-display);letter-spacing:-.01em}
.review-item-state{
  font:700 10px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}
.review-item.is-ready .review-item-state{color:hsl(150,70%,38%)}
.review-item.is-missing .review-item-state{color:hsl(38,92%,42%)}
.review-item .mini{color:var(--text-2);line-height:1.55}

/* The .attendees-advanced-disclosure / .csv-advanced-disclosure
   rules that lived here were styling for the legacy "Advanced:
   upload a CSV with names" disclosure that has been removed under
   the admission-inventory-only product direction. No HTML emits
   those classes anymore; the rules were dropped to avoid dead-CSS
   drift. If you need the inventory builder's row layout, see
   .inventory-row + sibling rules elsewhere in this file. */

/* Door rules step - default summary card + per-section disclosures.
   The default-summary card is the simple-path "you don't need to do
   anything here" surface. Each disclosure expands one specific
   customisation (gates / re-entry / matrix) so the step never shows
   every control at once. */
.door-default-summary{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border:1px solid hsla(140,70%,55%,.45);
  background:hsla(140,70%,55%,.08);
  border-radius:var(--radius);
  margin-bottom:6px;
}
.door-default-summary.is-customized{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .door-default-summary.is-customized{
  background:linear-gradient(180deg, hsla(28,78%,42%,.06), hsla(42,48%,98%,.7));
}
.door-default-icon{
  width:30px;height:30px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--font-display);
  background:hsla(140,70%,55%,.18);
  color:hsl(150,70%,38%);
  border:1px solid hsla(140,70%,55%,.55);
}
.door-default-summary.is-customized .door-default-icon{
  background:hsla(38,92%,58%,.16);
  color:hsl(38,92%,42%);
  border-color:hsla(38,92%,58%,.55);
}
.door-default-summary strong{
  display:block;
  font:700 14px/1.3 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.door-default-summary p{margin:2px 0 0;color:var(--text-2);line-height:1.55}

.door-disclosure{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.22);
  padding:0;
  margin-top:8px;
}
html[data-theme="light"] .door-disclosure{background:hsla(42,48%,98%,.5)}
.door-disclosure[open]{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.04), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .door-disclosure[open]{
  background:linear-gradient(180deg, hsla(28,78%,42%,.04), hsla(42,48%,98%,.7));
}
.door-disclosure summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.door-disclosure summary::-webkit-details-marker{display:none}
.door-disclosure summary::after{
  content:"+";
  position:absolute;
  right:18px;
  font:700 16px/1 var(--font-display);
  color:var(--text-3);
}
.door-disclosure[open] summary::after{content:"\2212"}
.door-disclosure summary{position:relative;padding-right:36px}
.door-disclosure summary strong{
  font:700 13.5px/1.3 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.door-disclosure summary .mini{color:var(--text-3)}
.door-disclosure[open] > .field,
.door-disclosure[open] > .reentry-policy,
.door-disclosure[open] > .matrix-shell{padding:0 16px 14px}
.door-disclosure[open] > .field{margin-bottom:0}

/* ============== Entry access panel (Attendees section) ==================
   Replaces the legacy Door rules step. Sits inline inside the Attendees
   section after a roster has been imported. Re-uses the visual grammar
   from .door-default-summary / .door-disclosure / .reentry-option (those
   styles are still defined above) so a brand-new panel reads as part
   of the existing system, not a bolt-on. */
.access-section{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.18);
}
html[data-theme="light"] .access-section{background:hsla(42,48%,98%,.5)}
.access-section-head{
  display:grid;
  gap:2px;
}
.access-section-head h4{
  margin:0;
  font:700 15px/1.25 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.access-section-head .mini{color:var(--text-3)}
.access-summary{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border:1px solid hsla(140,70%,55%,.45);
  background:hsla(140,70%,55%,.08);
  border-radius:var(--radius);
}
.access-summary.is-customized{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .access-summary.is-customized{
  background:linear-gradient(180deg, hsla(28,78%,42%,.06), hsla(42,48%,98%,.7));
}
.access-summary-icon{
  width:30px;height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;justify-content:center;
  background:hsla(140,70%,55%,.18);
  color:hsla(140,70%,55%,1);
  font:700 16px/1 var(--font-display);
}
.access-summary.is-customized .access-summary-icon{
  background:hsla(38,92%,58%,.18);
  color:var(--accent);
}
.access-summary strong{
  display:block;
  font:700 14px/1.25 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.access-summary p{margin:2px 0 0;color:var(--text-2);line-height:1.55}
.access-disclosure{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.22);
  padding:0;
  overflow:hidden;
  min-width:0;
}
html[data-theme="light"] .access-disclosure{background:hsla(42,48%,98%,.5)}
.access-disclosure[open]{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.05), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .access-disclosure[open]{
  background:linear-gradient(180deg, hsla(28,78%,42%,.04), hsla(42,48%,98%,.7));
}
.access-disclosure summary{
  cursor:pointer;
  list-style:none;
  padding:14px 44px 14px 16px;
  position:relative;
  display:grid;
  gap:2px;
}
.access-disclosure summary::-webkit-details-marker{display:none}
.access-disclosure summary::after{
  content:"+";
  position:absolute;right:16px;top:50%;
  transform:translateY(-50%);
  font:700 16px/1 var(--font-display);
  color:var(--text-3);
}
.access-disclosure[open] summary::after{content:"\2212"}
.access-disclosure summary strong{
  font:700 13.5px/1.25 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
  text-transform:none;
}
.access-disclosure summary .mini{color:var(--text-3)}
.access-body{
  padding:0 16px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.access-block{
  display:grid;
  gap:8px;
  padding-top:6px;
}
.access-block-head{
  display:grid;
  gap:2px;
}
.access-block-head strong{
  font:700 13px/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text-1);
  text-transform:none;
}
.access-block-head .mini{color:var(--text-3)}
.access-helper{padding:4px 0;color:var(--text-3)}
.access-apply-existing{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm,10px);
  border:1px dashed var(--line);
  color:var(--text-2);
  font:500 13px/1.55 var(--font-body);
  cursor:pointer;
}
.access-apply-existing input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

/* Two explicit secondary actions next to the access summary: Manage
   gates and Customize access by ticket type. Plus an inline "Allow
   re-entry" switch so the global default reads as a real toggle, not
   a checkbox in a pill. The switch hides the native checkbox and
   styles a track + thumb so it feels native on desktop and mobile. */
.access-summary-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:-4px 0 4px;
}
.access-reentry-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text-2);
  font:600 12px/1 var(--font-body);
  letter-spacing:0;
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease, background .15s ease;
}
.access-reentry-switch:hover{border-color:var(--accent-soft-2)}
.access-reentry-switch input[type="checkbox"]{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);
  overflow:hidden;
}
.access-reentry-track{
  position:relative;
  display:inline-block;
  width:30px;height:18px;
  border-radius:999px;
  background:hsla(222,20%,30%,.55);
  transition:background .15s ease;
}
html[data-theme="light"] .access-reentry-track{background:hsla(28,20%,55%,.45)}
.access-reentry-thumb{
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text-1);
  transition:transform .18s ease, background .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.access-reentry-switch input:checked + .access-reentry-track{
  background:var(--accent);
}
.access-reentry-switch input:checked + .access-reentry-track .access-reentry-thumb{
  transform:translateX(12px);
  background:#fff;
}
.access-reentry-switch input:focus-visible + .access-reentry-track{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.access-reentry-switch input:checked ~ .access-reentry-label{
  color:var(--text-1);
}
.access-reentry-label{
  font:600 12px/1 var(--font-body);
  letter-spacing:0;
}

/* Per-ticket-type access cards. One card per ticket type when more than
   one gate exists. Each card carries a small Default/Custom status pill
   in the header and either a Reset to default button (when customized)
   or a one-line hint (when at default) under the gate toggles. */
.ticket-access-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
@media (min-width:780px){
  .ticket-access-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.ticket-access-card{
  display:grid;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.22);
  /* Cards size to their own content. Without this, two cards in one
     CSS Grid row stretch to match the taller one - so when the
     customer clicks a chip on the left card and its Reset row
     becomes visible, the right card grows in lockstep too. The grid
     row still reserves space for the tallest card; align-self:start
     just stops the unrelated card from visually swelling. */
  align-self:start;
}
html[data-theme="light"] .ticket-access-card{background:hsla(42,48%,98%,.55)}
.ticket-access-card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ticket-access-card-title{
  font:700 13.5px/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text-1);
}
.ticket-access-card-count{
  font:600 11.5px/1 var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ticket-access-card-summary{color:var(--text-2)}
.ticket-access-card-summary b{color:var(--text-1)}
.ticket-access-status{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-3);
  background:hsla(222,20%,10%,.32);
}
html[data-theme="light"] .ticket-access-status{background:hsla(42,48%,98%,.6)}
.ticket-access-status.is-default{
  border-color:hsla(140,70%,55%,.45);
  color:hsla(140,70%,60%,1);
  background:hsla(140,70%,55%,.10);
}
html[data-theme="light"] .ticket-access-status.is-default{color:hsla(140,55%,30%,1)}
.ticket-access-status.is-custom{
  border-color:var(--accent-soft-2);
  color:var(--accent);
  background:hsla(38,92%,58%,.12);
}
html[data-theme="light"] .ticket-access-status.is-custom{color:hsla(28,78%,38%,1)}
.ticket-access-hint{color:var(--text-3)}
.btn-tiny.is-reset{
  border-color:var(--accent-soft-2);
  color:var(--accent);
}
.btn-tiny.is-reset:hover{
  background:hsla(38,92%,58%,.10);
}

/* Tiny status pill inside each ticket-type chip in the chip row. Reads
   "Default" or "Custom" so the customer can scan their access state
   without scrolling down to the per-card editor. */
.ticket-type-chip-access{
  font:700 9.5px/1 var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-3);
  background:transparent;
  margin-left:6px;
}
.ticket-type-chip-access.is-default{
  border-color:hsla(140,70%,55%,.45);
  color:hsla(140,70%,60%,1);
}
html[data-theme="light"] .ticket-type-chip-access.is-default{color:hsla(140,55%,30%,1)}
.ticket-type-chip-access.is-custom{
  border-color:var(--accent-soft-2);
  color:var(--accent);
}
html[data-theme="light"] .ticket-type-chip-access.is-custom{color:hsla(28,78%,38%,1)}
.ticket-access-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.gate-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.32);
  color:var(--text-2);
  font:600 12px/1 var(--font-body);
  letter-spacing:0;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.gate-toggle:hover{border-color:var(--accent-soft-2)}
.gate-toggle.is-on{
  border-color:var(--accent);
  background:hsla(38,92%,58%,.16);
  color:var(--text-1);
}
.gate-toggle.is-on > span:first-child{color:var(--accent)}
html[data-theme="light"] .gate-toggle{background:hsla(42,48%,98%,.6)}
html[data-theme="light"] .gate-toggle.is-on{background:hsla(28,78%,42%,.10)}
.ticket-access-bulk{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
  /* Always-rendered slot for Reset to default. Reserves a stable
     button-sized row so a card flipping Default -> Custom (Reset
     button appears) does not change the card's height and push
     sibling cards in the same grid row. min-height matches the
     btn-tiny line so the empty state (Default) and the populated
     state (Custom) read at the same height. */
  min-height:24px;
  align-items:flex-start;
}
.ticket-access-bulk[aria-hidden="true"]{pointer-events:none}

/* Two clearly-labeled rows inside each ticket-type access card so
   gate access and re-entry never look like one mixed control. Each
   row carries a heading + an explicit current-state summary above
   its controls; a divider sits between the two rows. */
.ticket-access-row{
  display:grid;
  gap:8px;
  padding:10px 0 0;
  margin-top:2px;
  border-top:1px solid var(--line);
}
.ticket-access-row:first-of-type{border-top:0;padding-top:6px}
.ticket-access-row-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ticket-access-row-head strong{
  font:700 12px/1 var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ticket-access-row-summary{
  font:600 13px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text-1);
  text-align:right;
}
.ticket-access-row-help{
  margin:0;
  color:var(--text-3);
  line-height:1.5;
}

/* Per-card "Allow re-entry" switch. One per ticket-type access card.
   Visually-hidden checkbox for accessibility plus a styled track and
   thumb so the switch reads as a real control on desktop and mobile.
   Sits between the gate toggles and the bulk row. */
.ticket-access-reentry{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0 2px;
  cursor:pointer;
  user-select:none;
  color:var(--text-2);
  font:600 12.5px/1.2 var(--font-body);
}
.ticket-access-reentry input[type="checkbox"]{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);
  overflow:hidden;
}
.ticket-access-reentry .ticket-access-reentry-track{
  position:relative;
  display:inline-block;
  width:30px;height:18px;
  border-radius:999px;
  background:hsla(222,20%,30%,.55);
  transition:background .15s ease;
  flex:0 0 auto;
}
html[data-theme="light"] .ticket-access-reentry .ticket-access-reentry-track{background:hsla(28,20%,55%,.45)}
.ticket-access-reentry-thumb{
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text-1);
  transition:transform .18s ease, background .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ticket-access-reentry input:checked + .ticket-access-reentry-track{
  background:var(--accent);
}
.ticket-access-reentry input:checked + .ticket-access-reentry-track .ticket-access-reentry-thumb{
  transform:translateX(12px);
  background:#fff;
}
.ticket-access-reentry input:focus-visible + .ticket-access-reentry-track{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.ticket-access-reentry input:checked ~ .ticket-access-reentry-label{
  color:var(--text-1);
}
.ticket-access-reentry-label{
  font:600 12.5px/1 var(--font-body);
  letter-spacing:0;
}

/* CSV file feedback row. Shown the moment a file is picked so the
   customer sees "we got it" within one frame, then transitions through
   reading -> ready -> error states without losing the filename. */
.file-feedback{
  display:grid;
  gap:4px;
  margin:2px 0 4px;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.22);
}
html[data-theme="light"] .file-feedback{background:hsla(42,48%,98%,.55)}
.file-feedback.is-reading{
  border-color:var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.06), hsla(222,20%,10%,.30));
}
.file-feedback.is-ready{
  border-color:hsla(140,70%,55%,.45);
  background:hsla(140,70%,55%,.08);
}
.file-feedback.is-error{
  border-color:var(--danger,hsla(0,70%,60%,1));
  background:hsla(0,70%,60%,.08);
}
.file-feedback-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.file-feedback-name{
  font:600 13px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text-1);
  word-break:break-all;
}
.file-feedback-size{color:var(--text-3)}
.file-feedback-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
}
.file-feedback.is-ready .file-feedback-status{color:hsla(140,70%,55%,1)}
html[data-theme="light"] .file-feedback.is-ready .file-feedback-status{color:hsla(140,55%,32%,1)}
.file-feedback.is-error .file-feedback-status{color:var(--danger,hsla(0,70%,60%,1))}
.file-feedback-spinner{
  display:inline-block;
  width:11px;height:11px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:auth-spin .65s linear infinite;
}

/* Re-entry policy radio cards. Two stacked tiles that fit the same
   visual vocabulary as the gate chip editor (rounded card, accent
   border on selected) so the Entry rules step reads as one coherent
   surface. Specificity bumped via .field so we override the generic
   .field label rule (uppercase eyebrow text, block display) that
   targets the field-level eyebrow labels. */
.reentry-policy{
  display:grid;
  gap:8px;
  margin-top:4px;
}
@media (min-width:780px){.reentry-policy{grid-template-columns:1fr 1fr}}
.field .reentry-option,
.reentry-option{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.22);
  color:var(--text-2);
  font:500 13px/1.5 var(--font-body);
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
html[data-theme="light"] .reentry-option{background:hsla(42,48%,98%,.5)}
.field .reentry-option:hover,
.reentry-option:hover{border-color:var(--accent-soft-2)}
.field .reentry-option.is-selected,
.reentry-option.is-selected{
  border-color:var(--accent);
  background:hsla(38,92%,58%,.10);
  box-shadow:0 6px 20px -16px var(--accent-glow);
}
html[data-theme="light"] .reentry-option.is-selected{background:hsla(28,78%,42%,.08)}
.reentry-option input[type="radio"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.reentry-option-body{display:grid;gap:4px}
.reentry-option-body strong{
  font:700 13.5px/1.2 var(--font-display);
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--text-1);
}
.reentry-option-body .mini{color:var(--text-2);line-height:1.55;text-transform:none;letter-spacing:0;font-weight:500}
.field .reentry-apply-existing,
.reentry-apply-existing{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:var(--radius-sm,10px);
  border:1px dashed var(--line);
  color:var(--text-2);
  font:500 13px/1.55 var(--font-body);
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
}
.reentry-apply-existing input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

/* Attendees CSV template button row - keeps the affordance close to
   the upload field instead of buried in a help text block. */
.attendees-template-row{
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:6px 0 12px;
}
.attendees-template-row .mini{color:var(--text-3);max-width:48ch}

/* Workspace create form (Step 1) gets a slightly stronger accent
   border so it reads as the wizard's first step, not a generic note. */
.workspace-wizard-create{
  border-color:var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(38,92%,58%,.06), hsla(222,20%,10%,.30));
}
html[data-theme="light"] .workspace-wizard-create{
  background:
    linear-gradient(180deg, hsla(28,78%,42%,.06), hsla(42,48%,98%,.7));
}
.workspace-wizard-create .section-kicker{color:var(--accent)}

.legal-shell{padding:96px 0 56px;position:relative}
.legal-card{max-width:900px;margin:0 auto;padding:40px 44px}
.legal-card .section-intro{display:grid;gap:12px;margin-bottom:16px}
.legal-stack{display:grid;gap:14px}
.legal-stack article{padding-top:8px}
.legal-card h1{font-size:clamp(2.2rem,3.8vw,3.3rem);font-weight:700;letter-spacing:-.028em;margin:12px 0 14px;line-height:1.08;text-wrap:balance}
.legal-card h2{margin:28px 0 10px;font-size:20px;letter-spacing:-.014em}
.legal-card p,
.legal-card li{color:var(--text-2);font-size:15px;line-height:1.84;text-wrap:pretty}
.legal-card a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-soft-2);text-underline-offset:3px}
.legal-card a:hover{text-decoration-color:var(--accent)}
.legal-card ul{margin:10px 0 0;padding-left:18px}

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  filter:blur(6px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease),
    filter var(--t-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform, opacity, filter;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);filter:blur(0)}

@media (max-width:1120px){
  .hero-shell{gap:44px}
  .workspace-hero-shell,
  .auth-shell,
  .workspace-note-grid{grid-template-columns:1fr}
  .story-steps,
  .includes-grid,
  .premium-grid,
  .workspace-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-micro-metrics,
  .presence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .section{padding:72px 0}
  .section-head{margin-bottom:32px}
  .container,
  .nav-inner,
  .footer-inner,
  .footer-bottom,
  .cta-inner{padding-left:22px;padding-right:22px}
  .nav-links,
  .nav-actions .btn{display:none}
  .nav-mobile{display:inline-flex}
  .theme-toggle{padding:0 10px}
  .theme-toggle [data-theme-label]{display:none}
  .hero-home{padding:78px 0 28px}
  .workspace-hero{padding:74px 0 24px}
  .hero-shell{gap:28px}
  .hero-title{font-size:clamp(1.9rem,8.2vw,2.6rem);line-height:1.05}
  .workspace-title{font-size:clamp(1.8rem,8vw,2.4rem);line-height:1.06}
  .section-title{font-size:clamp(1.6rem,6.4vw,2.1rem);line-height:1.1}
  .auth-title,
  .workspace-heading,
  .workspace-heading-sm{font-size:clamp(1.3rem,5.6vw,1.8rem);line-height:1.14}
  .account-title{font-size:clamp(1.7rem,6.6vw,2.2rem);line-height:1.1}
  .account-sub{font-size:14.75px;line-height:1.72}
  .hero-sub,
  .section-sub,
  .workspace-sub,
  .workspace-subtle,
  .card-copy{font-size:14.5px;line-height:1.78}
  .hero-panel,
  .workspace-panel,
  .auth-card,
  .auth-side-panel,
  .legal-card{padding:24px 20px}
  .includes-card,
  .story-step,
  .feature-spotlight{padding:22px 20px}
  .workspace-note{padding:20px}
  .pricing-input-readout{align-items:flex-start;justify-content:flex-start}
  .pricing-number{width:100%;font-size:30px}
  .hero-stat-row,
  .hero-panel-head,
  .workspace-presence-head,
  .workspace-flow-step,
  .workspace-summary-head,
  .workspace-section-head{flex-direction:column}
  .hero-actions,
  .account-toolbar,
  .cta-actions{align-items:stretch;flex-direction:column}
  .hero-actions .btn,
  .account-toolbar .btn,
  .account-toolbar a.btn,
  .cta-actions .btn{width:100%}
  .hero-panel-head,
  .story-steps,
  .includes-grid,
  .premium-grid,
  .workspace-columns,
  .workspace-kpi-grid,
  .hero-micro-metrics,
  .presence-grid{grid-template-columns:1fr}
  .cta-band{padding:68px 0}
  th,td{padding:11px 12px}
  .tabs{flex-direction:column}
  .footer-inner{flex-direction:column}
  .footer-links{gap:28px}
  .ops-rail-premium{border-radius:22px;padding:14px 18px}
}

@media (max-width:480px){
  .hero-title{font-size:clamp(1.6rem,9vw,2.2rem)}
  .workspace-title{font-size:clamp(1.55rem,8.8vw,2.1rem)}
  .hero-sub,
  .workspace-sub,
  .workspace-subtle,
  .card-copy,
  .hero-note,
  .mini{font-size:13.5px;line-height:1.74}
  .section-title,
  .auth-title,
  .workspace-heading{font-size:clamp(1.35rem,6.2vw,1.8rem)}
  .workspace-kpi strong{font-size:clamp(1.4rem,7.6vw,1.9rem)}
}

/* ============== Trust band & pricing reassurance ============== */
.hero-pill{gap:9px}
.hero-pill-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px hsla(38,92%,58%,.16);
  flex-shrink:0;
}
code,
.hero-stat-row code,
.includes-card code,
.story-step code,
.faq-answer code{
  display:inline-block;
  padding:1px 6px;
  border-radius:5px;
  background:hsla(220,18%,18%,.55);
  border:1px solid var(--line);
  font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text);
  letter-spacing:-.01em;
}
html[data-theme="light"] code{background:hsla(36,30%,88%,.7);color:var(--text)}

.trust-band{
  position:relative;
  padding:42px 0 58px;
  isolation:isolate;
}
.trust-band::after{
  content:"";
  position:absolute;
  left:clamp(20px,5vw,40px);
  right:clamp(20px,5vw,40px);
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.trust-band-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.trust-fact{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.trust-fact:hover{border-color:var(--accent-soft-2);transform:translateY(-2px)}
.trust-fact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:11px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  flex-shrink:0;
}
.trust-fact h3{
  margin:2px 0 6px;
  font:700 15.5px/1.32 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
.trust-fact p{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.7;
  text-wrap:pretty;
}

@media (max-width:1120px){
  .trust-band-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .trust-band{padding:32px 0 44px}
  .trust-fact{padding:18px}
}

/* ============== Live product demo ============== */
.demo-section{padding-top:96px;padding-bottom:104px}
.demo-stage{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:48px 56px 96px;
  border-radius:var(--radius-xl);
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.78), hsla(222,18%,12%,.92)),
    radial-gradient(620px 320px at 14% -8%, hsla(38,92%,58%,.16), transparent 62%),
    radial-gradient(520px 280px at 88% 110%, hsla(210,72%,72%,.07), transparent 60%);
  box-shadow:var(--shadow), 0 0 64px -28px var(--accent-glow);
  isolation:isolate;
  overflow:hidden;
}
html[data-theme="light"] .demo-stage{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.92), hsla(38,36%,94%,.96)),
    radial-gradient(620px 320px at 14% -8%, hsla(28,78%,42%,.16), transparent 62%),
    radial-gradient(520px 280px at 88% 110%, hsla(210,60%,44%,.06), transparent 60%);
}
.demo-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(900px 480px at 50% -10%, hsla(38,92%,58%,.07), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.demo-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--accent-soft-2);
  background:hsla(222,20%,10%,.6);
  color:var(--text-2);
  font:700 11px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:30px;
}
html[data-theme="light"] .demo-badge{background:hsla(42,48%,98%,.7)}
.demo-badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px hsla(38,92%,58%,.18);
  animation:pulse 2.4s ease-in-out infinite;
}

/* Devices: laptop + phone composition */
.device-laptop{
  position:relative;
  width:min(720px, 100%);
  margin:0 auto;
}
.device-laptop-frame{
  position:relative;
  border-radius:18px 18px 4px 4px;
  padding:14px 14px 0;
  background:linear-gradient(180deg, hsl(222,14%,16%), hsl(222,14%,11%));
  border:1px solid hsla(220,14%,40%,.42);
  box-shadow:
    0 28px 60px -32px rgba(0,0,0,.72),
    inset 0 1px 0 hsla(0,0%,100%,.04);
}
html[data-theme="light"] .device-laptop-frame{
  background:linear-gradient(180deg, hsl(36,16%,80%), hsl(36,12%,72%));
  border-color:hsla(30,18%,42%,.38);
}
.device-laptop-base{
  position:relative;
  height:14px;
  margin:0 -34px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(180deg, hsl(222,14%,18%), hsl(222,14%,9%));
  box-shadow:0 26px 60px -28px rgba(0,0,0,.7);
}
.device-laptop-base::after{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:120px;height:6px;
  border-radius:0 0 12px 12px;
  background:hsl(222,14%,7%);
  transform:translateX(-50%);
}
html[data-theme="light"] .device-laptop-base{background:linear-gradient(180deg, hsl(36,14%,78%), hsl(36,12%,66%))}
html[data-theme="light"] .device-laptop-base::after{background:hsl(36,14%,60%)}
.device-laptop-screen{
  position:relative;
  aspect-ratio:16/10.2;
  border-radius:8px;
  overflow:hidden;
  background:
    linear-gradient(180deg, hsl(222,22%,9%), hsl(222,20%,7%));
  border:1px solid hsla(220,14%,30%,.6);
}
html[data-theme="light"] .device-laptop-screen{
  background:linear-gradient(180deg, hsl(36,30%,97%), hsl(36,28%,93%));
  border-color:hsla(30,18%,42%,.18);
}

/* Dashboard chrome */
.dash-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid hsla(220,14%,30%,.4);
  background:hsla(222,22%,8%,.6);
  font-size:11.5px;
  color:var(--text-3);
}
html[data-theme="light"] .dash-bar{background:hsla(36,28%,90%,.7);border-bottom-color:hsla(30,18%,42%,.16)}
.dash-bar-dot{
  width:9px;height:9px;border-radius:50%;
  background:hsla(0,72%,70%,.6);
}
.dash-bar-dot:nth-child(2){background:hsla(38,92%,58%,.6)}
.dash-bar-dot:nth-child(3){background:hsla(155,60%,54%,.6)}
.dash-bar-title{
  margin-left:8px;
  color:var(--text-2);
  font:600 12px/1 var(--font-display);
  letter-spacing:.01em;
}
.dash-bar-status{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:600 10.5px/1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
}
.dash-bar-status span{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px hsla(155,60%,54%,.14);
  animation:pulse 2.4s ease-in-out infinite;
}
.dash-body{
  padding:18px 20px 16px;
  display:grid;
  gap:14px;
}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dash-kpi{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid hsla(220,14%,30%,.32);
  background:hsla(222,22%,9%,.55);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .dash-kpi{background:hsla(42,48%,98%,.6);border-color:hsla(30,18%,42%,.14)}
.dash-kpi-label{
  display:block;
  font:600 10px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:8px;
}
.dash-kpi strong{
  display:block;
  font:800 22px/1 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.demo-stage[data-scene="4"] .dash-kpi,
.demo-stage[data-scene="5"] .dash-kpi{border-color:var(--accent-soft-2);background:hsla(38,92%,58%,.06)}
.dash-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:12px;
}
.dash-feed,
.dash-chart{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid hsla(220,14%,30%,.32);
  background:hsla(222,22%,9%,.55);
  min-height:148px;
}
html[data-theme="light"] .dash-feed,
html[data-theme="light"] .dash-chart{background:hsla(42,48%,98%,.6);border-color:hsla(30,18%,42%,.14)}
.dash-section-title{
  font:600 10px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:10px;
}
.dash-feed-list{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:6px;
}
.dash-feed-list li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border-radius:8px;
  background:hsla(222,22%,11%,.55);
  font-size:11.5px;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
html[data-theme="light"] .dash-feed-list li{background:hsla(42,48%,98%,.85)}
.dash-feed-list li.is-shown{opacity:1;transform:translateY(0)}
.dash-feed-list li.is-fresh{
  background:hsla(38,92%,58%,.1);
  box-shadow:inset 0 0 0 1px var(--accent-soft-2);
}
.dash-feed-list li b{color:var(--text);font:600 11.5px/1.3 var(--font-display);letter-spacing:-.005em}
.dash-feed-list li em{font-style:normal;color:var(--text-3);font-size:10.5px}
.dash-feed-tick{
  width:14px;height:14px;border-radius:50%;
  background:hsla(155,60%,54%,.18);
  position:relative;
  flex-shrink:0;
}
.dash-feed-tick::after{
  content:"";
  position:absolute;
  left:4px;top:2px;
  width:5px;height:8px;
  border-right:1.6px solid var(--green);
  border-bottom:1.6px solid var(--green);
  transform:rotate(45deg);
}
.dash-chart-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:96px;
}
.dash-chart-bars span{
  flex:1;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity:.86;
  height:var(--h);
  transform-origin:bottom;
  transform:scaleY(.18);
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.demo-stage.is-visible .dash-chart-bars span{transform:scaleY(1)}
.demo-stage.is-visible .dash-chart-bars span:nth-child(1){transition-delay:.04s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(2){transition-delay:.1s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(3){transition-delay:.16s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(4){transition-delay:.22s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(5){transition-delay:.28s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(6){transition-delay:.34s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(7){transition-delay:.4s}
.demo-stage.is-visible .dash-chart-bars span:nth-child(8){transition-delay:.46s}
.demo-stage[data-scene="4"] .dash-chart-bars span:nth-last-child(1),
.demo-stage[data-scene="5"] .dash-chart-bars span:nth-last-child(1){opacity:1;filter:brightness(1.08)}
.dash-chart-axis{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--text-3);
}
.dash-rail{display:flex;flex-wrap:wrap;gap:6px}
.dash-rail-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid hsla(220,14%,30%,.42);
  background:hsla(222,22%,11%,.5);
  color:var(--text-3);
  font:600 10.5px/1 var(--font-display);
  letter-spacing:.04em;
  transition:all var(--t-med) var(--ease);
}
html[data-theme="light"] .dash-rail-chip{background:hsla(42,48%,98%,.7);border-color:hsla(30,18%,42%,.16)}
.dash-rail-chip.is-active{
  color:var(--accent);
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
}
.demo-stage[data-scene="3"] .dash-rail-chip:nth-child(2),
.demo-stage[data-scene="3"] .dash-rail-chip:nth-child(3){
  color:var(--accent);border-color:var(--accent-soft-2);background:var(--accent-soft);
}
.demo-stage[data-scene="4"] .dash-rail-chip,
.demo-stage[data-scene="5"] .dash-rail-chip{color:var(--text-2)}

/* Toast on dashboard during admit moment */
.dash-toast{
  position:absolute;
  right:14px;bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--accent-soft-2);
  background:hsla(222,22%,9%,.92);
  box-shadow:0 14px 30px -16px var(--accent-glow);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  pointer-events:none;
  max-width:240px;
}
html[data-theme="light"] .dash-toast{background:hsla(42,48%,98%,.96)}
.demo-stage[data-scene="4"] .dash-toast{opacity:1;transform:translateY(0)}
.dash-toast strong{
  display:block;
  font:700 12px/1 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
  margin-bottom:3px;
}
.dash-toast span{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}
.dash-toast-tick{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  position:relative;
  flex-shrink:0;
}
.dash-toast-tick::after{
  content:"";
  position:absolute;
  left:8px;top:5px;
  width:6px;height:11px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
}

/* Phone */
.device-phone{
  position:absolute;
  right:36px;
  bottom:32px;
  width:208px;
  transform:rotate(-2deg);
  z-index:2;
}
.device-phone-frame{
  position:relative;
  border-radius:34px;
  padding:8px;
  background:linear-gradient(180deg, hsl(222,14%,14%), hsl(222,14%,8%));
  border:1px solid hsla(220,14%,40%,.4);
  box-shadow:
    0 30px 50px -22px rgba(0,0,0,.72),
    inset 0 1px 0 hsla(0,0%,100%,.04);
}
html[data-theme="light"] .device-phone-frame{
  background:linear-gradient(180deg, hsl(36,16%,30%), hsl(36,14%,18%));
}
.device-phone-notch{
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  width:64px;height:18px;
  border-radius:0 0 14px 14px;
  background:hsl(222,14%,5%);
  z-index:3;
}
html[data-theme="light"] .device-phone-notch{background:hsl(36,12%,12%)}
.device-phone-screen{
  position:relative;
  aspect-ratio:9/19;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(180px 180px at 50% 6%, hsla(38,92%,58%,.06), transparent 70%),
    linear-gradient(180deg, hsl(222,22%,8%), hsl(222,22%,5%));
}
html[data-theme="light"] .device-phone-screen{
  background:
    radial-gradient(180px 180px at 50% 6%, hsla(28,78%,42%,.06), transparent 70%),
    linear-gradient(180deg, hsl(36,30%,98%), hsl(36,28%,94%));
}
.phone-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 18px 4px;
  font:700 10px/1 var(--font-display);
  letter-spacing:.04em;
  color:var(--text-2);
}
.phone-bar-glyphs{display:inline-flex;gap:3px;align-items:center}
.phone-bar-glyphs i{
  width:4px;height:4px;border-radius:50%;
  background:var(--text-2);
}
.phone-bar-glyphs i:nth-child(1){opacity:.6}
.phone-bar-glyphs i:nth-child(2){opacity:.85}
.phone-bar-glyphs i:nth-child(3){opacity:1}

/* Phone scenes: only the active scene shows */
.phone-scene{
  position:absolute;
  inset:24px 12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.demo-stage[data-scene="1"] .phone-scene-1,
.demo-stage[data-scene="2"] .phone-scene-2,
.demo-stage[data-scene="3"] .phone-scene-3,
.demo-stage[data-scene="4"] .phone-scene-4,
.demo-stage[data-scene="5"] .phone-scene-5{opacity:1;transform:translateY(0) scale(1)}
.phone-card{
  padding:14px 14px 16px;
  border-radius:16px;
  background:hsla(222,22%,10%,.7);
  border:1px solid hsla(220,14%,30%,.34);
  display:grid;
  gap:8px;
}
html[data-theme="light"] .phone-card{background:hsla(42,48%,98%,.82);border-color:hsla(30,18%,42%,.14)}
.phone-eyebrow{
  font:700 9px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.phone-scene h4{
  font:700 16px/1.18 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  margin:0;
}
.phone-sub{font-size:11px;line-height:1.4;color:var(--text-2)}
.phone-checklist{
  list-style:none;
  margin:6px 0 0;padding:0;
  display:grid;gap:7px;
}
.phone-checklist li{
  display:flex;align-items:center;gap:8px;
  font-size:11px;
  color:var(--text-2);
}
.phone-checklist li span{
  width:14px;height:14px;border-radius:5px;
  border:1.4px solid hsla(220,14%,40%,.4);
  flex-shrink:0;
  position:relative;
}
.phone-checklist li.is-done span{
  background:var(--accent-soft);
  border-color:var(--accent-soft-2);
}
.phone-checklist li.is-done span::after{
  content:"";
  position:absolute;
  left:3px;top:1px;
  width:5px;height:8px;
  border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);
}
.phone-checklist li.is-doing{color:var(--text)}
.phone-checklist li.is-doing span{
  border-color:var(--accent);
  background:transparent;
  animation:phoneCheckPulse 1.6s ease-in-out infinite;
}
@keyframes phoneCheckPulse{
  0%,100%{box-shadow:0 0 0 0 hsla(38,92%,58%,.4)}
  50%{box-shadow:0 0 0 5px hsla(38,92%,58%,0)}
}

.phone-ticket{align-items:center;text-align:center;padding-bottom:18px}
.phone-qr{
  width:128px;height:128px;
  margin:6px auto 4px;
  padding:6px;
  border-radius:10px;
  background:hsl(0,0%,98%);
  display:flex;
  box-shadow:inset 0 0 0 1px hsla(220,14%,30%,.18);
}
.phone-qr svg{width:100%;height:100%}
.phone-ticket-foot{
  display:flex;justify-content:space-between;
  width:100%;
  font:600 9.5px/1 var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* Scanner */
.phone-scanner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.phone-scanner-frame{
  position:relative;
  width:160px;height:160px;
  border-radius:14px;
  background:
    radial-gradient(140px 140px at 50% 50%, hsla(38,92%,58%,.08), transparent 65%),
    linear-gradient(180deg, hsla(222,22%,12%,.7), hsla(222,22%,7%,.7));
  overflow:hidden;
}
html[data-theme="light"] .phone-scanner-frame{
  background:
    radial-gradient(140px 140px at 50% 50%, hsla(28,78%,42%,.08), transparent 65%),
    linear-gradient(180deg, hsla(36,30%,94%,.8), hsla(36,28%,90%,.8));
}
.phone-scanner-corner{
  position:absolute;
  width:22px;height:22px;
  border-color:var(--accent);
  border-style:solid;
  border-width:0;
}
.phone-scanner-corner.tl{top:10px;left:10px;border-top-width:2px;border-left-width:2px;border-radius:6px 0 0 0}
.phone-scanner-corner.tr{top:10px;right:10px;border-top-width:2px;border-right-width:2px;border-radius:0 6px 0 0}
.phone-scanner-corner.bl{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 6px}
.phone-scanner-corner.br{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 6px 0}
.phone-scanner-target{
  position:absolute;
  left:50%;top:50%;
  width:88px;height:88px;
  transform:translate(-50%,-50%) rotate(-3deg);
  background:hsl(0,0%,98%);
  border-radius:6px;
  padding:4px;
  display:flex;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
}
.phone-scanner-target svg{width:100%;height:100%}
.demo-stage[data-scene="3"] .phone-scanner-target{
  animation:scannerTarget 2.4s var(--ease) infinite;
}
@keyframes scannerTarget{
  0%{transform:translate(-58%,-46%) rotate(-6deg) scale(.92)}
  55%{transform:translate(-50%,-50%) rotate(-2deg) scale(1)}
  100%{transform:translate(-46%,-52%) rotate(0deg) scale(1.02)}
}
.phone-scanner-line{
  position:absolute;
  left:10px;right:10px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 12px var(--accent-glow);
  top:14px;
  opacity:0;
}
.demo-stage[data-scene="3"] .phone-scanner-line{
  animation:scannerSweep 2.2s var(--ease) infinite;
  opacity:1;
}
@keyframes scannerSweep{
  0%{top:14px}
  50%{top:140px}
  100%{top:14px}
}
.phone-scanner-label{
  font:600 11px/1 var(--font-display);
  letter-spacing:.04em;
  color:var(--text-2);
}

/* Success */
.phone-success{
  padding:18px 14px;
  border-radius:16px;
  background:hsla(155,60%,54%,.06);
  border:1px solid hsla(155,60%,54%,.24);
  display:grid;
  gap:8px;
  text-align:center;
  justify-items:center;
}
html[data-theme="light"] .phone-success{background:hsla(155,60%,32%,.08);border-color:hsla(155,60%,32%,.22)}
.phone-success-tick{
  width:42px;height:42px;border-radius:50%;
  background:hsla(155,60%,54%,.16);
  border:1px solid hsla(155,60%,54%,.36);
  position:relative;
  margin-bottom:4px;
}
.phone-success-tick::after{
  content:"";
  position:absolute;
  left:14px;top:9px;
  width:9px;height:16px;
  border-right:2.4px solid var(--green);
  border-bottom:2.4px solid var(--green);
  transform:rotate(45deg);
}
.demo-stage[data-scene="4"] .phone-success-tick{animation:successPop .6s var(--ease) both}
@keyframes successPop{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.phone-success-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin-top:6px;
}
.phone-success-meta div{
  padding:8px 10px;
  border-radius:10px;
  background:hsla(222,22%,10%,.55);
  text-align:left;
}
html[data-theme="light"] .phone-success-meta div{background:hsla(42,48%,98%,.65)}
.phone-success-meta span{
  display:block;
  font:600 9px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:4px;
}
.phone-success-meta strong{font:600 11px/1.2 var(--font-display);color:var(--text);letter-spacing:-.005em}

/* Welcome */
.phone-welcome{
  position:relative;
  padding:18px 14px 20px;
  border-radius:16px;
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,22%,10%,.5));
  border:1px solid var(--accent-soft-2);
  display:grid;
  gap:8px;
  text-align:center;
  overflow:hidden;
}
.phone-welcome-glow{
  position:absolute;
  top:-30px;left:50%;
  transform:translateX(-50%);
  width:200px;height:120px;
  background:radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events:none;
}
.phone-welcome-marker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:6px;
  padding:7px 12px;
  border-radius:999px;
  background:hsla(155,60%,54%,.12);
  border:1px solid hsla(155,60%,54%,.28);
  color:var(--green);
  font:700 10px/1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.phone-welcome-marker span{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px hsla(155,60%,54%,.18);
  animation:pulse 2.4s ease-in-out infinite;
}

/* Captions + progress */
.demo-captions{
  position:relative;
  margin:46px auto 0;
  max-width:640px;
  min-height:54px;
  text-align:center;
}
.demo-captions p{
  position:absolute;
  inset:0;
  margin:0;
  color:var(--text-2);
  font:500 15px/1.6 var(--font-body);
  text-wrap:pretty;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.demo-captions p.is-active{opacity:1;transform:translateY(0)}
.demo-progress{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:30px;
}
.demo-progress button{
  width:32px;height:6px;
  padding:0;
  border:none;
  border-radius:999px;
  background:hsla(220,14%,30%,.42);
  cursor:pointer;
  transition:background-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease), width var(--t-med) var(--ease);
}
html[data-theme="light"] .demo-progress button{background:hsla(30,18%,42%,.22)}
.demo-progress button:hover{background:var(--text-3);transform:translateY(-1px)}
.demo-progress button.is-active{
  width:46px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 4px 12px -4px var(--accent-glow);
}

@media (max-width:880px){
  .demo-stage{padding:36px 28px 88px}
  .device-laptop{width:100%;max-width:520px}
  .device-phone{
    position:relative;
    right:auto;bottom:auto;
    margin:-110px auto 0;
    transform:rotate(-2deg);
    width:188px;
  }
}
@media (max-width:560px){
  .demo-section{padding-top:72px;padding-bottom:84px}
  .demo-stage{padding:28px 18px 72px;border-radius:var(--radius-lg)}
  .demo-badge{font-size:10px;padding:7px 12px;letter-spacing:.16em;margin-bottom:22px}
  .device-laptop-base{margin:0 -18px}
  .device-phone{
    width:170px;
    margin:-90px auto 0;
    transform:rotate(-1.4deg);
  }
  .dash-body{padding:14px}
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-kpi strong{font-size:18px}
  .dash-grid{grid-template-columns:1fr}
  .dash-feed,.dash-chart{min-height:120px}
  .dash-toast{right:8px;bottom:8px;max-width:200px;padding:8px 10px}
  .demo-captions{margin-top:36px;font-size:14px;min-height:62px}
  .demo-captions p{font-size:14px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .preview-bars span{transform:scaleY(1);opacity:.92}
  .phone-scene{opacity:1;transform:none;position:relative;inset:auto}
  .demo-stage .phone-scene:not(.phone-scene-5){display:none}
  .demo-captions p{position:relative;opacity:1;transform:none}
  .demo-captions p:not(.is-active){display:none}
}

/* ============== Premium upgrade pass (v2) ============== */

/* Hero refinements: pill kicker only when accompanied by a dot (home hero) */
.hero-kicker:has(.hero-kicker-dot){
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 14px 6px 12px;
  border-radius:999px;
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.08), hsla(222,20%,10%,.4));
  color:var(--accent-2);
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
}
html[data-theme="light"] .hero-kicker:has(.hero-kicker-dot){
  background:linear-gradient(180deg, hsla(28,78%,42%,.1), hsla(42,48%,98%,.7));
  color:var(--accent);
}
.hero-kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 4px hsla(38,92%,58%,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
html[data-theme="light"] .hero-kicker-dot{
  background:var(--accent);
  box-shadow:0 0 0 4px hsla(28,78%,42%,.18);
}

.hero-home{padding:108px 0 48px}
.hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, hsla(220,14%,40%,.06) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(220,14%,40%,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 680px 480px at 50% 30%, #000 0%, transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 680px 480px at 50% 30%, #000 0%, transparent 68%);
  opacity:.6;
}
html[data-theme="light"] .hero-grid{
  background-image:
    linear-gradient(to right, hsla(30,18%,42%,.08) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(30,18%,42%,.08) 1px, transparent 1px);
  opacity:.8;
}

.hero-panel{transition:transform .52s var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);will-change:transform}
.hero-panel[data-tilt]{transform-style:preserve-3d}

/* Section-head polish */
.section-head{gap:14px}
.section-title{font-size:clamp(2.1rem,3.1vw,3.2rem)}

/* ============== Impact band (Why the entrance matters) ============== */
.section-impact{padding:96px 0 84px;position:relative}
.section-impact::before{
  content:"";
  position:absolute;
  top:-80px;left:50%;
  transform:translateX(-50%);
  width:820px;height:420px;
  background:radial-gradient(ellipse at center, hsla(38,92%,58%,.06), transparent 66%);
  pointer-events:none;
  z-index:-1;
}
html[data-theme="light"] .section-impact::before{
  background:radial-gradient(ellipse at center, hsla(28,78%,42%,.09), transparent 66%);
}
.impact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.impact-tile{
  position:relative;
  padding:34px 30px 30px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.72), hsla(222,18%,12%,.88)),
    radial-gradient(280px 180px at 22% -10%, hsla(38,92%,58%,.08), transparent 60%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.02);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow:hidden;
}
html[data-theme="light"] .impact-tile{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94)),
    radial-gradient(280px 180px at 22% -10%, hsla(28,78%,42%,.08), transparent 60%);
}
.impact-tile::after{
  content:"";
  position:absolute;
  left:30px;right:30px;bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2), transparent);
  opacity:0;
  transition:opacity var(--t-med) var(--ease);
}
.impact-tile:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow), 0 0 32px -18px var(--accent-glow);
}
.impact-tile:hover::after{opacity:1}
.impact-tile-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  margin-bottom:18px;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.04);
}
.impact-tile h3{
  margin:0 0 10px;
  font:700 20px/1.2 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
  text-wrap:balance;
}
.impact-tile p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.8;
  text-wrap:pretty;
}

/* ============== Control model (product truth) ============== */
.section-model{padding:96px 0 100px;position:relative;isolation:isolate}
.section-model::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(720px 360px at 16% 10%, hsla(38,92%,58%,.05), transparent 62%),
    radial-gradient(640px 320px at 88% 95%, hsla(210,72%,72%,.035), transparent 64%);
}
html[data-theme="light"] .section-model::before{
  background:
    radial-gradient(720px 360px at 16% 10%, hsla(28,78%,42%,.07), transparent 62%),
    radial-gradient(640px 320px at 88% 95%, hsla(210,60%,44%,.05), transparent 64%);
}
.control-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  position:relative;
}
.control-grid::before{
  content:"";
  position:absolute;
  left:14%;right:14%;
  top:56px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2), var(--accent-soft-2), transparent);
  z-index:0;
  opacity:.5;
}
.control-card{
  position:relative;
  z-index:1;
  padding:32px 30px 28px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,11%,.82), hsla(222,18%,13%,.94));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.03);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  display:grid;
  gap:12px;
  align-content:start;
}
html[data-theme="light"] .control-card{
  background:linear-gradient(180deg, hsla(42,48%,98%,.92), hsla(38,36%,94%,.96));
}
.control-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow), 0 0 34px -18px var(--accent-glow);
}
.control-card.is-emphasized{
  border-color:var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,11%,.88), hsla(222,18%,13%,.96)),
    linear-gradient(180deg, hsla(38,92%,58%,.08), transparent 28%);
  box-shadow:var(--shadow), 0 0 48px -22px var(--accent-glow);
}
html[data-theme="light"] .control-card.is-emphasized{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.96), hsla(38,36%,94%,.98)),
    linear-gradient(180deg, hsla(28,78%,42%,.08), transparent 28%);
}
.control-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  font:800 13px/1 var(--font-display);
  letter-spacing:.08em;
  margin-bottom:6px;
  box-shadow:0 8px 20px -14px var(--accent-glow), inset 0 1px 0 hsla(0,0%,100%,.04);
}
.control-index span{font-variant-numeric:tabular-nums}
.control-card .eyebrow{margin-bottom:2px}
.control-card h3{
  margin:0;
  font:700 22px/1.2 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:balance;
}
.control-card > p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.82;
  text-wrap:pretty;
}
.control-marks{
  list-style:none;
  margin:8px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
}
.control-marks li{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.5;
}
.control-marks li span{
  position:relative;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  flex-shrink:0;
}
.control-marks li span::after{
  content:"";
  position:absolute;
  left:4px;top:2px;
  width:5px;height:8px;
  border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);
}
.control-marks li code{font-size:11.5px;padding:1px 5px}

/* ============== Operations grid (live entry governance) ============== */
.section-operations{padding:96px 0}
.ops-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.ops-tile{
  position:relative;
  padding:28px 26px 26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.02);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow:hidden;
}
.ops-tile::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2), transparent);
  opacity:0;
  transition:opacity var(--t-med) var(--ease);
}
.ops-tile:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow), 0 0 28px -16px var(--accent-glow);
}
.ops-tile:hover::before{opacity:1}
.ops-tile-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  margin-bottom:16px;
  border-radius:11px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
}
.ops-tile h3{
  margin:0 0 8px;
  font:700 17px/1.24 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
.ops-tile p{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.76;
  text-wrap:pretty;
}

/* ============== Experience band (the arrival experience) ============== */
.section-experience{padding:96px 0}
.experience-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.experience-tile{
  position:relative;
  padding:34px 30px 30px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,11%,.74), hsla(222,18%,13%,.88));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .experience-tile{
  background:linear-gradient(180deg, hsla(42,48%,98%,.88), hsla(38,36%,94%,.94));
}
.experience-tile:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow), 0 0 28px -18px var(--accent-glow);
}
.experience-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  margin-bottom:18px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text-3);
  font:700 13px/1 var(--font-display);
  letter-spacing:.18em;
}
.experience-tile:hover .experience-index{
  color:var(--accent);
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
}
.experience-tile h3{
  margin:0 0 10px;
  font:700 20px/1.22 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
  text-wrap:balance;
}
.experience-tile p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.8;
  text-wrap:pretty;
}

/* ============== Responsive overrides for new sections ============== */
/* Phase 2 polish: the homepage uses 4-step "How it works" and 4-tile
   "Use cases" sections plus a 5-card "What GateFlow does" grid. The base
   grids are 3-column, which would leave orphaned cards on the second row.
   Below: at desktop widths, expand the 4-card sections to a balanced 4-up
   row (only when scoped to the homepage IDs so the .story-steps /
   .experience-grid rules remain safe to reuse with 3 children elsewhere).
   The 5-card grid is switched to a flex layout that centers an incomplete
   last row. Tablet and mobile breakpoints fall through to the existing
   2-column and 1-column rules below. */
@media (min-width:1121px){
  #how .story-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  #use-cases .experience-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.impact-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}
.impact-grid > .impact-tile{
  flex:1 1 calc((100% - 36px) / 3);
  max-width:calc((100% - 36px) / 3);
  min-width:240px;
}

@media (max-width:1120px){
  .ops-grid,
  .experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impact-grid > .impact-tile{
    flex:1 1 calc((100% - 18px) / 2);
    max-width:calc((100% - 18px) / 2);
  }
  .control-grid{grid-template-columns:1fr}
  .control-grid::before{display:none}
}

/* ============== Pain section ==============
   Five-card pressure section that runs after the hero. Reuses the
   surface treatment of .impact-tile (soft glass + subtle accent
   wash) so the page reads as one coherent system, but the tiles are
   smaller and tighter because their job is to evoke a feeling, not
   teach a feature. The closing "GateFlow gives every admission..."
   line is the bridge into the operating-model section that follows. */
.section-pain{padding:88px 0 80px;position:relative}
.section-pain::before{
  content:"";
  position:absolute;
  top:-60px;left:50%;
  transform:translateX(-50%);
  width:780px;height:360px;
  background:radial-gradient(ellipse at center, hsla(0,72%,58%,.05), transparent 66%);
  pointer-events:none;
  z-index:-1;
}
html[data-theme="light"] .section-pain::before{
  background:radial-gradient(ellipse at center, hsla(8,58%,46%,.07), transparent 66%);
}
.pain-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.pain-tile{
  position:relative;
  padding:24px 22px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.66), hsla(222,18%,12%,.82));
  box-shadow:var(--shadow-soft);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
html[data-theme="light"] .pain-tile{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94));
}
.pain-tile:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong, var(--line));
}
.pain-tile-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  margin-bottom:14px;
  border-radius:10px;
  background:hsla(0,60%,60%,.10);
  border:1px solid hsla(0,60%,60%,.18);
  color:hsl(8,72%,62%);
}
html[data-theme="light"] .pain-tile-icon{
  background:hsla(8,58%,48%,.08);
  border-color:hsla(8,58%,48%,.18);
  color:hsl(8,68%,42%);
}
.pain-tile h3{
  margin:0 0 8px;
  font:700 16px/1.25 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
.pain-tile p{
  margin:0;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.65;
  text-wrap:pretty;
}
.pain-aside{
  margin:28px auto 0;
  max-width:720px;
  text-align:center;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-2);
  text-wrap:pretty;
  font-style:italic;
}
.pain-close{
  margin:18px auto 0;
  max-width:680px;
  text-align:center;
  font:600 18px/1.5 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
@media (max-width:1120px){
  .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pain-grid{grid-template-columns:1fr}
}

/* ============== How GateFlow works (structured flow) ==============
   Replaces the previous animated 5-scene demo. Calm, ordered list of
   five steps with large index numerals. Two columns at desktop so the
   page does not stretch into a vertical wall; collapses to one column
   on tablet/mobile. Deliberately quiet so the hero card stays the
   single live-preview moment on the page. */
.section-how{padding:96px 0 88px;position:relative}
.section-how::before{
  content:"";
  position:absolute;
  top:-60px;left:50%;
  transform:translateX(-50%);
  width:820px;height:380px;
  background:radial-gradient(ellipse at center, hsla(38,92%,58%,.05), transparent 66%);
  pointer-events:none;
  z-index:-1;
}
html[data-theme="light"] .section-how::before{
  background:radial-gradient(ellipse at center, hsla(28,78%,42%,.07), transparent 66%);
}
.how-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  counter-reset:none;
}
.how-step{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:28px 28px 26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.66), hsla(222,18%,12%,.82));
  box-shadow:var(--shadow-soft);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
html[data-theme="light"] .how-step{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94));
}
.how-step:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft-2);
}
.how-step-index{
  flex:0 0 auto;
  font:800 32px/1 var(--font-display);
  letter-spacing:-.02em;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  border-radius:14px;
  padding:14px 16px;
  min-width:64px;
  text-align:center;
}
.how-step-body{flex:1 1 auto;min-width:0}
.how-step h3{
  margin:2px 0 8px;
  font:700 18px/1.25 var(--font-display);
  letter-spacing:-.014em;
  color:var(--text);
  text-wrap:balance;
}
.how-step p{
  margin:0;
  color:var(--text-2);
  font-size:14px;
  line-height:1.7;
  text-wrap:pretty;
}
/* The fifth step naturally lands alone in a 2-column grid. Stretch it
   to span both columns so it reads as a calm closing beat instead of
   an orphan card. */
@media (min-width:701px){
  .how-step:last-child{
    grid-column:1 / -1;
  }
}
@media (max-width:700px){
  .how-steps{grid-template-columns:1fr;gap:14px}
  .how-step{padding:22px 20px 20px;gap:16px}
  .how-step-index{font-size:26px;padding:10px 12px;min-width:54px}
}

/* ============== 4-card variants ==============
   The brand pass condensed "What GateFlow does" from 5 cards to 4, and
   "Use cases" from 5 cards to 4. Both grids previously had homepage-
   specific 5-card flex/wrap rules above; these explicit 4-column
   overrides keep them perfectly balanced (no orphan card) and override
   the auto-wrap so each row stays full at desktop. */
@media (min-width:1121px){
  .impact-grid-four{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }
  .impact-grid-four > .impact-tile{
    flex:initial;
    max-width:none;
    min-width:0;
  }
  .experience-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1120px) and (min-width:701px){
  .impact-grid-four{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .impact-grid-four > .impact-tile{
    flex:initial;
    max-width:none;
    min-width:0;
  }
}
@media (max-width:700px){
  .impact-grid-four{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .impact-grid-four > .impact-tile{
    flex:initial;
    max-width:none;
    min-width:0;
  }
}

/* ============== Phase 2.5 designer polish ============== */
/* Hero trust strip: keeps the four trust bullets feeling like one
   guarantee row instead of four scattered chips. Subtle surface +
   single inner border + slim dot dividers at desktop; falls back to
   the existing pill behaviour at narrow widths so wrap stays clean. */
.hero-trust-strip{
  gap:0;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(220,18%,12%,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  width:fit-content;
  max-width:100%;
}
html[data-theme="light"] .hero-trust-strip{
  background:hsla(36,36%,98%,.7);
  border-color:hsla(28,30%,68%,.32);
}
.hero-trust-strip .hero-pill{
  border:none;
  background:transparent;
  padding:9px 18px;
  position:relative;
}
.hero-trust-strip .hero-pill + .hero-pill::before{
  content:"";
  position:absolute;
  left:0;
  top:25%;
  bottom:25%;
  width:1px;
  background:var(--line);
}
.hero-trust-strip .hero-pill:hover{
  transform:none;
  color:var(--text);
}
@media (max-width:1120px){
  .hero-trust-strip{
    border-radius:18px;
    padding:8px;
    gap:4px;
  }
  .hero-trust-strip .hero-pill + .hero-pill::before{display:none}
}

/* CTA band: the strongest conversion moment after the hero. Larger
   primary CTA, a small reassurance line below the buttons. The
   .btn-large class is scoped here intentionally so it doesn't change
   button sizes elsewhere in the product UI. */
.btn.btn-large{
  padding:16px 28px;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.005em;
}
.cta-actions-prominent{margin-top:10px}
.cta-reassure{
  margin-top:14px;
  color:var(--text-3);
  font-size:12.5px;
  letter-spacing:.02em;
}
html[data-theme="light"] .cta-reassure{color:hsl(220,12%,38%)}

/* ============== Phase 2.6: operational trust marquee ============== */
/* Single thin band sandwiched between the nav and the hero. The track
   contains two identical lists; we translate(-50%) over one period so
   the duplicate slides into the start position seamlessly, with no
   layout-shift or JS. Hover pauses; prefers-reduced-motion stops the
   animation while keeping the items readable. */
.trust-marquee{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:hsla(220,18%,11%,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  height:34px;
  display:flex;
  align-items:center;
}
html[data-theme="light"] .trust-marquee{background:hsla(36,30%,96%,.78)}
.trust-marquee::before,
.trust-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:64px;
  pointer-events:none;
  z-index:1;
}
.trust-marquee::before{left:0;background:linear-gradient(90deg, var(--bg) 8%, hsla(220,18%,11%,0) 100%)}
.trust-marquee::after{right:0;background:linear-gradient(270deg, var(--bg) 8%, hsla(220,18%,11%,0) 100%)}
html[data-theme="light"] .trust-marquee::before{background:linear-gradient(90deg, var(--bg) 8%, hsla(36,30%,96%,0) 100%)}
html[data-theme="light"] .trust-marquee::after{background:linear-gradient(270deg, var(--bg) 8%, hsla(36,30%,96%,0) 100%)}
.trust-marquee-track{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  animation:trust-marquee-scroll 48s linear infinite;
}
.trust-marquee:hover .trust-marquee-track{animation-play-state:paused}
.trust-marquee-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:0;
}
.trust-marquee-list li{
  display:inline-flex;
  align-items:center;
  padding:0 22px;
  color:var(--text-2);
  font:500 12.5px/1 var(--font-body);
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  position:relative;
}
.trust-marquee-list li::after{
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:3px;
  border-radius:999px;
  background:var(--accent-soft-2);
  opacity:.7;
}
.trust-marquee-list:last-child li:last-child::after{display:none}
@keyframes trust-marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion: reduce){
  .trust-marquee-track{animation:none;transform:none}
}
@media (max-width:760px){
  .trust-marquee{height:30px}
  .trust-marquee-list li{padding:0 16px;font-size:11.5px;letter-spacing:.05em}
  .trust-marquee::before,
  .trust-marquee::after{width:28px}
}

/* ============== Phase 2.6: restrained micro-interactions ============== */
/* Smoother button press: a tiny inward press to make CTAs feel tactile
   without becoming gimmicky. Pairs with the existing hover translateY. */
.btn{transition:
  transform var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),
  box-shadow var(--t-med) var(--ease),
  background-color var(--t-med) var(--ease),
  color var(--t-fast) var(--ease),
  filter var(--t-med) var(--ease);}
.btn:active{transform:translateY(0);transition-duration:60ms}
.btn-primary:active{filter:brightness(.96)}

/* Footer link micro-glide: a thin underline that slides in on hover,
   replacing the abrupt color change. Keeps focus-visible explicit. */
.footer-links a{
  position:relative;
  transition:color var(--t-med) var(--ease);
}
.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  bottom:-2px;
  height:1px;
  width:0;
  background:var(--accent);
  transition:width var(--t-med) var(--ease);
}
.footer-links a:hover::after,
.footer-links a:focus-visible::after{width:100%}
.footer-links a:focus-visible{outline:none;color:var(--text)}

/* Nav link active indicator: subtle dot below the current section. */
.nav-links a{position:relative}
.nav-links a.is-section-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:4px;
  height:4px;
  border-radius:999px;
  background:var(--accent);
  transform:translateX(-50%);
}

/* Card hover polish: lift + accent border for the homepage cards that
   currently don't share a hover state. Kept extremely subtle. */
.impact-tile,
.experience-tile,
.ops-tile,
.control-card{
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.impact-tile:hover,
.experience-tile:hover,
.control-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow-soft), 0 0 0 1px var(--accent-soft) inset;
}

/* Keyboard accessibility: a clear, not-too-loud focus ring on all
   interactive surfaces that don't already have one. */
a:focus-visible,
button:focus-visible:not(.btn){
  outline:2px solid var(--accent-soft-2);
  outline-offset:2px;
  border-radius:6px;
}

/* Small typography utility: keep a short two-word phrase together so
   important nouns never split across lines (e.g. "scanner hardware",
   "Visa, Mastercard, and mobile wallets"). Use sparingly; do not
   sprinkle on every sentence. */
.nowrap{white-space:nowrap}

/* ============== Account / auth nav: lighter than homepage nav ============== */
/* The account page intentionally drops the homepage section anchors
   (Overview / How it works / Use cases / ...) because they would be
   confusing on the auth surface. The account nav keeps just the brand,
   the theme toggle, and a single "Back to home" link.
   The base .nav-inner uses a 3-track grid (auto / 1fr / auto) sized
   for the homepage's three-region nav. With only two children on the
   account page, the second child (nav-actions) lands inside the 1fr
   track and reads as "beside the logo". We collapse the grid to two
   auto tracks here so the actions sit hard right.
   The "Back to home" button must also stay visible at every width, so
   we override the global mobile rule that otherwise hides
   .nav-actions .btn at 760px and below. The mobile menu trigger and
   mobile menu drawer are removed from the HTML, so no fallback is
   required. */
.site-nav-account .nav-inner{
  grid-template-columns:auto auto;
  justify-content:space-between;
}
@media (max-width:760px){
  .site-nav-account .nav-actions .btn{display:inline-flex}
}
/* Narrow viewport (e.g. iPhone SE / 375px): the account/collaborate
   nav must keep brand + theme + Help + Back-to-home all visible. The
   sum overflows by ~35px at 375px with the standard .btn padding, so
   we tighten the padding + gap on .site-nav-account at very narrow
   widths only. Behavior, button order, and labels are unchanged. */
@media (max-width:480px){
  .site-nav-account .nav-actions{gap:6px}
  .site-nav-account .nav-actions .btn{
    padding:10px 12px;
    min-height:40px;
    font-size:12.5px;
  }
  .site-nav-account .theme-toggle{
    min-width:38px;
    height:38px;
    padding:0 10px;
  }
  .site-nav-account .brand svg{height:18px}
}

@media (max-width:760px){
  .hero-home{padding:84px 0 32px}
  .hero-grid{background-size:52px 52px}
  .section-impact,
  .section-model,
  .section-operations,
  .section-experience{padding:72px 0}
  .impact-grid,
  .ops-grid,
  .experience-grid{grid-template-columns:1fr}
  .impact-tile,
  .experience-tile{padding:26px 22px}
  .control-card{padding:26px 22px}
  .ops-tile{padding:24px 20px}
  .hero-kicker{padding:5px 12px 5px 10px;letter-spacing:.18em}
}

@media (max-width:480px){
  .hero-home{padding:72px 0 28px}
  .control-card h3,
  .experience-tile h3,
  .impact-tile h3{font-size:18px}
}

/* ============== Motion choreography polish ============== */
[data-reveal]{
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
}

/* Hero panel subtle pointer-driven tilt (JS adds --tx/--ty + .is-tilted) */
.hero-panel[data-tilt]{perspective:1600px}
.hero-panel[data-tilt].is-tilted{
  transform:translate3d(0,0,0) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .36s var(--ease-out);
}

/* Motion safety: extend existing reduced-motion block */
@media (prefers-reduced-motion: reduce){
  .hero-grid{display:none}
  .hero-panel[data-tilt].is-tilted{transform:none;transition:none}
}

/* ============== Footer social (Instagram) ============== */
.footer-social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:11px;
  border:1px solid var(--line);
  background:hsla(220,18%,12%,.36);
  color:var(--text-2);
  transition:
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .footer-social-link{background:hsla(36,36%,90%,.5)}
.footer-social-link svg{
  width:17px;
  height:17px;
  flex-shrink:0;
  transition:transform var(--t-med) var(--ease);
}
.footer-social-link:hover,
.footer-social-link:focus-visible{
  color:var(--accent);
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
  transform:translateY(-1px);
  box-shadow:0 8px 20px -14px var(--accent-glow);
  outline:none;
}
.footer-social-link:hover svg,
.footer-social-link:focus-visible svg{transform:scale(1.05)}
.footer-social-link:focus-visible{box-shadow:0 0 0 3px var(--accent-soft), 0 8px 20px -14px var(--accent-glow)}

@media (max-width:760px){
  .footer-social{margin-top:18px}
  .footer-social-link{width:40px;height:40px}
}

/* Step 5 readiness summary panel. */
.readiness-summary{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}
.readiness-section{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.18);
}
html[data-theme="light"] .readiness-section{background:hsla(42,48%,98%,.42)}
.readiness-section-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font:700 14px/1 var(--font-body);
  border:1px solid var(--accent-soft-2);
}
.readiness-section-body{min-width:0}
.readiness-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.readiness-section-head h5{
  margin:0;
  font:600 13.5px/1.2 var(--font-body);
  letter-spacing:.01em;
  color:var(--text-1);
  text-transform:uppercase;
}
.readiness-edit{padding:4px 10px;font-size:12px}
.readiness-section-value{font:500 14px/1.5 var(--font-body);color:var(--text-1)}
.readiness-section-value strong{color:var(--text-1)}
.readiness-section-value .mini{color:var(--text-2);margin-top:2px;display:block}
.readiness-pending{color:var(--warn)}
.readiness-note{color:var(--text-3);margin-top:4px;font-style:italic}
.readiness-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.readiness-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--text-1);
  font:500 12px/1.3 var(--font-body);
}
.readiness-chip-count{
  color:var(--text-2);
  font-weight:600;
}
.readiness-rule-list{
  list-style:disc;
  margin:6px 0 0 18px;
  padding:0;
  font:500 12.5px/1.45 var(--font-body);
  color:var(--text-2);
}
.readiness-rule-list li{margin:2px 0}
.readiness-rule-list strong{color:var(--text-1)}

/* Inline action button rendered inside a single readiness section
   (used by Admissions readiness when admissions are short). Sits
   below the section value so the customer can fix the problem
   without scrolling to the panel footer. */
.readiness-section-action{
  margin-top:10px;
}
.readiness-section-action .btn{padding:6px 14px;font-size:12.5px}
.readiness-summary.is-readonly .readiness-section-action{display:none}

/* Step 4 prerequisite note: compact line that points the customer
   to where admissions readiness actually lives (Step 5). Kept calm
   so it never reads like a blocking error. */
.machine-prereq-note{
  margin-top:14px;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px dashed var(--line);
  background:hsla(222,20%,10%,.18);
  color:var(--text-2);
}
html[data-theme="light"] .machine-prereq-note{background:hsla(42,48%,98%,.42)}

/* Step 4 Gate Device intro: three short lines instead of one dense
   sentence. Each line carries a small bold label so the customer can
   scan the structure (what / how / when). */
.machine-intro-list{
  list-style:none;
  margin:6px 0 14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:hsla(222,20%,10%,.12);
  display:flex;
  flex-direction:column;
  gap:8px;
}
html[data-theme="light"] .machine-intro-list{background:hsla(42,48%,98%,.32)}
.machine-intro-list li{
  font:500 13.5px/1.5 var(--font-body);
  color:var(--text-2);
  margin:0;
  padding:0;
}
.machine-intro-list strong{
  color:var(--text-1);
  margin-right:6px;
}

/* Step 5 final-action footer. */
.readiness-cta{
  margin-top:6px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, hsla(38,92%,58%,.10), hsla(222,20%,10%,.32));
}
html[data-theme="light"] .readiness-cta{
  background:linear-gradient(180deg, hsla(28,78%,42%,.10), hsla(42,48%,98%,.7));
}
.readiness-cta p.mini{margin:0 0 10px;color:var(--text-2)}
.readiness-cta .account-toolbar{margin-top:0}

/* Read-only mode (Overview's "View configuration report"): suppress
   the CTA footer and the inline edit links so the panel reads as
   a static record. */
.readiness-summary.is-readonly .readiness-cta,
.readiness-summary.is-readonly .readiness-edit{display:none}

/* Step 3: tighter primary/secondary hierarchy for QR admission link
   distribution. */
.tickets-primary-actions{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--accent-soft-2);
  border-radius:var(--radius);
  background:hsla(38,92%,58%,.06);
}
html[data-theme="light"] .tickets-primary-actions{background:hsla(28,78%,42%,.06)}
.tickets-actions-heading{
  margin:0 0 4px;
  font:600 13.5px/1.2 var(--font-body);
  letter-spacing:.01em;
  color:var(--text-1);
}
.tickets-primary-actions p.mini{margin:0 0 10px;color:var(--text-2)}
.tickets-primary-actions .account-toolbar{margin-top:0}
.tickets-secondary-tools{margin-top:10px;display:flex;flex-direction:column;gap:8px}

/* Post-ready operation detail: report-style view for prepared,
   active, ended-pending-sync, closed, and locked operations. Reuses
   the readiness summary and adds a lifecycle timeline + manage
   actions + lifecycle explainer so the panel reads as an executive
   operation report, not a half-stub. */
.ready-detail-head{margin:0 0 12px}
.ready-detail-head h4{
  margin:0 0 4px;
  font:600 16px/1.2 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.ready-detail-head p.mini{margin:0;color:var(--text-2)}

.ready-detail-timeline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.ready-detail-timeline-pill{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.18);
  min-width:0;
}
html[data-theme="light"] .ready-detail-timeline-pill{background:hsla(42,48%,98%,.42)}
.ready-detail-timeline-label{
  font:600 11px/1.2 var(--font-body);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ready-detail-timeline-value{
  font:500 13px/1.3 var(--font-body);
  color:var(--text-1);
}

.ready-detail-actions{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.12);
}
html[data-theme="light"] .ready-detail-actions{background:hsla(42,48%,98%,.32)}
.ready-detail-actions-head{margin:0 0 10px}
.ready-detail-actions-head h5{
  margin:0;
  font:600 13.5px/1.2 var(--font-body);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--text-1);
}
.ready-detail-actions-head .mini{color:var(--text-2)}
.ready-detail-actions .account-toolbar{margin:0}

.ready-detail-lifecycle{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px dashed var(--line);
  background:hsla(222,20%,10%,.10);
}
html[data-theme="light"] .ready-detail-lifecycle{background:hsla(42,48%,98%,.28)}
.ready-detail-lifecycle h5{
  margin:0 0 6px;
  font:600 13.5px/1.2 var(--font-body);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--text-1);
}
.ready-detail-lifecycle p.mini{margin:0 0 6px;color:var(--text-2);line-height:1.55}
.ready-detail-lifecycle p.mini:last-of-type{margin-bottom:0}
.ready-detail-lifecycle .account-toolbar{margin-top:10px}

/* "Plan another operation" affordance on the ready-operation detail.
   Sits below the lifecycle explainer; clicking the button reveals
   #createOperationForm so the operator can begin a second operation
   in parallel without losing the current one. */
.ready-detail-startnew{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent-soft-2);
  background:hsla(38,92%,58%,.06);
}
html[data-theme="light"] .ready-detail-startnew{background:hsla(28,78%,42%,.06)}
.ready-detail-startnew h5{
  margin:0 0 4px;
  font:600 13.5px/1.2 var(--font-body);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--text-1);
}
.ready-detail-startnew p.mini{margin:0 0 10px;color:var(--text-2)}
.ready-detail-startnew .account-toolbar{margin:0}

/* Back-to-overview affordance at the top of Update attendees /
   QR admission links views when reached from a non-draft operation.
   Without this row the customer would feel trapped on the sub-form
   because the wizard hero / footer / readiness stepper that drafts
   use are all suppressed for non-draft operations. */
.ready-detail-back{margin:0 0 14px}
.ready-detail-back .btn{padding:6px 14px;font-size:12.5px}

/* Re-upload guide that explains what happens when the operator
   re-uploads attendees on a ready/active operation. Calm, accurate
   description of computeAttendeeDiff behavior. */
.ready-detail-reupload-guide{
  margin:0 0 14px;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px dashed var(--line);
  background:hsla(222,20%,10%,.10);
}
html[data-theme="light"] .ready-detail-reupload-guide{background:hsla(42,48%,98%,.32)}
.ready-detail-reupload-guide p.mini{margin:0;color:var(--text-2);line-height:1.55}

@media (max-width:600px){
  .readiness-section{grid-template-columns:30px 1fr;padding:12px 14px;gap:10px}
  .readiness-section-mark{width:28px;height:28px;font-size:13px}
  .readiness-section-head{flex-direction:column;gap:6px;align-items:flex-start}
  .ready-detail-timeline-pill{flex:1 1 calc(50% - 4px)}
}

/* Drafts pending setup module on the main account page. Surfaces any
   draft operation that is not currently the primary slot card so the
   customer can resume setup without opening Manage operations. Each
   row is a compact card with operation name + date/venue + Continue
   setup. */
.drafts-pending-module{
  margin-top:18px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px dashed var(--accent-soft-2);
  background:hsla(38,92%,58%,.05);
}
html[data-theme="light"] .drafts-pending-module{background:hsla(28,78%,42%,.05)}
.drafts-pending-head{margin:0 0 12px}
.drafts-pending-head h3{
  margin:0 0 4px;
  font:600 15px/1.2 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.drafts-pending-head p.mini{margin:0;color:var(--text-2)}
.drafts-pending-list{display:flex;flex-direction:column;gap:10px}
.drafts-pending-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.22);
}
html[data-theme="light"] .drafts-pending-card{background:hsla(42,48%,98%,.5)}
.drafts-pending-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.drafts-pending-kicker{
  font:700 10.5px/1.1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.drafts-pending-title{
  font:700 15.5px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text-1);
  margin:2px 0 0;
}
.drafts-pending-meta{color:var(--text-3);margin:2px 0 0}
.drafts-pending-actions{margin:0;flex-shrink:0}

@media (max-width:600px){
  .drafts-pending-card{flex-direction:column;align-items:flex-start;gap:12px}
  .drafts-pending-actions{width:100%}
  .drafts-pending-actions .btn{flex:1 1 auto}
}

/* Other operations module on the main account page. Surfaces any
   ready / live / pending sync / locked operation that is not
   currently the primary slot card so a customer who promoted a
   draft to the primary slot still sees their ready operation here.
   Visual rhythm parallels .drafts-pending-* but uses the calm
   neutral tone (no accent border) so the customer's eye lands on
   the active workspace above first. */
.ready-ops-module{
  margin-top:14px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.18);
}
html[data-theme="light"] .ready-ops-module{background:hsla(42,48%,98%,.42)}
.ready-ops-head{margin:0 0 12px}
.ready-ops-head h3{
  margin:0 0 4px;
  font:600 15px/1.2 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text-1);
}
.ready-ops-head p.mini{margin:0;color:var(--text-2)}
.ready-ops-list{display:flex;flex-direction:column;gap:10px}
.ready-ops-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.28);
}
html[data-theme="light"] .ready-ops-card{background:hsla(42,48%,98%,.65)}
.ready-ops-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
.ready-ops-title{
  font:700 15.5px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text-1);
}
.ready-ops-meta{color:var(--text-3);margin:0}
.ready-ops-actions{margin:0;flex-shrink:0}

@media (max-width:600px){
  .ready-ops-card{flex-direction:column;align-items:flex-start;gap:12px}
  .ready-ops-actions{width:100%}
  .ready-ops-actions .btn{flex:1 1 auto}
}

/* Gate Devices drawer rows. Mirrors the calm, table-like style of
   the operations drawer body without pulling in the wizard chrome.
   Each .gate-devices-group is one operation; rows below are devices
   activated against that operation's Operation Key. */
.gate-devices-group{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:hsla(222,20%,12%,.35);
  margin:0 0 14px;
}
html[data-theme="light"] .gate-devices-group{background:hsla(42,48%,98%,.55);border-color:var(--line-strong)}
.gate-devices-group:last-child{margin-bottom:0}
.gate-devices-group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  justify-content:space-between;
}
.gate-devices-op-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--text-1);
  font:inherit;
  text-align:left;
}
.gate-devices-op-link strong{font:700 16px/1.3 var(--font-display);letter-spacing:-.005em}
.gate-devices-op-link:hover strong,
.gate-devices-op-link:focus-visible strong{text-decoration:underline}
.gate-devices-op-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.gate-devices-rows{display:grid;gap:8px}
.gate-devices-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:calc(var(--radius) - 4px);
  background:hsla(222,20%,8%,.35);
  border:1px solid var(--line);
}
html[data-theme="light"] .gate-devices-row{background:hsla(42,48%,99%,.6);border-color:var(--line-strong)}
.gate-devices-row-main strong{font:600 14px/1.3 var(--font-display)}
.gate-devices-row-meta{color:var(--text-3);text-align:right;flex-shrink:0}

@media (max-width:600px){
  .gate-devices-row{flex-direction:column;align-items:flex-start;gap:6px}
  .gate-devices-row-meta{text-align:left}
}

/* ----------------------------------------------------------------------
   Selected Event Collaborations
   --------------------------------------------------------------------
   Homepage teaser band sits between FAQ and the final CTA. Designed to
   feel secondary and selective: bordered card, calm copy, line-style
   CTA. Never competes with the main "Start with 100 included
   admissions" purchase CTA. The pricing-bottom-collab line is the
   subtle echo inside the pricing block. The collab-* classes below
   style the dedicated /collaborate.html review form page.
   -------------------------------------------------------------------- */
.section-collaborations{padding:48px 0 24px}
/* Compact homepage teaser. Split layout (content left, CTA + qualifier
   right) so the homepage section reads as a refined business teaser
   rather than a second large hero card. Lighter border, smaller
   padding, smaller typography than the dedicated /collaborate.html
   page hero, so the two surfaces feel distinct: the homepage
   introduces the opportunity, the collaboration page hosts the
   review process. */
.collaborations-teaser{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  max-width:920px;
  margin:0 auto;
  padding:24px 28px 24px 30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:transparent;
}
.collaborations-teaser-content{
  display:grid;
  gap:10px;
  min-width:0;
}
.collaborations-teaser-content .section-kicker{margin:0}
.collaborations-teaser-title{
  margin:0;
  font:700 clamp(1.15rem, 1.9vw, 1.45rem)/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
.collaborations-teaser-body{
  margin:0;
  max-width:58ch;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.65;
  text-wrap:pretty;
}
/* The right-side action column is anchored to the content by a hairline
   divider so the CTA + qualifier read as a designed mini-panel rather
   than centered-floating items. Items left-align inside the column so
   the qualifier sits naturally under the start of the button label. */
.collaborations-teaser-action{
  display:grid;
  gap:10px;
  justify-items:start;
  align-content:center;
  padding-left:28px;
  border-left:1px solid var(--line);
  min-height:64px;
}
.collaborations-teaser-action .btn{white-space:nowrap}
.collaborations-teaser-qualifier{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.45;
  text-align:left;
  letter-spacing:.005em;
}

/* Subtle pricing footer echo. Sits below the Paymob + support lines as
   a calm one-liner so high-visibility events know there is a review
   path without it competing with the main pricing flow. */
.pricing-bottom-collab{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px dashed var(--line);
  text-align:center;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.55;
}
.pricing-bottom-collab a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
  margin-left:4px;
}
.pricing-bottom-collab a:hover{text-decoration-color:var(--accent)}

/* ---- /collaborate.html review form ---- */
.collab-shell{padding-bottom:96px}
.collab-card{max-width:780px}
.collab-card h1,
.collab-card h2{margin-bottom:8px}
.collab-card .section-intro p{color:var(--text-2);font-size:15px;line-height:1.7}

/* Hero band that introduces the collaboration page. Sits above the
   request form and explains the positioning before the customer
   reaches the request fields. Plain solid contents (no data-reveal
   animation) so the page stays readable even if site.js fails to
   hydrate or the IntersectionObserver is blocked by tracking-
   protection extensions. */
.collab-hero{
  max-width:780px;
  margin:0 auto 32px;
  padding:36px 44px 30px;
  border:1px solid var(--line-strong);
  border-radius:22px;
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.04);
  text-align:center;
  position:relative;
}
.collab-hero-inner{display:grid;gap:14px;justify-items:center;position:relative}
.collab-hero .section-kicker{margin:0}
.collab-hero-title{
  margin:0;
  font:700 clamp(1.75rem, 3.4vw, 2.25rem)/1.12 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:balance;
}
.collab-hero-body{
  margin:0;
  max-width:58ch;
  color:var(--text-2);
  font-size:15.5px;
  line-height:1.7;
  text-wrap:pretty;
}
/* Asymmetric rhythm: a clear pause between the body and the CTA, then
   the note hugs the CTA tightly so the two read as one designed action
   group rather than three orphaned lines stacked below the body. */
.collab-hero-actions{margin-top:10px}
.collab-hero-note{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:13px;
  line-height:1.55;
  max-width:52ch;
  text-wrap:pretty;
}

/* Info bands beneath the hero. Each band is one of:
     "What selected events may receive" (4-up card grid)
     "What GateFlow asks in return"     (3-item list)
     "Review criteria"                   (5-item list)
   Calm typography, no decorative chrome, so the page reads as a
   serious public-facing review-criteria page rather than a marketing
   spread. */
.collab-info{
  max-width:780px;
  margin:0 auto 28px;
  padding:0 4px;
}
.collab-info-head{display:grid;gap:6px;margin-bottom:16px;text-align:center}
.collab-info-eyebrow{
  font:600 11px/1.2 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
}
.collab-info-title{
  margin:0;
  font:700 clamp(1.25rem, 2vw, 1.5rem)/1.18 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:balance;
}
.collab-info-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.collab-info-card{
  display:grid;
  gap:6px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
}
.collab-info-card strong{
  font:700 14.5px/1.3 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.collab-info-card p{
  margin:0;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
  text-wrap:pretty;
}
.collab-info-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.collab-info-list li{
  position:relative;
  padding:14px 18px 14px 38px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
}
.collab-info-list li::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--accent);
  opacity:.85;
}
@media (max-width:680px){
  .collab-hero{padding:32px 22px 26px;margin-bottom:24px;border-radius:18px}
  .collab-hero-title{font-size:1.6rem;line-height:1.15}
  .collab-info-grid{grid-template-columns:1fr}
  .collab-info{margin-bottom:22px;padding:0}
}

/* Single-line process sentence sitting between Review criteria and the
   request form card. Replaces the longer "What GateFlow asks in
   return" section with one calm business-process line. */
.collab-process{
  max-width:62ch;
  margin:0 auto 22px;
  text-align:center;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.65;
  text-wrap:pretty;
}

/* Written-confirmation note inside the request form card, between
   the section-intro and the first fieldset. Calm bordered block so
   the customer reads it before they start filling fields. The note
   tells the customer that submitting is not an agreement and that
   final terms are confirmed in writing before the event. */
.collab-confirm{
  margin:0 0 18px;
  padding:14px 18px;
  border:1px solid var(--accent-soft-2);
  border-radius:12px;
  background:var(--accent-soft);
}
.collab-confirm p{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  line-height:1.6;
  text-wrap:pretty;
}

/* Conditional textarea revealed when the customer checks the "Other"
   recognition placement. Hidden by default via the .hidden utility,
   shown by collaborate.js when the Other checkbox toggles on. */
.collab-other-field{
  margin-top:14px;
  margin-bottom:0;
}

/* Form-card textareas: disable the user-drag resize handle so a long
   paste cannot stretch the textarea past the form card edge, force a
   comfortable minimum height, and scroll inside when content overflows. */
.collab-form textarea{
  resize:none;
  overflow-y:auto;
  box-sizing:border-box;
  min-height:104px;
  line-height:1.55;
}
.collab-form #collabOtherDescription{min-height:64px}
.collab-form #collabMessage{min-height:120px}
.collab-form #collabFit{min-height:148px}

/* Subtle live character counter that sits below a textarea. Aligned
   right under the field so the counter does not steal attention from
   the label or the textarea itself. */
/* Specificity note: .legal-card p sets font-size:15px/1.84, so the
   counter selector is scoped under .collab-form to win on specificity
   (and cascade order) without resorting to !important. */
.collab-form .collab-counter{
  margin:6px 2px 0;
  text-align:right;
  color:var(--text-3);
  font:500 11.5px/1.2 var(--font-display);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.collab-form .collab-counter.is-near-limit{color:var(--text-2)}
.collab-form .collab-counter.is-at-limit{color:var(--accent)}

/* Radio group for the new "Collaboration use" question. Visual
   parity with .collab-checks: bordered tiles, accent ring on the
   currently selected tile. */
.collab-radio-group{
  display:grid;
  /* Each column sizes to its longest label (max-content) before
     splitting any remaining row width equally. This prevents the
     middle "Requires internal approval" tile from wrapping to a
     second line on desktop widths while keeping the three cards
     balanced. Mobile collapses to 1fr below. */
  grid-template-columns:repeat(3, minmax(max-content, 1fr));
  gap:8px 12px;
}
.collab-radio{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.collab-radio span{white-space:nowrap}
.collab-radio input[type="radio"]{
  flex-shrink:0;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.collab-radio:hover{border-color:var(--line-strong)}
.collab-radio:has(input:checked){
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
}
@media (max-width:680px){
  .collab-radio-group{grid-template-columns:1fr}
  .collab-radio span{white-space:normal}
}

.collab-form{
  display:grid;
  gap:24px;
  margin-top:8px;
}
.collab-fieldset{
  display:grid;
  gap:14px;
  padding:22px 22px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  margin:0;
}
.collab-legend{
  padding:0 6px;
  margin-left:-6px;
  font:600 11px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
}
.collab-fieldset-help{
  margin:0;
  font:600 11.5px/1 var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.collab-fieldset-hint{
  margin:0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.55;
}
.collab-req{color:var(--accent);font-weight:600;margin-left:2px}

.collab-field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.collab-field-grid .field{margin-bottom:0}

.collab-checks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
}
.collab-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.collab-check input[type="checkbox"]{
  flex-shrink:0;
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.collab-check:hover{border-color:var(--line-strong)}
.collab-check:has(input:checked){
  border-color:var(--accent-soft-2);
  background:var(--accent-soft);
}

/* Review-period note sitting between the email-draft disclosure and
   the submit button. Calm + small so it reads as a quiet expectation
   line, not a promise. Scoped under .collab-form to outrank the
   .legal-card p baseline (font-size: 15px) that would otherwise
   force this line to default body size. */
.collab-form .collab-review-period{
  margin:-4px 0 0;
  text-align:center;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:.005em;
}

.collab-disclosure{
  margin:0;
  padding:14px 18px;
  border-radius:12px;
  background:var(--surface-2);
  border:1px dashed var(--line);
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
  text-wrap:pretty;
}
.collab-disclosure a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
}
/* Fallback paragraph shown only after a successful Prepare action.
   Sits below the status box so it reads as guidance for the case
   where the user's email app did not open. Carries a mailto link to
   the support address via [data-support-email] so the runtime
   support-email handler keeps it consistent with the rest of the
   site. Visually calmer than the disclosure above the button. */
.collab-fallback{
  margin:0;
  text-align:center;
  text-wrap:pretty;
}
.collab-fallback p{
  margin:0;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
}
.collab-fallback a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--accent-soft-2);
  text-underline-offset:3px;
}

.collab-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.collab-actions .btn{min-width:200px;justify-content:center}

.collab-status{margin:0;white-space:pre-line}
.collab-status.is-info{
  background:var(--accent-soft);
  border-color:var(--accent-soft-2);
  color:var(--text);
}
.collab-status.is-error{
  background:hsla(0,72%,52%,.12);
  border-color:hsla(0,72%,52%,.45);
  color:var(--text);
}

/* Mobile: collapse 2-col grids to single column, allow buttons to stretch. */
@media (max-width:680px){
  .collaborations-teaser{
    grid-template-columns:1fr;
    gap:16px;
    padding:20px 22px;
    text-align:left;
    border-radius:16px;
  }
  .collaborations-teaser-action{
    justify-items:start;
    gap:10px;
    padding-left:0;
    padding-top:14px;
    border-left:0;
    border-top:1px solid var(--line);
    min-height:0;
  }
  .collaborations-teaser-qualifier{text-align:left}
  .collab-fieldset{padding:18px 16px 16px}
  .collab-field-grid,
  .collab-checks{grid-template-columns:1fr}
  .collab-actions{justify-content:stretch}
  .collab-actions .btn{min-width:0;flex:1}
}

/* ===================================================================
   Homepage redesign (2026): "Gate Control" landing surface.
   Premium, product-specific hero with an animated Gate Device panel,
   a 3-step flow line, a calm control-layer panel, three audience
   cards, a short pricing card, and a focused final CTA. Everything
   below is scoped to homepage-specific class names so the operator
   dashboard and the account/auth surfaces are untouched.
   =================================================================== */

/* Hero shell + atmosphere */
.hero-os{
  padding:104px 0 88px;
  overflow:hidden;
}
.hero-os .hero-shell-os{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:56px;
  align-items:start;
}
.hero-os .hero-copy{
  display:grid;
  gap:18px;
  max-width:680px;
  margin:0 auto;
  text-align:center;
  justify-items:center;
}
.hero-os .hero-title{
  max-width:640px;
  font-size:clamp(2.4rem,4.8vw,3.6rem);
  font-weight:700;
  letter-spacing:-.034em;
  line-height:1.02;
  text-wrap:balance;
}
.hero-os .hero-sub{max-width:580px;color:var(--text-2);font-size:16.5px;line-height:1.7}
.hero-os .hero-actions{margin-top:6px}
.hero-os .hero-note{color:var(--text-3);font-size:13px;line-height:1.7}

@media (min-width:1080px){
  .hero-os .hero-shell-os{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:56px;
    align-items:center;
  }
  .hero-os .hero-copy{
    max-width:none;
    margin:0;
    text-align:left;
    justify-items:start;
    padding-top:8px;
  }
  .hero-os .hero-title{max-width:none;font-size:clamp(2.8rem,4.2vw,3.9rem)}
  .hero-os .hero-sub{max-width:560px}
  .hero-os .hero-actions{justify-content:flex-start}
}

.hero-orb{
  position:absolute;
  top:-200px;
  right:-220px;
  width:780px;
  height:780px;
  background:
    radial-gradient(circle at 50% 50%,
      hsla(38,92%,58%,.18) 0%,
      hsla(38,92%,58%,.06) 36%,
      transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
  animation:heroOrbDrift 14s ease-in-out infinite alternate;
}
html[data-theme="light"] .hero-orb{
  background:
    radial-gradient(circle at 50% 50%,
      hsla(28,78%,42%,.22) 0%,
      hsla(28,78%,42%,.08) 36%,
      transparent 70%);
}
@keyframes heroOrbDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-22px,28px) scale(1.06)}
}

.hero-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(hsla(220,14%,30%,.10) 1px, transparent 1px),
    linear-gradient(90deg, hsla(220,14%,30%,.10) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center;
  mask-image:radial-gradient(ellipse at 50% 36%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 36%, #000 0%, transparent 78%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
html[data-theme="light"] .hero-grid-bg{
  background-image:
    linear-gradient(hsla(30,18%,42%,.12) 1px, transparent 1px),
    linear-gradient(90deg, hsla(30,18%,42%,.12) 1px, transparent 1px);
}

/* Hero trust chips */
.hero-chips{
  list-style:none;
  margin:6px 0 4px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.hero-chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(220,18%,12%,.46);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:500;
  transition:border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .hero-chips li{background:hsla(36,36%,92%,.6)}
.hero-chips li:hover{border-color:var(--accent-soft-2);color:var(--text)}
.hero-chip-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px hsla(38,92%,58%,.18);
}
html[data-theme="light"] .hero-chip-dot{box-shadow:0 0 0 4px hsla(28,78%,42%,.18)}
@media (min-width:1080px){
  .hero-os .hero-chips{justify-content:flex-start}
}

/* ====================================================================
   Gate Device stage: the centerpiece visual.
   - rings: three expanding Wi-Fi arcs from the device
   - track + cards: QR admission cards drifting in from the right
   - gate-device: the command panel
   - phone: scanner phone card pulsing as a scan succeeds
   - sync chip: small confirmation pill bottom-right
   The whole stage is wrapped in [data-state] so site.js can swap the
   on-screen result label without disturbing the CSS keyframes.
   ==================================================================== */
.gate-stage{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  aspect-ratio:1 / 1;
  isolation:isolate;
}
@media (min-width:1080px){
  .gate-stage{max-width:none;margin:0;aspect-ratio:1 / 1}
}

.gate-stage-rings,
.gate-stage-rings span{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.gate-stage-rings span{
  border-radius:50%;
  border:1px solid hsla(38,92%,58%,.32);
  opacity:0;
  transform:scale(.35);
  animation:gateRingPulse 4s var(--ease-out) infinite;
}
html[data-theme="light"] .gate-stage-rings span{border-color:hsla(28,78%,42%,.35)}
.gate-stage-rings span:nth-child(2){animation-delay:1.3s}
.gate-stage-rings span:nth-child(3){animation-delay:2.6s}
@keyframes gateRingPulse{
  0%{opacity:0;transform:scale(.32)}
  20%{opacity:.7}
  100%{opacity:0;transform:scale(1.08)}
}

.gate-stage-track{
  position:absolute;
  inset:8% -6% 8% 40%;
  pointer-events:none;
  z-index:1;
}
.gate-stage-card{
  position:absolute;
  width:60px;
  height:78px;
  right:0;
  top:50%;
  border-radius:8px;
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(38,92%,58%,.28), hsla(38,92%,58%,.04)),
    linear-gradient(180deg, hsla(222,22%,10%,.92), hsla(222,22%,10%,.96));
  box-shadow:0 14px 30px -16px hsla(38,92%,58%,.45), inset 0 0 0 1px hsla(0,0%,100%,.04);
  opacity:0;
  transform:translate(0,-50%) translateX(20%);
  animation:gateCardFlow 6s var(--ease-out) infinite;
}
html[data-theme="light"] .gate-stage-card{
  background:
    linear-gradient(180deg, hsla(28,78%,42%,.18), hsla(28,78%,42%,.02)),
    linear-gradient(180deg, hsla(42,48%,98%,.96), hsla(42,48%,98%,.98));
}
.gate-stage-card::before,
.gate-stage-card::after{
  content:"";
  position:absolute;
  background:currentColor;
  color:var(--accent);
  opacity:.92;
}
.gate-stage-card::before{
  inset:8px 8px auto 8px;
  height:38px;
  border-radius:4px;
  background:
    repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
  opacity:.55;
}
.gate-stage-card::after{
  left:8px;
  right:8px;
  bottom:8px;
  height:14px;
  border-radius:3px;
  background:linear-gradient(90deg, currentColor 0 40%, transparent 40% 100%);
  opacity:.32;
}
.gate-stage-card-a{animation-delay:0s}
.gate-stage-card-b{animation-delay:2s;top:36%}
.gate-stage-card-c{animation-delay:4s;top:64%}
@keyframes gateCardFlow{
  0%{opacity:0;transform:translate(0,-50%) translateX(40%) rotate(8deg) scale(.94)}
  18%{opacity:.95;transform:translate(0,-50%) translateX(0) rotate(4deg) scale(1)}
  62%{opacity:.95;transform:translate(0,-50%) translateX(-180%) rotate(-2deg) scale(.96)}
  78%{opacity:0;transform:translate(0,-50%) translateX(-220%) rotate(-4deg) scale(.86)}
  100%{opacity:0;transform:translate(0,-50%) translateX(-220%) rotate(-4deg) scale(.86)}
}

/* The Gate Device "command panel". Centered, dominant. */
.gate-device{
  position:absolute;
  inset:8% 12% 8% 12%;
  border-radius:22px;
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,22%,10%,.94), hsla(222,18%,12%,.98)),
    linear-gradient(180deg, hsla(38,92%,58%,.06), transparent 24%);
  box-shadow:
    0 50px 90px -40px rgba(0,0,0,.55),
    0 0 60px -24px var(--accent-glow),
    inset 0 1px 0 hsla(0,0%,100%,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:16px;
  z-index:2;
  overflow:hidden;
}
html[data-theme="light"] .gate-device{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.96), hsla(38,36%,94%,.98)),
    linear-gradient(180deg, hsla(28,78%,42%,.08), transparent 26%);
  box-shadow:
    0 50px 90px -40px rgba(81,55,23,.25),
    0 0 60px -24px var(--accent-glow),
    inset 0 1px 0 hsla(0,0%,100%,.4);
}
.gate-device::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, hsla(38,100%,70%,.45), transparent);
  pointer-events:none;
}
.gate-device-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 4px 10px;
  border-bottom:1px dashed var(--line);
}
.gate-device-eye{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 11px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-2);
}
.gate-device-eye-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px hsla(155,60%,54%,.18);
  animation:gateDot 2.4s ease-in-out infinite;
}
@keyframes gateDot{
  0%,100%{box-shadow:0 0 0 4px hsla(155,60%,54%,.18)}
  50%{box-shadow:0 0 0 8px hsla(155,60%,54%,.04)}
}
.gate-device-state{
  font:700 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.gate-device-screen{padding:12px 4px;display:grid;gap:12px}
.gate-device-status{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--accent-soft-2);
  background:linear-gradient(180deg, var(--accent-soft), transparent 80%);
  position:relative;
  overflow:hidden;
}
.gate-device-status::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, hsla(38,100%,70%,.18), transparent);
  transform:translateX(-100%);
  animation:gateScan 3.6s var(--ease-out) infinite;
  pointer-events:none;
}
@keyframes gateScan{
  0%{transform:translateX(-100%)}
  60%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}
.gate-device-status-pulse{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 6px hsla(155,60%,54%,.18);
}
.gate-device-status strong{
  display:block;
  font:700 15px/1.2 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
}
.gate-device-status p{margin:2px 0 0;color:var(--text-2);font-size:12px}
.gate-device-chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--accent-soft-2);
  background:hsla(38,92%,58%,.18);
  color:var(--accent);
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Feed of recent decisions */
.gate-device-feed{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.gate-device-feed li{
  display:grid;
  grid-template-columns:6px 1fr auto;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:hsla(222,20%,10%,.42);
  border:1px solid var(--line);
  font-size:12px;
}
html[data-theme="light"] .gate-device-feed li{background:hsla(42,36%,94%,.5)}
.gate-device-feed-bar{
  width:6px;
  height:24px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.85;
}
.gate-device-feed li:nth-child(2) .gate-device-feed-bar{background:linear-gradient(180deg, var(--blue), hsla(210,72%,72%,.7));opacity:.7}
.gate-device-feed li:nth-child(3) .gate-device-feed-bar{background:linear-gradient(180deg, var(--text-3), var(--text-3));opacity:.42}
.gate-device-feed b{display:block;font:700 12.5px/1.2 var(--font-display);color:var(--text)}
.gate-device-feed em{display:block;margin-top:2px;font-style:normal;color:var(--text-3);font-size:11px}
.gate-device-feed li > span:last-child{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
}
.gate-device-feed li:nth-child(3) > span:last-child{color:var(--text-3)}

.gate-device-foot{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:10px 4px 2px;
  border-top:1px dashed var(--line);
}
.gate-device-foot-cell{
  text-align:center;
  padding:8px 6px;
  border-radius:10px;
  background:hsla(222,20%,10%,.3);
}
html[data-theme="light"] .gate-device-foot-cell{background:hsla(42,36%,94%,.4)}
.gate-device-foot-label{
  display:block;
  font:700 10px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:6px;
}
.gate-device-foot strong{
  display:block;
  font:700 14px/1 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
}

/* Scanner phone card */
.gate-stage-phone{
  position:absolute;
  left:-2%;
  bottom:6%;
  width:140px;
  z-index:3;
  animation:gatePhoneFloat 5s ease-in-out infinite alternate;
}
.gate-stage-phone-frame{
  position:relative;
  border-radius:18px;
  padding:5px;
  background:linear-gradient(180deg, hsla(222,18%,12%,.96), hsla(222,18%,16%,.96));
  border:1px solid var(--line-strong);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.55);
}
html[data-theme="light"] .gate-stage-phone-frame{
  background:linear-gradient(180deg, hsla(36,30%,90%,.96), hsla(36,30%,94%,.96));
}
.gate-stage-phone-screen{
  padding:14px 12px 12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, hsla(222,22%,10%,.98), hsla(222,18%,12%,.98)),
    linear-gradient(180deg, hsla(155,60%,54%,.12), transparent 50%);
  display:grid;
  gap:8px;
  text-align:center;
  min-height:124px;
}
html[data-theme="light"] .gate-stage-phone-screen{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.98), hsla(38,36%,94%,.98)),
    linear-gradient(180deg, hsla(155,60%,32%,.12), transparent 50%);
}
.gate-stage-phone-eyebrow{
  font:700 9.5px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-3);
}
.gate-stage-phone-result{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:6px 0;
}
.gate-stage-phone-mark{
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, hsla(155,60%,54%,.32), transparent 70%);
  position:relative;
  animation:phonePulse 2.4s ease-in-out infinite;
}
.gate-stage-phone-mark::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px hsla(155,60%,54%,.6);
}
@keyframes phonePulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.18)}
}
.gate-stage-phone-result strong{
  font:700 13.5px/1 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
}
.gate-stage-phone-foot{
  font:700 10px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.gate-stage-phone-glow{
  position:absolute;
  inset:auto -10px -10px -10px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(circle, hsla(38,92%,58%,.42), transparent 60%);
  filter:blur(14px);
  z-index:-1;
  opacity:.7;
}
html[data-theme="light"] .gate-stage-phone-glow{background:radial-gradient(circle, hsla(28,78%,42%,.42), transparent 60%)}
@keyframes gatePhoneFloat{
  0%{transform:translateY(0) rotate(-3deg)}
  100%{transform:translateY(-10px) rotate(-1deg)}
}

/* Sync chip bottom-right */
.gate-stage-sync{
  position:absolute;
  right:-2%;
  bottom:14%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:hsla(222,18%,12%,.92);
  border:1px solid var(--line-strong);
  color:var(--text-2);
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
  z-index:3;
  animation:syncFloat 4.5s ease-in-out infinite alternate;
}
html[data-theme="light"] .gate-stage-sync{background:hsla(36,30%,90%,.96)}
.gate-stage-sync-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px hsla(210,72%,72%,.22);
  animation:gateDot 2.4s ease-in-out infinite .6s;
}
html[data-theme="light"] .gate-stage-sync-dot{background:var(--blue);box-shadow:0 0 0 4px hsla(210,60%,44%,.2)}
@keyframes syncFloat{
  0%{transform:translateY(0)}
  100%{transform:translateY(-6px)}
}

/* ====================================================================
   How it works: a horizontal flow line with three steps.
   The line is a single gradient track behind the step marks; it
   collapses to a vertical version on mobile.
   ==================================================================== */
.section-how-flow{padding-top:88px;padding-bottom:88px}
.flow-line{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  counter-reset:flow;
}
.flow-line::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:46px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2) 18%, var(--accent-soft-2) 82%, transparent);
  z-index:0;
}
.flow-line::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:45px;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent-2) 50%, var(--accent) 82%, transparent);
  filter:blur(6px);
  opacity:.42;
  z-index:0;
  animation:flowGlow 4.5s ease-in-out infinite alternate;
}
@keyframes flowGlow{
  0%{opacity:.28;filter:blur(8px)}
  100%{opacity:.55;filter:blur(4px)}
}
.flow-step{
  position:relative;
  z-index:1;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:8px;
}
.flow-step-mark{
  width:92px;
  height:92px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, hsla(222,22%,10%,.95), hsla(222,18%,12%,.98)),
    radial-gradient(circle at 50% 30%, hsla(38,92%,58%,.16), transparent 70%);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  box-shadow:0 24px 50px -28px var(--accent-glow), inset 0 1px 0 hsla(0,0%,100%,.04);
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .flow-step-mark{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.96), hsla(38,36%,94%,.98)),
    radial-gradient(circle at 50% 30%, hsla(28,78%,42%,.18), transparent 70%);
}
.flow-step:hover .flow-step-mark{transform:translateY(-3px);box-shadow:0 30px 60px -28px var(--accent-glow)}
.flow-step-mark svg{width:34px;height:34px}
.flow-step-index{
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.flow-step h3{
  font:700 18px/1.25 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
  max-width:18ch;
}
.flow-step p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.7;
  max-width:32ch;
}
@media (max-width:880px){
  .flow-line{grid-template-columns:1fr;gap:22px}
  .flow-line::before,
  .flow-line::after{display:none}
  .flow-step{
    grid-template-columns:auto 1fr;
    text-align:left;
    align-items:start;
    gap:18px;
    justify-items:start;
  }
  .flow-step-mark{width:64px;height:64px}
  .flow-step-mark svg{width:24px;height:24px}
  .flow-step h3,
  .flow-step p{max-width:none}
  .flow-step-index{grid-column:2;margin-top:4px}
  .flow-step h3,
  .flow-step p{grid-column:2}
}

/* ====================================================================
   Control layer panel: 4 calm rows inside a single bordered panel.
   The left "edge" is a glowing accent gradient that reads as the
   layer line, reinforcing the "entry-control layer" metaphor.
   ==================================================================== */
.control-layer{
  position:relative;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.62), hsla(222,18%,12%,.86)),
    radial-gradient(1000px 320px at 50% -10%, hsla(38,92%,58%,.06), transparent 70%);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.03);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
html[data-theme="light"] .control-layer{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.96)),
    radial-gradient(1000px 320px at 50% -10%, hsla(28,78%,42%,.06), transparent 70%);
}
.control-layer-edge{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:linear-gradient(180deg, transparent, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%, transparent);
  opacity:.85;
}
.control-layer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.control-layer-list > li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  padding:28px 30px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.control-layer-list > li:nth-child(1),
.control-layer-list > li:nth-child(2){border-top:none}
.control-layer-list > li:nth-child(odd){border-left:none}
.control-layer-icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  flex-shrink:0;
}
.control-layer-icon svg{width:22px;height:22px}
.control-layer-list h3{
  font:700 17px/1.25 var(--font-display);
  letter-spacing:-.01em;
  margin-bottom:6px;
  color:var(--text);
}
.control-layer-list p{color:var(--text-2);font-size:14px;line-height:1.7}
@media (max-width:760px){
  .control-layer-list{grid-template-columns:1fr}
  .control-layer-list > li{padding:22px 24px;border-left:none}
  .control-layer-list > li:nth-child(2){border-top:1px solid var(--line)}
}

/* ====================================================================
   Audience cards: three calm cards. Each one is a noun-led tag and
   a short sentence. Premium hover lift.
   ==================================================================== */
.section-audience{padding-top:88px;padding-bottom:88px}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.audience-card{
  position:relative;
  padding:28px 26px 24px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-soft), inset 0 1px 0 hsla(0,0%,100%,.02);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow:hidden;
}
.audience-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2), transparent);
  opacity:0;
  transition:opacity var(--t-med) var(--ease);
}
.audience-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow), 0 0 30px -18px var(--accent-glow);
}
.audience-card:hover::before{opacity:1}
.audience-card-tag{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--accent-soft-2);
  background:var(--accent-soft);
  color:var(--accent);
  font:700 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.audience-card p{color:var(--text-2);font-size:14.5px;line-height:1.72}
@media (max-width:880px){
  .audience-grid{grid-template-columns:1fr}
}

/* ====================================================================
   Simplified pricing card. No calculator on the homepage.
   ==================================================================== */
.section-pricing{padding-top:80px;padding-bottom:80px}
.pricing-card{
  display:grid;
  gap:22px;
  padding:32px 36px 30px;
  border-radius:var(--radius-xl);
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.84), hsla(222,18%,12%,.94)),
    radial-gradient(800px 300px at 50% -20%, hsla(38,92%,58%,.1), transparent 70%);
  box-shadow:var(--shadow), 0 0 40px -22px var(--accent-glow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  text-align:center;
}
html[data-theme="light"] .pricing-card{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.94), hsla(38,36%,94%,.98)),
    radial-gradient(800px 300px at 50% -20%, hsla(28,78%,42%,.1), transparent 70%);
}
.pricing-card-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:560px;
  display:grid;
  gap:14px;
  text-align:left;
}
.pricing-card-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:14px 18px;
  border-radius:14px;
  background:hsla(222,20%,10%,.42);
  border:1px solid var(--line);
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
}
html[data-theme="light"] .pricing-card-list li{background:hsla(42,36%,94%,.5)}
.pricing-card-mark{
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent) 0%, var(--accent-2) 80%);
  box-shadow:0 0 0 4px hsla(38,92%,58%,.18);
  flex-shrink:0;
}
html[data-theme="light"] .pricing-card-mark{box-shadow:0 0 0 4px hsla(28,78%,42%,.16)}
.pricing-card-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:4px;
}
.pricing-card-foot{
  margin:0 auto;
  max-width:580px;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.7;
}
.pricing-card-foot a{color:var(--accent);text-decoration:none}
.pricing-card-foot a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){
  .pricing-card{padding:24px 20px}
  .pricing-card-list li{padding:12px 14px}
}

/* FAQ outro */
.faq-outro{
  margin:22px auto 0;
  text-align:center;
  color:var(--text-2);
  font-size:14px;
}
.faq-outro a{color:var(--accent)}
.faq-outro a:hover{text-decoration:underline;text-underline-offset:3px}

/* CTA band variant. Slightly darker glow + tighter copy. */
.cta-band-os .cta-inner{position:relative;z-index:1;text-align:center;padding:84px 24px 96px}
.cta-band-os h2{
  margin:14px auto 16px;
  font:700 clamp(1.8rem,3.6vw,2.6rem)/1.1 var(--font-display);
  letter-spacing:-.024em;
  max-width:720px;
  text-wrap:balance;
}
.cta-band-os p{max-width:540px;margin:0 auto;color:var(--text-2);font-size:15px;line-height:1.7}
.cta-band-os .cta-actions{margin-top:22px;justify-content:center}

/* ====================================================================
   Reduced motion: stop every homepage hero animation and the flow
   line glow so the page is still beautiful when motion is disabled.
   ==================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero-orb,
  .gate-stage-rings span,
  .gate-stage-card,
  .gate-device-status::after,
  .gate-device-eye-dot,
  .gate-stage-phone,
  .gate-stage-phone-mark,
  .gate-stage-sync,
  .gate-stage-sync-dot,
  .flow-line::after{
    animation:none !important;
  }
  .gate-stage-card{opacity:.95;transform:translate(0,-50%)}
  .gate-stage-card-a{right:-4%}
  .gate-stage-card-b{right:24%}
  .gate-stage-card-c{right:54%;opacity:.5}
}

/* ===================================================================
   Cross-page polish (2026): account workspace preview + collaborate
   surface polish. Mirrors the premium homepage feel without breaking
   any existing .auth-side-panel / .auth-card / .collab-* hooks.
   =================================================================== */

/* Account: workspace preview panel that replaces the previous static
   value list. Uses the same glass surface as .auth-side-panel but
   layers a flow (Create -> Generate -> Verify) and a 2-cell foot row
   that visually echoes the homepage Gate Device foot metrics. */
.workspace-preview{
  position:relative;
  display:grid;
  gap:16px;
  overflow:hidden;
}
.workspace-preview::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-soft-2), transparent);
  pointer-events:none;
}
.workspace-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.workspace-preview-sub{
  color:var(--text-2);
  font-size:14px;
  line-height:1.6;
  margin-top:-6px;
}
.workspace-preview-flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.workspace-preview-flow > li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
}
html[data-theme="light"] .workspace-preview-flow > li{background:hsla(42,36%,94%,.6)}
.workspace-preview-flow > li:hover{border-color:var(--accent-soft-2)}
.workspace-preview-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  font:700 11px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  flex-shrink:0;
}
.workspace-preview-flow strong{
  display:block;
  font:700 14.5px/1.3 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:3px;
}
.workspace-preview-flow p{
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
}
.workspace-preview-foot{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding-top:6px;
  border-top:1px dashed var(--line);
}
.workspace-preview-foot-cell{
  padding:10px 12px;
  border-radius:12px;
  background:hsla(222,20%,10%,.3);
}
html[data-theme="light"] .workspace-preview-foot-cell{background:hsla(42,36%,94%,.5)}
.workspace-preview-foot-label{
  display:block;
  font:700 10px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:6px;
}
.workspace-preview-foot-cell strong{
  display:block;
  font:700 13.5px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.workspace-preview .auth-value-foot{margin-top:2px}

@media (max-width:760px){
  .workspace-preview-flow > li{padding:11px 12px}
  .workspace-preview-foot{grid-template-columns:1fr}
}

/* ===================================================================
   Account page v2: Entry Control Workspace command center.
   - Kills the ~150px dead space above the dashboard.
   - Replaces the flat cockpit-summary with a true command bar that
     fuses workspace identity + KPI strip + actions into one panel.
   - Promotes the primary-op module to the centerpiece (accent treatment,
     larger surface area, visual presence).
   - Demotes the secondary action cards into a refined toolbar.
   - Keeps cockpit-state-row as a quieter strip below.
   All existing IDs, data-cockpit-open buttons, drawer panels, and forms
   are untouched; only the visual composition changed.
   =================================================================== */

/* Collapse the workspace-hero band in dashboard mode so the command
   bar sits directly under the nav. The auth state keeps its hero
   spacing because the unauth visitor needs the visual breathing room. */
.workspace-hero-shell.is-dashboard{display:none}
body[data-page="account"] .workspace-hero{padding:0;margin:0}
body[data-page="account"] .workspace-hero:has(.workspace-hero-shell.is-dashboard){min-height:0;padding:0}
body[data-page="account"] .workspace-section{padding-top:36px}
@media (max-width:760px){
  body[data-page="account"] .workspace-section{padding-top:24px}
}

/* The workspace-board wraps the dashboard surfaces and sets the
   vertical rhythm. Gaps are deliberately tighter than the legacy
   layout so the page feels like one cohesive workspace. */
.workspace-board{
  display:grid;
  gap:24px;
}

/* ---------- Command bar ---------- */
.cmd-bar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "identity actions"
    "warning  warning"
    "kpis     kpis";
  gap:18px 24px;
  align-items:start;
  padding:28px 32px;
  border-radius:var(--radius-xl);
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.88), hsla(222,18%,12%,.96)),
    radial-gradient(900px 280px at 100% -10%, hsla(38,92%,58%,.10), transparent 70%);
  box-shadow:var(--shadow), 0 0 60px -28px var(--accent-glow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
html[data-theme="light"] .cmd-bar{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.94), hsla(38,36%,94%,.98)),
    radial-gradient(900px 280px at 100% -10%, hsla(28,78%,42%,.10), transparent 70%);
}
.cmd-bar::before{
  content:"";
  position:absolute;
  top:0;
  left:32px;
  right:32px;
  height:1px;
  background:linear-gradient(90deg, transparent, hsla(38,100%,70%,.5), transparent);
  pointer-events:none;
}
.cmd-bar-identity{grid-area:identity;display:grid;gap:6px}
.cmd-bar-eyebrow{
  display:inline-block;
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.cmd-bar-name{
  font:700 clamp(1.6rem,2.6vw,2.1rem)/1.1 var(--font-display);
  letter-spacing:-.022em;
  color:var(--text);
  margin:0;
}
.cmd-bar-email{
  color:var(--text-2);
  font-size:14px;
  line-height:1.5;
  margin:0;
}
.cmd-bar-actions{
  grid-area:actions;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.cmd-bar-warning{
  grid-area:warning;
  margin:0;
}
.cmd-bar-warning.hidden{display:none}

.cmd-bar-kpis{
  grid-area:kpis;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:0;
  border-top:1px dashed var(--line);
  margin:0 -32px -28px;
  padding:18px 32px 24px;
  background:linear-gradient(180deg, transparent, hsla(222,18%,10%,.16));
}
html[data-theme="light"] .cmd-bar-kpis{background:linear-gradient(180deg, transparent, hsla(36,30%,90%,.4))}
.cmd-bar-kpi{
  padding:6px 20px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0;
  display:grid;
  gap:8px;
  position:relative;
}
.cmd-bar-kpi + .cmd-bar-kpi{border-left:1px solid var(--line) !important}
.cmd-bar-kpi:first-child{padding-left:0}
.cmd-bar-kpi:last-child{padding-right:0}
.cmd-bar-kpi-label{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.cmd-bar-kpi-value{
  font:700 clamp(1.6rem,2.4vw,2rem)/1 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
}
.cmd-bar-kpi-primary .cmd-bar-kpi-value{
  font-size:clamp(2rem,3vw,2.6rem);
  color:var(--accent);
  text-shadow:0 0 24px hsla(38,92%,58%,.18);
}
.cmd-bar-kpi-aux{
  font-size:12px;
  color:var(--text-3);
  line-height:1.5;
}
.cmd-bar-kpi-aux:empty{display:none}

@media (max-width:880px){
  .cmd-bar{
    grid-template-columns:1fr;
    grid-template-areas:
      "identity"
      "actions"
      "warning"
      "kpis";
    padding:22px 22px;
  }
  .cmd-bar-actions{justify-content:flex-start}
  .cmd-bar-kpis{
    grid-template-columns:1fr 1fr;
    margin:0 -22px -22px;
    padding:18px 22px 22px;
  }
  .cmd-bar-kpi + .cmd-bar-kpi{border-left:none !important}
  .cmd-bar-kpi:nth-child(odd){border-right:1px solid var(--line) !important}
  .cmd-bar-kpi:nth-child(n+3){border-top:1px solid var(--line) !important;padding-top:18px;margin-top:6px}
  .cmd-bar-kpi{padding:6px 16px}
  .cmd-bar-kpi:first-child,.cmd-bar-kpi:nth-child(3){padding-left:0}
  .cmd-bar-kpi:nth-child(2),.cmd-bar-kpi:nth-child(4){padding-right:0}
}
@media (max-width:520px){
  .cmd-bar-kpis{grid-template-columns:1fr}
  .cmd-bar-kpi:nth-child(odd){border-right:none !important}
  .cmd-bar-kpi + .cmd-bar-kpi{border-top:1px solid var(--line) !important;padding-top:16px;margin-top:6px}
  .cmd-bar-kpi{padding:6px 0}
}

/* ---------- Primary operation panel (centerpiece) ---------- */
.primary-op-panel{
  position:relative;
  padding:28px 32px 30px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.7), hsla(222,18%,12%,.82)),
    radial-gradient(800px 360px at 0% -10%, hsla(38,92%,58%,.08), transparent 70%);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  display:grid;
  gap:18px;
}
html[data-theme="light"] .primary-op-panel{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94)),
    radial-gradient(800px 360px at 0% -10%, hsla(28,78%,42%,.08), transparent 70%);
}
.primary-op-panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:linear-gradient(180deg, transparent, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%, transparent);
  opacity:.85;
  pointer-events:none;
}
.primary-op-head{display:grid;gap:6px}
.primary-op-eyebrow{
  display:inline-block;
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.primary-op-title{
  font:700 clamp(1.4rem,2.2vw,1.8rem)/1.15 var(--font-display);
  letter-spacing:-.018em;
  color:var(--text);
  margin:0;
}
.primary-op-sub{
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.65;
  max-width:60ch;
  margin:0;
}
/* If JS-rendered cards inside #primaryOperationCardSlot already
   carry their own surface, make them sit flush inside the panel
   without doubling the border. */
.primary-op-panel #primaryOperationCardSlot:empty{display:none}
.primary-op-panel #draftsPendingSlot:empty,
.primary-op-panel #readyOperationsSlot:empty{display:none}
/* Inline create-operation starter form: matches the panel's calm
   surface and removes the legacy card-on-card double-bordering. */
.primary-op-panel .primary-op-create{
  display:grid;
  gap:14px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  margin-top:4px;
}
.primary-op-panel .primary-op-create h3{
  font:700 18px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
}
.primary-op-panel .primary-op-create .card-copy{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.62;
  max-width:62ch;
}
.primary-op-panel .primary-op-create .field{display:grid;gap:6px}
.primary-op-panel .primary-op-create .field label{
  font:700 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}
.primary-op-panel .primary-op-create .field input{
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
  color:var(--text);
  font:500 14.5px/1.4 var(--font-body);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .primary-op-panel .primary-op-create .field input{
  background:hsla(42,36%,94%,.6);
}
.primary-op-panel .primary-op-create .field input:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.primary-op-panel .primary-op-create .workspace-note-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:680px){
  .primary-op-panel{padding:22px 22px 24px}
  .primary-op-panel .primary-op-create .workspace-note-grid{grid-template-columns:1fr}
}

/* ---------- Workspace toolbar (4 refined tools) ---------- */
.workspace-toolbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.workspace-tool{
  position:relative;
  text-align:left;
  padding:18px 18px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface);
  cursor:pointer;
  display:grid;
  gap:6px;
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.workspace-tool:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft-2);
  box-shadow:var(--shadow-soft), 0 0 24px -16px var(--accent-glow);
}
.workspace-tool:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.workspace-tool-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  margin-bottom:6px;
}
.workspace-tool-icon svg{width:20px;height:20px}
.workspace-tool .cockpit-card-eyebrow{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.workspace-tool .cockpit-card-title{
  font:700 14.5px/1.3 var(--font-display);
  letter-spacing:-.01em;
  color:var(--text);
}
.workspace-tool .cockpit-card-meta{
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.5;
  margin-top:2px;
}
.workspace-tool .cockpit-card-cta{
  position:absolute;
  top:18px;
  right:16px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  transition:color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.workspace-tool .cockpit-card-cta::after{
  content:"";
  width:7px;
  height:7px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.workspace-tool:hover .cockpit-card-cta{color:var(--accent);transform:translateX(2px)}
@media (max-width:980px){
  .workspace-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .workspace-toolbar{grid-template-columns:1fr}
}

/* ---------- Quieter state strip ---------- */
.workspace-board .cockpit-state-row{
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}
.workspace-board .cockpit-state-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.workspace-board .cockpit-state-card{
  padding:18px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.36);
  display:grid;
  gap:4px;
}
html[data-theme="light"] .workspace-board .cockpit-state-card{background:hsla(42,36%,94%,.42)}
.workspace-board .cockpit-state-card .eyebrow{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:4px;
}
.workspace-board .cockpit-state-card h3{
  font:700 16px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
}
.workspace-board .cockpit-state-card .card-copy{
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
}
.workspace-board .cockpit-state-card .mini{
  color:var(--text-3);
  font-size:12px;
  line-height:1.5;
  margin-top:6px;
}
@media (max-width:760px){
  .workspace-board .cockpit-state-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .cmd-bar::before,
  .workspace-tool,
  .workspace-tool:hover{
    transition:none;
  }
}

/* ---------- Unauth hero atmosphere ---------- */
/* Adds a quiet accent orb behind the hero text and bumps the title
   scale so the unauth landing feels closer to the homepage hero in
   tone. Only affects the .is-auth shell; the dashboard shell is
   collapsed entirely by the rule above. */
body[data-page="account"] .workspace-hero{position:relative;isolation:isolate}
body[data-page="account"] .workspace-hero-shell.is-auth{position:relative;z-index:1}
body[data-page="account"] .workspace-hero-shell.is-auth::before{
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:780px;
  height:520px;
  background:
    radial-gradient(circle at 50% 50%,
      hsla(38,92%,58%,.12) 0%,
      hsla(38,92%,58%,.04) 36%,
      transparent 72%);
  filter:blur(14px);
  pointer-events:none;
  z-index:-1;
  animation:acctOrbDrift 16s ease-in-out infinite alternate;
}
html[data-theme="light"] body[data-page="account"] .workspace-hero-shell.is-auth::before{
  background:
    radial-gradient(circle at 50% 50%,
      hsla(28,78%,42%,.18) 0%,
      hsla(28,78%,42%,.06) 36%,
      transparent 72%);
}
@keyframes acctOrbDrift{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  100%{transform:translateX(-50%) translateY(14px) scale(1.04)}
}

body[data-page="account"] .account-title{
  font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.04;
  text-wrap:balance;
}
body[data-page="account"] .account-sub{
  max-width:560px;
  margin:0 auto;
  color:var(--text-2);
  font-size:16.5px;
  line-height:1.65;
}

@media (prefers-reduced-motion: reduce){
  body[data-page="account"] .workspace-hero-shell.is-auth::before{animation:none}
}

/* =====================================================================
   Mission Control (Account v3 rebuild).
   Premium operation workspace: identity strip + capacity meter +
   mission stage with a journey indicator + slim tools rail.
   All v2 .cmd-bar / .primary-op-panel / .workspace-toolbar / .workspace-board
   rules above remain in place as fallback for older render paths.
   ===================================================================== */

.mission-control{display:grid;gap:24px}

/* Hide v2's legacy cockpit-state-row visually while keeping the DOM
   so account.js writes to #accountState / #trialState / #automation*
   remain safe. The status text is mirrored into the identity strip
   via refreshMissionStatusPill. */
.sr-state-row{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* ---------- 1. Identity strip ---------- */
.mc-identity{
  position:relative;
  padding:24px 28px 22px;
  border-radius:var(--radius-xl);
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.86), hsla(222,18%,12%,.94)),
    radial-gradient(900px 240px at 100% -10%, hsla(38,92%,58%,.10), transparent 70%);
  box-shadow:var(--shadow), 0 0 60px -28px var(--accent-glow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
html[data-theme="light"] .mc-identity{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.94), hsla(38,36%,94%,.98)),
    radial-gradient(900px 240px at 100% -10%, hsla(28,78%,42%,.10), transparent 70%);
}
.mc-identity::before{
  content:"";
  position:absolute;
  top:0;
  left:28px;
  right:28px;
  height:1px;
  background:linear-gradient(90deg, transparent, hsla(38,100%,70%,.5), transparent);
  pointer-events:none;
}
.mc-identity-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:18px 24px;
  align-items:center;
}
.mc-identity-text{display:grid;gap:4px;min-width:0}
.mc-eyebrow{
  display:inline-block;
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.mc-identity-name{
  font:700 clamp(1.4rem,2.2vw,1.85rem)/1.1 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mc-identity-email{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.4;
  margin:0;
}
.mc-identity-status{display:flex}
.mc-status-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px 9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.5);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .mc-status-pill{background:hsla(42,36%,94%,.6)}
.mc-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px hsla(155,60%,54%,.18);
  animation:mcStatusPulse 2.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes mcStatusPulse{
  0%,100%{box-shadow:0 0 0 4px hsla(155,60%,54%,.16)}
  50%{box-shadow:0 0 0 7px hsla(155,60%,54%,.05)}
}
.mc-status-text{display:grid;line-height:1.2}
.mc-status-label{
  font:700 9.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mc-status-value{
  font:700 12.5px/1.1 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
  margin-top:3px;
}
[data-mc-status-tone="warn"]{border-color:hsla(38,92%,58%,.5);background:hsla(38,92%,58%,.06)}
[data-mc-status-tone="warn"] .mc-status-dot{background:var(--accent);box-shadow:0 0 0 4px hsla(38,92%,58%,.22)}
[data-mc-status-tone="alert"]{border-color:hsla(0,72%,62%,.5);background:hsla(0,72%,62%,.06)}
[data-mc-status-tone="alert"] .mc-status-dot{background:var(--red);box-shadow:0 0 0 4px hsla(0,72%,62%,.22)}

.mc-identity-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.mc-warning{
  margin:18px 0 0;
}
.mc-warning.hidden{display:none}

@media (max-width:980px){
  .mc-identity-line{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "text  status"
      "actions actions";
  }
  .mc-identity-text{grid-area:text}
  .mc-identity-status{grid-area:status;justify-content:flex-end}
  .mc-identity-actions{grid-area:actions;justify-content:flex-start;border-top:1px dashed var(--line);padding-top:14px;margin-top:4px}
}
@media (max-width:560px){
  .mc-identity{padding:20px 20px 18px}
  .mc-identity-line{grid-template-columns:1fr;grid-template-areas:"text" "status" "actions"}
  .mc-identity-status{justify-content:flex-start}
  .mc-status-pill{padding:8px 12px 8px 10px}
}

/* ---------- 2. Capacity meter ---------- */
.mc-capacity{
  position:relative;
  padding:22px 28px 22px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid;
  gap:14px;
  overflow:hidden;
}
.mc-capacity-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.mc-capacity-headline{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}
.mc-capacity-eyebrow{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mc-capacity-value{
  font:700 clamp(2rem,3.4vw,2.8rem)/1 var(--font-display);
  letter-spacing:-.024em;
  color:var(--accent);
  text-shadow:0 0 22px hsla(38,92%,58%,.18);
}
.mc-capacity-suffix{
  color:var(--text-2);
  font-size:14px;
  line-height:1.4;
}
.mc-capacity-aux{
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.55;
  text-align:right;
  max-width:48ch;
}
.mc-capacity-aux:empty{display:none}

.mc-capacity-meter{
  position:relative;
  height:10px;
  border-radius:999px;
  background:hsla(222,18%,14%,.7);
  overflow:hidden;
  display:flex;
  --mc-fill-trial:0%;
  --mc-fill-paid:0%;
  --mc-fill-reserved:0%;
  --mc-fill-available:0%;
}
html[data-theme="light"] .mc-capacity-meter{background:hsla(36,30%,86%,.55)}
.mc-capacity-fill{
  height:100%;
  display:block;
  transition:width var(--t-slow) var(--ease-out);
}
.mc-capacity-fill-trial{
  width:var(--mc-fill-trial);
  background:linear-gradient(90deg, hsla(38,92%,58%,.85), hsla(38,100%,70%,.95));
}
.mc-capacity-fill-paid{
  width:var(--mc-fill-paid);
  background:linear-gradient(90deg, hsla(210,72%,72%,.85), hsla(210,72%,82%,.95));
}
.mc-capacity-fill-reserved{
  width:var(--mc-fill-reserved);
  background:repeating-linear-gradient(
    -45deg,
    hsla(215,12%,40%,.6) 0 6px,
    hsla(215,12%,30%,.4) 6px 12px
  );
}
.mc-capacity-fill-glow{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:var(--mc-fill-available);
  background:linear-gradient(90deg, transparent, hsla(38,100%,70%,.32));
  filter:blur(3px);
  pointer-events:none;
}

.mc-capacity[data-mc-capacity-state="empty"] .mc-capacity-meter{opacity:.4}

.mc-capacity-legend{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding-top:4px;
}
.mc-capacity-leg{
  position:relative;
  padding:10px 14px;
  border-radius:14px;
  background:hsla(222,18%,12%,.42);
  border:1px solid var(--line);
  display:grid;
  gap:2px;
  min-width:0;
}
html[data-theme="light"] .mc-capacity-leg{background:hsla(42,36%,94%,.5)}
.mc-capacity-leg-mark{
  position:absolute;
  top:12px;
  left:14px;
  width:10px;
  height:10px;
  border-radius:50%;
}
.mc-capacity-leg-trial .mc-capacity-leg-mark{background:linear-gradient(180deg, var(--accent-2), var(--accent))}
.mc-capacity-leg-paid .mc-capacity-leg-mark{background:linear-gradient(180deg, hsla(210,72%,82%,.95), hsla(210,72%,62%,.95))}
.mc-capacity-leg-reserved .mc-capacity-leg-mark{
  background:repeating-linear-gradient(
    -45deg,
    hsla(215,12%,55%,.9) 0 3px,
    hsla(215,12%,40%,.7) 3px 6px
  );
}
.mc-capacity-leg-label{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  padding-left:18px;
}
.mc-capacity-leg-value{
  font:700 17px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  padding-left:18px;
}
.mc-capacity-leg-aux{
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.4;
  padding-left:18px;
}
.mc-capacity-leg-aux:empty{display:none}

@media (max-width:760px){
  .mc-capacity{padding:18px 20px}
  .mc-capacity-legend{grid-template-columns:1fr}
  .mc-capacity-aux{text-align:left}
}

/* ---------- 3. Mission stage ---------- */
.mc-stage{
  position:relative;
  padding:28px 32px 30px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.7), hsla(222,18%,12%,.84)),
    radial-gradient(800px 360px at 0% -10%, hsla(38,92%,58%,.10), transparent 70%);
  box-shadow:var(--shadow-soft), 0 0 50px -28px var(--accent-glow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  display:grid;
  gap:20px;
}
html[data-theme="light"] .mc-stage{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94)),
    radial-gradient(800px 360px at 0% -10%, hsla(28,78%,42%,.10), transparent 70%);
}
.mc-stage::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:linear-gradient(180deg, transparent, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%, transparent);
  opacity:.85;
  pointer-events:none;
}
.mc-stage-head{display:grid;gap:6px}
.mc-stage-eyebrow{
  display:inline-block;
  font:700 11px/1 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.mc-stage-title{
  font:700 clamp(1.6rem,2.4vw,1.95rem)/1.1 var(--font-display);
  letter-spacing:-.022em;
  color:var(--text);
  margin:0;
}
.mc-stage-sub{
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.65;
  max-width:64ch;
  margin:0;
}

/* Journey indicator: 5 stages laid out as a stepper. The first stage
   carries .is-active by default; account.js can flip [data-mc-stage]
   active states later if it wants to drive the indicator further. */
.mc-journey{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  position:relative;
}
.mc-journey::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:18px;
  height:2px;
  background:linear-gradient(90deg, var(--accent-soft-2), var(--line), var(--line));
  z-index:0;
  pointer-events:none;
}
.mc-journey-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center;
  padding:0 6px;
}
.mc-journey-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:hsla(222,22%,10%,.92);
  color:var(--text-3);
  font:700 13px/1 var(--font-display);
  letter-spacing:-.01em;
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
html[data-theme="light"] .mc-journey-dot{background:hsla(42,48%,98%,.96)}
.mc-journey-step.is-active .mc-journey-dot{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color:var(--accent-2);
  color:var(--accent-ink);
  transform:scale(1.08);
  box-shadow:0 0 0 4px hsla(38,92%,58%,.16);
}
.mc-journey-step.is-done .mc-journey-dot{
  border-color:var(--accent-soft-2);
  color:var(--accent);
  background:var(--accent-soft);
}
.mc-journey-name{
  font:700 11.5px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
}
.mc-journey-step.is-active .mc-journey-name{color:var(--text)}
.mc-journey-meta{
  font-size:11px;
  color:var(--text-3);
  line-height:1.4;
  max-width:14ch;
}
@media (max-width:780px){
  .mc-journey{
    grid-template-columns:repeat(5,auto);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
  }
  .mc-journey::before{display:none}
  .mc-journey-step{
    scroll-snap-align:start;
    min-width:88px;
  }
}

/* Inline mission launcher (Step 1 starter form) */
.mc-launch{
  display:grid;
  gap:16px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  margin-top:2px;
}
.mc-launch-head{display:grid;gap:4px}
.mc-launch-step{
  font:700 11px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.mc-launch-title{
  font:700 19px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  margin:0;
}
.mc-launch-sub{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.62;
  max-width:64ch;
  margin:0;
}
.mc-launch .field{display:grid;gap:6px}
.mc-launch .field label{
  font:700 11px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mc-launch .field input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
  color:var(--text);
  font:500 14.5px/1.4 var(--font-body);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .mc-launch .field input{background:hsla(42,36%,94%,.6)}
.mc-launch .field input:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.mc-launch-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.mc-launch-actions{margin-top:4px}
@media (max-width:680px){
  .mc-stage{padding:22px 22px 24px}
  .mc-launch-grid{grid-template-columns:1fr}
}

/* ---------- 4. Tools rail ---------- */
.mc-tools{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.mc-tool{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.48);
  cursor:pointer;
  text-align:left;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .mc-tool{background:hsla(42,36%,94%,.55)}
.mc-tool:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  box-shadow:0 0 20px -14px var(--accent-glow);
}
html[data-theme="light"] .mc-tool:hover{background:hsla(42,36%,94%,.78)}
.mc-tool:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.mc-tool-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  flex-shrink:0;
}
.mc-tool-icon svg{width:18px;height:18px}
.mc-tool-body{display:grid;gap:2px;min-width:0}
.mc-tool-eyebrow{
  font:700 10px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mc-tool-title{
  font:700 13.5px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.mc-tool-meta{
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mc-tool-chevron{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  transition:color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.mc-tool-chevron::after{
  content:"";
  width:7px;
  height:7px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.mc-tool:hover .mc-tool-chevron{color:var(--accent);transform:translateX(2px)}

@media (max-width:1024px){
  .mc-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .mc-tools{grid-template-columns:1fr}
  .mc-tool{padding:12px 14px}
}

@media (prefers-reduced-motion: reduce){
  .mc-status-dot{animation:none}
  .mc-capacity-fill,.mc-journey-dot,.mc-tool{transition:none}
}

/* =====================================================================
   GateFlow Launchpad (Account v4).
   Two visible regions on desktop:
     - compact identity strip on top
     - 2-column body: Launchpad panel (centerpiece) + slim utility dock
   Stacks vertically on mobile (Launchpad first, dock below).
   All v3 .mc-* rules above are retained for off-page surfaces that
   still reference them (e.g. the mc-capacity-meter classes inside the
   dock); the .launchpad scope below overrides v3 layout.
   ===================================================================== */

.launchpad{display:grid;gap:18px}

/* ---------- A. Compact identity strip ---------- */
.lp-identity{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.46);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .lp-identity{background:hsla(42,36%,94%,.6)}

.lp-identity-text{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.lp-identity-product{
  font:700 12px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
.lp-identity-meta{display:flex;align-items:baseline;gap:8px;min-width:0}
.lp-identity-divider{color:var(--text-3);font-weight:300}
.lp-identity-name{
  font:700 15px/1.1 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:32ch;
}
.lp-identity-email{
  color:var(--text-2);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:28ch;
}
.lp-identity-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,18%,12%,.46);
  color:var(--text-2);
  font:700 11.5px/1 var(--font-display);
  letter-spacing:.04em;
  white-space:nowrap;
}
html[data-theme="light"] .lp-status{background:hsla(36,30%,90%,.6)}
.lp-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px hsla(155,60%,54%,.16);
  animation:lpStatusPulse 2.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes lpStatusPulse{
  0%,100%{box-shadow:0 0 0 4px hsla(155,60%,54%,.16)}
  50%{box-shadow:0 0 0 6px hsla(155,60%,54%,.04)}
}
[data-mc-status-tone="warn"] .lp-status-dot{background:var(--accent);box-shadow:0 0 0 4px hsla(38,92%,58%,.22)}
[data-mc-status-tone="alert"] .lp-status-dot{background:var(--red);box-shadow:0 0 0 4px hsla(0,72%,62%,.22)}
.lp-identity-btn{min-height:38px;padding:8px 14px;font-size:13px}

.lp-warning{margin:0}
.lp-warning.hidden{display:none}

@media (max-width:880px){
  .lp-identity{flex-wrap:wrap;padding:14px 18px}
  .lp-identity-right{width:100%;justify-content:flex-start;border-top:1px dashed var(--line);padding-top:10px}
  .lp-identity-text{width:100%;min-width:0;flex-wrap:wrap;gap:8px}
  /* Allow the meta line (name + email) to wrap inside the identity strip
     on narrow viewports so the strip never forces the page wider. */
  .lp-identity-meta{flex-wrap:wrap;min-width:0;gap:6px}
  .lp-identity-name{max-width:none}
  .lp-identity-email{max-width:none;overflow:visible;white-space:normal;word-break:break-all}
}

/* ---------- B. Two-column body ---------- */
.lp-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:18px;
  align-items:start;
  min-width:0;
}
.lp-body > *{min-width:0}
@media (max-width:1100px){
  .lp-body{grid-template-columns:minmax(0,1fr)}
}

/* ---------- B1. Launchpad panel (centerpiece) ---------- */
.lp-panel{
  position:relative;
  padding:32px 36px 30px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, hsla(222,20%,10%,.78), hsla(222,18%,12%,.88)),
    radial-gradient(900px 360px at 0% -10%, hsla(38,92%,58%,.12), transparent 70%);
  box-shadow:var(--shadow-soft), 0 0 50px -28px var(--accent-glow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  display:grid;
  gap:20px;
}
html[data-theme="light"] .lp-panel{
  background:
    linear-gradient(180deg, hsla(42,48%,98%,.86), hsla(38,36%,94%,.94)),
    radial-gradient(900px 360px at 0% -10%, hsla(28,78%,42%,.12), transparent 70%);
}
.lp-panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:linear-gradient(180deg, transparent, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%, transparent);
  opacity:.85;
  pointer-events:none;
}
.lp-panel-head{display:grid;gap:8px}
.lp-panel-title{
  font:700 clamp(1.8rem,2.6vw,2.2rem)/1.08 var(--font-display);
  letter-spacing:-.026em;
  color:var(--text);
  margin:0;
  text-wrap:balance;
}
.lp-panel-sub{
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.65;
  max-width:62ch;
  margin:0;
}

/* Inline event-basics launcher form. No "Stage 1 of 5" prefix because
   the rail above is now the canonical progress indicator. */
.lp-launch{
  display:grid;
  gap:14px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  margin-top:4px;
}
.lp-launch-head{display:grid;gap:4px}
.lp-launch-title{
  font:700 18.5px/1.2 var(--font-display);
  letter-spacing:-.012em;
  color:var(--text);
  margin:0;
}
.lp-launch-sub{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
  max-width:62ch;
  margin:0;
}
.lp-launch .field{display:grid;gap:6px}
.lp-launch .field label{
  font:700 11px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}
.lp-launch .field input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
  color:var(--text);
  font:500 14.5px/1.4 var(--font-body);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .lp-launch .field input{background:hsla(42,36%,94%,.6)}
.lp-launch .field input:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lp-launch-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.lp-launch-actions{margin-top:6px}
@media (max-width:680px){
  .lp-panel{padding:24px 22px 26px}
  .lp-launch-grid{grid-template-columns:1fr}
}

/* ---------- B2. Right utility dock ---------- */
/* The dock is tightened so it visually balances against the empty-state
   Launchpad panel (~653 px tall). Section padding, tool padding, dock
   gap, and the admissions legend density are all trimmed; the section
   headings are dropped because the content (icon-led tools, big amber
   capacity number) explains itself. */
.lp-dock{
  display:grid;
  gap:10px;
  align-content:start;
}
.lp-dock-section{
  padding:16px 18px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid;
  gap:10px;
}
html[data-theme="light"] .lp-dock-section{background:hsla(42,36%,94%,.55)}
/* Heading visually hidden but kept in DOM for accessibility. */
.lp-dock-heading{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* Tools (4 compact stacked buttons) */
.lp-dock-tools{gap:6px;padding-bottom:14px}
.lp-tool{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.36);
  cursor:pointer;
  text-align:left;
  min-height:74px; /* Override legacy .cockpit-card min-height:148px with a calmer target */
  transition:transform var(--t-fast) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .lp-tool{background:hsla(42,36%,94%,.6)}
.lp-tool:hover{
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  transform:translateX(2px);
  box-shadow:0 0 16px -14px var(--accent-glow);
}
html[data-theme="light"] .lp-tool:hover{background:hsla(42,36%,94%,.85)}
.lp-tool:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lp-tool-icon{
  display:inline-flex;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  flex-shrink:0;
}
.lp-tool-icon svg{width:13px;height:13px}
.lp-tool-body{display:grid;gap:1px;min-width:0}
.lp-tool-title{
  font:700 13px/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.lp-tool-meta{
  font-size:11px;
  color:var(--text-3);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-tool-eyebrow{
  font:700 9.5px/1 var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  white-space:nowrap;
  padding-right:6px;
}
.lp-tool-chevron{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  transition:color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.lp-tool-chevron::after{
  content:"";
  width:6px;
  height:6px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.lp-tool:hover .lp-tool-chevron{color:var(--accent);transform:translateX(2px)}

/* Admission widget */
.lp-dock-capacity{padding-bottom:14px;gap:8px}
.lp-cap-headline{display:flex;align-items:baseline;gap:8px}
.lp-cap-value{
  font:700 clamp(1.6rem,2.2vw,1.95rem)/1 var(--font-display);
  letter-spacing:-.02em;
  color:var(--accent);
  text-shadow:0 0 22px hsla(38,92%,58%,.18);
}
.lp-cap-suffix{
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.3;
}
.lp-cap-aux{
  color:var(--text-3);
  font-size:11px;
  line-height:1.4;
  margin-top:-4px;
}
.lp-cap-aux:empty{display:none}
.lp-cap-meter{
  position:relative;
  height:7px;
  border-radius:999px;
  background:hsla(222,18%,14%,.7);
  overflow:hidden;
  display:flex;
  margin-top:2px;
  --mc-fill-trial:0%;
  --mc-fill-paid:0%;
  --mc-fill-reserved:0%;
  --mc-fill-available:0%;
}
html[data-theme="light"] .lp-cap-meter{background:hsla(36,30%,86%,.55)}
.lp-cap-legend{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}
.lp-cap-legend li{
  display:grid;
  grid-template-columns:7px 1fr auto;
  gap:8px;
  align-items:center;
}
.lp-cap-mark{
  width:7px;
  height:7px;
  border-radius:50%;
}
.lp-cap-mark-trial{background:linear-gradient(180deg, var(--accent-2), var(--accent))}
.lp-cap-mark-paid{background:linear-gradient(180deg, hsla(210,72%,82%,.95), hsla(210,72%,62%,.95))}
.lp-cap-mark-reserved{
  background:repeating-linear-gradient(
    -45deg,
    hsla(215,12%,55%,.9) 0 2px,
    hsla(215,12%,40%,.7) 2px 4px
  );
}
.lp-cap-leg-label{
  font-size:11.5px;
  color:var(--text-2);
  line-height:1.25;
}
.lp-cap-leg-value{
  font:700 12.5px/1 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
/* The lp-cap-foot slots hold paidCreditsAux + reservedCreditsAux mirror
   text. We keep them as inline elements that grow only when populated. */
.lp-cap-foot{
  display:inline;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4;
}
.lp-cap-foot:empty{display:none}
.lp-cap-foot:not(:empty) + .lp-cap-foot:not(:empty)::before{content:" · "}

@media (max-width:1100px){
  .lp-dock{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .lp-dock-section{grid-column:span 1}
}
@media (max-width:680px){
  .lp-dock{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .lp-status-dot{animation:none}
  .lp-tool,.lp-cap-meter .mc-capacity-fill{transition:none}
}

/* =====================================================================
   Launchpad v6: stable canvas + dock precision.
   Overrides the v5 layout so the operation builder sits inside a true
   canvas with explicit header / rail / body / footer zones, the dock
   tool rows align on a precise 3-column grid (icon | body | chevron),
   and the identity status pill only shows the dot when no actionable
   state text is present.
   ===================================================================== */

/* Stable canvas: explicit grid with min-height so the panel doesn't
   collapse between empty / draft / ready states. Inner content swaps
   per stage; the outer frame stays steady. */
.lp-canvas{
  display:grid;
  grid-template-rows:1fr;
  min-height:520px;
  padding:30px 36px 26px;
  gap:0;
}
.lp-canvas::before{
  /* Override the v5 left-edge gradient bar so it stops at the body */
  bottom:0;
}
.lp-canvas-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-self:start;
  min-height:0;
}
.lp-canvas-body > *:empty{display:none}

/* Inline launcher refresh: stage micro-label + persistent footer row */
.lp-launch.lp-launch{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:18px;
  margin-top:0;
  min-height:380px;
}
.lp-launch-stage{
  display:inline-block;
  align-self:start;
  padding:5px 11px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.lp-launch-body{display:grid;gap:16px;align-content:start}
.lp-launch-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:18px;
  border-top:1px dashed var(--line);
  margin-top:auto;
}
.lp-launch-hint{
  color:var(--text-3);
  font-size:13px;
  line-height:1.5;
}
.lp-launch-actions .btn{min-width:220px;justify-content:center}
@media (max-width:680px){
  .lp-canvas{padding:22px 20px 22px;min-height:0}
  .lp-launch.lp-launch{min-height:0}
  .lp-launch-actions{flex-direction:column;align-items:stretch;gap:10px}
  .lp-launch-hint{order:2;text-align:center}
  .lp-launch-actions .btn{min-width:0;width:100%;order:1}
}

/* Identity status pill: dot-only when no text is present. The dot
   stays as a calm presence indicator; explicit status text only
   appears when the workspace state is actionable. */
.lp-status:has(.lp-status-text:empty){padding:7px 9px;gap:0}
.lp-status .lp-status-text:empty{display:none}

/* Tool row refinement: 3-column grid (icon, body, chevron) now that
   the secondary eyebrow ("Manage / Top up / Devices / History") is
   gone. Stable vertical rhythm across rows. */
.lp-tool{
  grid-template-columns:auto 1fr auto !important;
}
.lp-tool-eyebrow{display:none !important}

/* Reduced-motion safety for the canvas footer divider transitions */
@media (prefers-reduced-motion: reduce){
  .lp-launch-actions{transition:none}
}

/* =====================================================================
   Launchpad v7: tame the JS-rendered step cards so they sit cleanly
   inside the Launchpad canvas instead of looking like legacy cards
   stuffed inside a new wrapper.
   ===================================================================== */

/* The per-step section header (operation basics, access types, etc.)
   no longer carries "Step N of 5 ·" prefix. Style it as a calm
   sub-section header inside the canvas body, not as a card. */
.lp-canvas-body header h4{
  font:700 16px/1.25 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
  margin:0;
}
.lp-canvas-body header .mini{
  display:block;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5;
  margin-top:4px;
}

/* Empty-state intro inside the canvas body: small, calm, supportive. */
.lp-canvas-body .primary-op-intro,
.lp-canvas-body .lp-intro-calm{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
.lp-canvas-body .lp-intro-copy{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.65;
  margin:0;
  max-width:62ch;
}

/* The wizard-card surfaces account.js renders for each step often
   come with their own border + padding. Inside the Launchpad canvas
   the canvas itself is the surface, so neutralize legacy nested-card
   chrome for the step body. */
.lp-canvas-body .cockpit-wizard-step,
.lp-canvas-body .wizard-card,
.lp-canvas-body .primary-op-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  backdrop-filter:none !important;
}

/* =====================================================================
   Launchpad Studio v8: full-width canvas + horizontal command strip
   Replaces the v6/v7 right-side utility dock with a precise horizontal
   command strip sitting between the identity bar and the canvas. The
   .lp-body is now single-column so the Launchpad canvas runs
   full-width and reads as the page's centerpiece.
   ===================================================================== */

/* Full-width Launchpad body */
.lp-body{
  display:block !important;
  grid-template-columns:none !important;
}

/* Command strip: 4 pill buttons + admissions balance chip on the right.
   Precise alignment: each pill is a 3-column grid (icon | text | chevron-free),
   and the strip itself is a flex row that wraps at narrow widths. */
.lp-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
  margin-bottom:6px;
}
.lp-pill{
  flex:1 1 0;
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding:11px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.42);
  cursor:pointer;
  text-align:left;
  min-height:62px;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
html[data-theme="light"] .lp-pill{background:hsla(42,36%,94%,.6)}
.lp-pill:hover{
  border-color:var(--accent-soft-2);
  background:hsla(222,20%,10%,.62);
  transform:translateY(-1px);
  box-shadow:0 0 16px -14px var(--accent-glow);
}
html[data-theme="light"] .lp-pill:hover{background:hsla(42,36%,94%,.85)}
.lp-pill:focus-visible{
  outline:none;
  border-color:var(--accent-soft-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lp-pill-icon{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-2);
  color:var(--accent);
  flex-shrink:0;
}
.lp-pill-icon svg{width:14px;height:14px}
.lp-pill-text{display:grid;gap:2px;min-width:0}
.lp-pill-title{
  font:700 13px/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:var(--text);
}
.lp-pill-meta{
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Admissions balance chip — wider than a pill, slim meter underneath the value */
.lp-balance{
  flex:1.4 1 0;
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  align-items:center;
  padding:11px 18px 12px;
  border-radius:14px;
  border:1px solid var(--accent-soft-2);
  background:
    linear-gradient(180deg, hsla(38,92%,58%,.06), transparent 70%),
    hsla(222,20%,10%,.42);
  cursor:pointer;
  text-align:left;
  min-height:62px;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
html[data-theme="light"] .lp-balance{
  background:
    linear-gradient(180deg, hsla(28,78%,42%,.08), transparent 70%),
    hsla(42,36%,94%,.6);
}
.lp-balance:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}
.lp-balance:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lp-balance-text{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lp-balance-label{
  font:700 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.lp-balance-value{
  font:700 clamp(1.3rem,2vw,1.55rem)/1 var(--font-display);
  letter-spacing:-.012em;
  color:var(--accent);
}
.lp-balance-meter{
  position:relative;
  height:5px;
  border-radius:999px;
  background:hsla(222,18%,14%,.7);
  overflow:hidden;
  display:flex;
  --mc-fill-trial:0%;
  --mc-fill-paid:0%;
  --mc-fill-reserved:0%;
  --mc-fill-available:0%;
}
html[data-theme="light"] .lp-balance-meter{background:hsla(36,30%,86%,.55)}

@media (max-width:980px){
  .lp-strip{flex-wrap:wrap}
  .lp-pill{flex:1 1 calc(50% - 5px);min-height:54px}
  .lp-balance{flex:1 1 100%;min-height:54px}
}
@media (max-width:520px){
  .lp-pill{flex:1 1 100%}
}

/* The legacy .lp-dock is now off-screen. Hide it cleanly so any
   render path that still queries it shows nothing visible. */
.lp-dock{display:none !important}

@media (prefers-reduced-motion: reduce){
  .lp-pill,.lp-balance{transition:none}
}

/* Admissions step: consolidated Advanced QR tools details */
.tickets-advanced-disclosure{
  margin-top:8px;
}
.tickets-advanced-body{
  display:grid;
  gap:12px;
  padding-top:10px;
}
.tickets-advanced-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.32);
}
html[data-theme="light"] .tickets-advanced-row{background:hsla(42,36%,94%,.5)}
.tickets-advanced-row p.mini{margin-top:2px}
@media (max-width:680px){
  .tickets-advanced-row{grid-template-columns:1fr;align-items:stretch}
  .tickets-advanced-row .account-toolbar,
  .tickets-advanced-row .btn{justify-self:start}
}

/* ===========================================================
   Operation Studio Deck v13
   Compact Access deck + Admissions exports + Gate Device
   ready card + Review checklist.
   =========================================================== */

/* Access stage: compact deck with header row + horizontal rows */
.lp-deck{
  border:1px solid var(--line);
  border-radius:14px;
  background:hsla(222,20%,9%,.35);
  padding:12px;
  display:grid;
  gap:12px;
}
html[data-theme="light"] .lp-deck{background:hsla(42,36%,94%,.5)}
.lp-deck-grid{
  display:grid;
  gap:6px;
}
.lp-deck-head,
.lp-deck-row{
  display:grid;
  grid-template-columns:1fr 140px 36px;
  gap:10px;
  align-items:center;
}
.lp-deck-head{
  padding:0 4px 6px;
  border-bottom:1px solid var(--line);
}
.lp-deck-col{
  font:600 11px/1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
}
.lp-deck-row{
  padding:0;
}
.lp-deck-input{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:hsla(222,20%,12%,.45);
  color:var(--text-1);
  font:500 14px/1 var(--font-body);
  transition:border-color .15s ease, background .15s ease;
}
html[data-theme="light"] .lp-deck-input{background:hsla(42,36%,98%,.85)}
.lp-deck-input:focus{
  outline:none;
  border-color:var(--accent);
  background:hsla(222,20%,16%,.55);
}
html[data-theme="light"] .lp-deck-input:focus{background:#fff}
.lp-deck-qty{text-align:center;font-variant-numeric:tabular-nums}
.lp-deck-remove{
  width:36px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-3);
  font-size:20px;line-height:1;
  cursor:pointer;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.lp-deck-remove:hover{
  color:#ff6b6b;
  background:hsla(0,70%,55%,.08);
  border-color:hsla(0,70%,55%,.25);
}
.lp-deck-remove.is-locked{display:inline-block;visibility:hidden}
.lp-deck-footer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.lp-deck-total{
  display:inline-grid;
  grid-template-columns:auto auto auto;
  gap:8px 12px;
  align-items:baseline;
}
.lp-deck-total-label{
  font:600 11px/1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
}
.lp-deck-total-value{
  font:700 22px/1 var(--font-display);
  color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.lp-deck[data-state] .lp-deck-total[data-state="filled"] .lp-deck-total-value,
.lp-deck-total[data-state="filled"] .lp-deck-total-value{color:var(--accent)}
.lp-deck-total-meta{
  color:var(--text-3);
  font:500 12px/1 var(--font-body);
}
.lp-deck-actions{
  display:inline-flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width:680px){
  .lp-deck-head{grid-template-columns:1fr 90px 36px}
  .lp-deck-row{grid-template-columns:1fr 90px 36px}
  .lp-deck-footer{grid-template-columns:1fr;align-items:stretch}
  .lp-deck-actions{justify-content:flex-start}
  .lp-deck-total{grid-template-columns:auto 1fr;justify-content:start}
}

/* Admissions stage: ready card + export grid */
/* Access-first Create QR Access composer (empty state). The rows reuse
   the styled .lp-deck family and the inputs reuse .field /
   .workspace-note-grid; these rules add the wrapper rhythm + heading. */
.access-composer{display:grid;gap:18px}
.access-composer-head{display:grid;gap:4px}
.access-composer-head h3{
  font:700 clamp(1.25rem,1.8vw,1.5rem)/1.15 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
  margin:0;
}
.access-composer-head .mini{color:var(--text-2)}
.access-composer-fields{display:grid;gap:14px}
.access-composer-rows{display:grid;gap:8px}
.access-composer-actions{margin-top:2px}
.access-composer-hint{color:var(--text-3);margin:0}
/* Capacity hints near Create / Add QR Access: slightly stronger than the
   muted hint so the "you can create up to N" number reads clearly. */
.access-composer-capacity{color:var(--text-2);margin:0 0 2px}
.add-qr-capacity{color:var(--text-2);margin:0 0 2px}

/* One clean loading state for the whole create -> generate -> publish
   chain. Replaces the composer form while busy; no draft card flicker. */
.access-composer.is-generating{display:grid;place-items:center;min-height:300px}
.access-generating{display:grid;justify-items:center;gap:14px;text-align:center;padding:36px 16px;max-width:440px}
.access-generating-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  animation:access-spin .8s linear infinite;
}
.access-generating-title{margin:0;font:700 clamp(1.2rem,1.8vw,1.45rem)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--text)}
.access-generating-note{margin:0;color:var(--text-2);line-height:1.5}
@keyframes access-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.access-generating-spinner{animation-duration:1.6s}}
.access-composer.is-secondary{
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}

/* Draft "QR Access is ready" panel: a calm header plus stacked sections
   (download / distribute, Operation Key, run entry) separated by hair
   lines, with a quiet manage row for edit / add-more. */
.access-ready-panel{display:grid;gap:22px}
.access-ready-head{display:flex;align-items:center;gap:12px}
.access-ready-head h3{
  font:700 clamp(1.3rem,2vw,1.6rem)/1.12 var(--font-display);
  letter-spacing:-.022em;
  color:var(--text);
  margin:0;
}
.access-ready-head .mini{margin:4px 0 0;color:var(--text-2)}
.access-ready-check{
  width:34px;height:34px;
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:hsla(140,60%,45%,.18);
  color:hsla(140,70%,60%,1);
  font-size:17px;font-weight:700;
}
.access-ready-section{
  display:grid;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.access-ready-section-title{
  font:700 12px/1 var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0;
}
.access-ready-runentry-note{color:var(--text-2);line-height:1.6;margin:6px 0 0}

/* Quiet "Manage QR Access" disclosure under the ready panel. */
.manage-qr-access{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
.manage-qr-access > summary{
  cursor:pointer;
  font:600 13px/1 var(--font-display);
  color:var(--text-2);
  list-style:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 0;
}
.manage-qr-access > summary::-webkit-details-marker{display:none}
.manage-qr-access > summary::before{content:"\203A";display:inline-block;transition:transform .15s ease;color:var(--text-3)}
.manage-qr-access[open] > summary::before{transform:rotate(90deg)}
.manage-qr-access > summary:hover{color:var(--text)}
.manage-qr-body{display:grid;gap:10px;margin-top:10px;max-width:540px}
.manage-qr-body .mini{margin:0;color:var(--text-2)}
.manage-qr-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Inputs in the flex row size to content, not the global width:100%; the
   reason <select> lives in its own .field above and inherits the global
   select polish (dark surface + custom chevron) - so it no longer renders
   as a transparent, arrow-less "zigzag" control. */
.manage-qr-form > input{flex:1 1 180px;min-width:0;width:auto}
.manage-qr-form > .btn{flex:0 0 auto}
.manage-qr-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.add-qr-qty{flex:0 1 120px !important;text-align:center}
.manage-qr-reason-field{max-width:340px;margin:0}
.manage-qr-reason-field label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-2)}
.manage-qr-status:not(.hidden){margin:0}
.manage-qr-bulk{margin-top:2px}
.manage-qr-bulk > summary{cursor:pointer;font-size:13px;color:var(--text-2);padding:2px 0;list-style:none}
.manage-qr-bulk > summary::-webkit-details-marker{display:none}
.manage-qr-bulk > summary:hover{color:var(--text)}
.manage-qr-bulk-body{display:grid;gap:8px;margin-top:8px}
.manage-qr-file{font-size:13px;padding:8px 10px}
.manage-qr-preview{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:hsla(222,20%,10%,.3)}
.manage-qr-preview-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--text-2)}
.manage-qr-preview-list .is-match{color:var(--text)}
.manage-qr-preview-list strong{color:var(--accent)}

.lp-admissions-ready{
  border:1px solid hsla(140,50%,40%,.35);
  border-radius:14px;
  background:hsla(140,40%,16%,.18);
  padding:14px 16px;
  display:grid;
  gap:14px;
}
html[data-theme="light"] .lp-admissions-ready{background:hsla(140,50%,92%,.55);border-color:hsla(140,40%,55%,.35)}
.lp-admissions-ready-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.lp-admissions-ready-check{
  width:32px;height:32px;
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:hsla(140,60%,45%,.18);
  color:hsla(140,70%,60%,1);
  font-size:16px;font-weight:700;
}
.lp-admissions-ready-head strong{color:var(--text-1);font:600 16px/1.25 var(--font-display)}
.lp-admissions-ready-head p.mini{margin:4px 0 0;color:var(--text-2)}
.lp-admissions-exports{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.lp-export-card{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:hsla(222,20%,11%,.45);
  color:var(--text-1);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
html[data-theme="light"] .lp-export-card{background:hsla(42,36%,98%,.7)}
.lp-export-card:hover{
  border-color:var(--accent);
  background:hsla(222,20%,14%,.55);
  transform:translateY(-1px);
}
html[data-theme="light"] .lp-export-card:hover{background:#fff}
.lp-export-card.is-disabled{
  opacity:.6;cursor:not-allowed;pointer-events:none;
}
.lp-export-card-eyebrow{
  font:600 10.5px/1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}
.lp-export-card-title{font:600 15px/1.2 var(--font-display);color:var(--text-1)}
.lp-export-card-meta{font:500 12.5px/1.4 var(--font-body);color:var(--text-2)}
.lp-admissions-zip-note{margin-top:0;color:var(--text-3)}
@media (max-width:680px){
  .lp-admissions-exports{grid-template-columns:1fr}
}

/* Gate Device stage: ready card + devices grid */
.lp-key-ready{
  border:1px solid hsla(140,50%,40%,.35);
  border-radius:14px;
  background:hsla(140,40%,16%,.18);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
html[data-theme="light"] .lp-key-ready{background:hsla(140,50%,92%,.55);border-color:hsla(140,40%,55%,.35)}
.lp-key-ready-check{
  width:32px;height:32px;
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:hsla(140,60%,45%,.18);
  color:hsla(140,70%,60%,1);
  font-size:16px;font-weight:700;
}
.lp-key-ready strong{color:var(--text-1);font:600 16px/1.25 var(--font-display)}
.lp-key-ready p.mini{margin:4px 0 0;color:var(--text-2)}
.lp-key-devices{
  margin-top:18px;
}
.lp-key-devices-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}
.lp-key-devices-head h5{
  margin:0;
  font:600 13px/1 var(--font-display);
  letter-spacing:.04em;
  color:var(--text-1);
}
.lp-key-devices-head .mini{color:var(--text-3)}
.lp-key-devices-grid{display:grid;gap:10px}
.lp-key-toolbar{margin-top:18px;flex-wrap:wrap}

/* Review stage: premium 4-row checklist */
.lp-review-deck{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.lp-review-row{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:hsla(222,20%,10%,.4);
  transition:border-color .2s ease, background .2s ease;
}
html[data-theme="light"] .lp-review-row{background:hsla(42,36%,96%,.6)}
.lp-review-row[data-done="true"]{
  border-color:hsla(140,50%,40%,.35);
  background:hsla(140,40%,14%,.22);
}
html[data-theme="light"] .lp-review-row[data-done="true"]{background:hsla(140,50%,93%,.55);border-color:hsla(140,40%,55%,.35)}
.lp-review-mark{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  font:700 15px/1 var(--font-display);
  flex:none;
}
.lp-review-row[data-done="true"] .lp-review-mark{
  background:hsla(140,60%,45%,.2);
  color:hsla(140,70%,62%,1);
}
.lp-review-row[data-done="false"] .lp-review-mark{
  background:hsla(222,20%,18%,.65);
  border:1px solid var(--line);
}
html[data-theme="light"] .lp-review-row[data-done="false"] .lp-review-mark{background:hsla(42,36%,98%,.75)}
.lp-review-body{min-width:0}
.lp-review-row-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:6px;
}
.lp-review-row-head h5{
  margin:0;
  font:600 14px/1 var(--font-display);
  letter-spacing:.02em;
  color:var(--text-1);
}
.lp-review-row-head .btn.readiness-edit,
.lp-review-row-head .btn{
  padding:4px 12px;
  font-size:12px;
}
.lp-review-value{font:500 13.5px/1.5 var(--font-body);color:var(--text-1)}
.lp-review-value strong{color:var(--text-1);font-weight:600}
.lp-review-value .mini{color:var(--text-2);margin-top:2px;display:block}
.lp-review-value .readiness-pending{color:hsl(38,90%,60%)}
.lp-review-value .readiness-chip-row{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.lp-review-value .readiness-chip{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:hsla(222,20%,14%,.5);
  font:500 12px/1.4 var(--font-body);
  color:var(--text-2);
  display:inline-flex;gap:6px;align-items:baseline;
}
html[data-theme="light"] .lp-review-value .readiness-chip{background:hsla(42,36%,96%,.7)}
.lp-review-value .readiness-chip-count{color:var(--text-1);font-weight:600}
.lp-review-sublist{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.lp-review-sublist .mini{color:var(--text-3)}
.lp-review-value .readiness-rule-list{margin:6px 0 0;padding-left:18px;color:var(--text-2)}
.lp-review-value .readiness-rule-list li{margin:2px 0}
.lp-review-row-allocation{
  border-style:solid;
  background:hsla(38,40%,12%,.25);
  border-color:hsla(38,60%,40%,.3);
}
.lp-review-row-allocation[data-done="true"]{
  background:hsla(140,40%,14%,.22);
  border-color:hsla(140,50%,40%,.35);
}
html[data-theme="light"] .lp-review-row-allocation{background:hsla(38,80%,93%,.6);border-color:hsla(38,60%,55%,.4)}
html[data-theme="light"] .lp-review-row-allocation[data-done="true"]{background:hsla(140,50%,93%,.55);border-color:hsla(140,40%,55%,.35)}
.lp-review-row-allocation .readiness-section-action{margin-top:10px}
@media (max-width:680px){
  .lp-review-row{grid-template-columns:28px 1fr;padding:12px 14px}
  .lp-review-row-head{flex-wrap:wrap}
}

/* Reduced-motion respects */
@media (prefers-reduced-motion: reduce){
  .lp-deck-input,
  .lp-deck-remove,
  .lp-export-card,
  .lp-review-row{transition:none}
  .lp-export-card:hover{transform:none}
}

/* ===========================================================================
   Activated / view-only banner. Shown on the operation card and inside the
   Operation Key step once a Gate Device has activated the operation. Calm
   tone (no red), with a soft accent so the banner reads as informational
   rather than alarming. Reuses the existing .status-box base.
   ========================================================================= */
.status-box.activated-banner{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.02));
  color:var(--text);
  padding:14px 16px;
  border-radius:12px;
  line-height:1.5;
}
.status-box.activated-banner strong{
  display:block;
  margin-bottom:4px;
  font-size:1.02em;
}

/* ===========================================================================
   Pre-generation review card. Sits at the top of the Generate step so the
   customer reads operation + access types + total-to-mint before pressing
   the Generate CTA. Single-column for calm scanning; chips reuse the
   readiness-chip styles already defined for the legacy readiness panel.
   ========================================================================= */
.lp-generate-review{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface, rgba(255,255,255,.02));
  margin:12px 0;
}
.lp-generate-review-head{display:flex;flex-direction:column;gap:2px}
.lp-generate-review-head h5{margin:0;font-size:1em;letter-spacing:-.01em}
.lp-generate-review-row{display:flex;flex-direction:column;gap:6px}
.lp-generate-review-row strong{font-size:.98em}

/* ===========================================================================
   Activation checklist. Rendered above the Operation Key generate CTA and
   above the post-generation key panel. Each item shows a tick when the
   prerequisite is satisfied; "note" items render as a single dot to mark
   them as a closing reminder, not a gating prerequisite.
   ========================================================================= */
.activation-checklist{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface, rgba(255,255,255,.02));
  margin:12px 0;
}
.activation-checklist-head{display:flex;flex-direction:column;gap:4px}
.activation-checklist-head h5{margin:0;font-size:.98em;letter-spacing:-.01em}
.activation-checklist-list{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.activation-checklist-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.95em;
  color:var(--muted);
}
.activation-checklist-item.is-done{color:var(--text)}
.activation-checklist-item.is-note{color:var(--muted);font-style:italic}
.activation-checklist-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  font-size:.85em;
  flex:none;
  background:rgba(255,255,255,.04);
}
.activation-checklist-item.is-done .activation-checklist-mark{
  background:rgba(34,197,94,.16);
  color:#22c55e;
}