/* ============================================================
   Opes Lifecycle Guide
   Brand system: sampled from opesconsulting.co.uk + the dark
   brand ground. Single committed dark look.
   ============================================================ */

:root{
  --ground:#0A0C19; --band:#0D1020; --surface:#121729; --surface-2:#161C31;
  --line:#1F2740; --line-2:#2A3350; --wire:#3A4666;
  --brand:#0094FF; --brand-lift:#35A9FF; --brand-txt:#5CBBFF; --brand-deep:#0077CC;
  --ink:#F2F6FC; --ink-2:#CBD6E6; --body:#A6B3C7; --muted:#7F8DA4;
  --ok-bg:#12291D; --ok-edge:#255741; --ok-ink:#8FE9BC;
  --warn-bg:#2A2113; --warn-edge:#5C4826; --warn-ink:#F0CC8A;
  --err-bg:#2B1518; --err-edge:#5E2A30; --err-ink:#F5A3A9;
  --cap-a-bg:#1D3728; --cap-a-edge:#37674B; --cap-a-ink:#BAF7D4;
  --cap-z-bg:#132A3F; --cap-z-edge:#2B5075; --cap-z-ink:#B4DCFB;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 3px rgba(0,0,0,.55), 0 10px 28px -14px rgba(0,0,0,.85);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 26px 56px -22px rgba(0,0,0,.9);
  --ring:0 0 0 4px rgba(0,148,255,.34);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --max:1200px;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--ink); margin:0; font-weight:800;
  letter-spacing:-.022em; text-wrap:balance; line-height:1.14; }
p{ margin:0; }
a{ color:var(--brand-txt); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }
img{ max-width:100%; }
[hidden]{ display:none !important; }

/* width:100% matters — as a flex item, `margin:0 auto` would otherwise
   disable cross-axis stretch and size this to its content. */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 28px; }
.accent{ color:var(--brand-lift); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:99px; padding:7px 15px;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-txt); box-shadow:var(--shadow-sm);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:99px; background:var(--brand); }

/* ---------- buttons & fields ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1;
  padding:13px 20px; border-radius:10px; border:1px solid transparent; white-space:nowrap;
  cursor:pointer; transition:background .18s ease, border-color .18s ease,
    transform .12s ease, opacity .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn--primary{ background:var(--brand); color:#04121F; }
.btn--primary:hover:not([disabled]){ background:var(--brand-lift); }
.btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--ink-2); }
.btn--ghost:hover:not([disabled]){ border-color:var(--brand); color:var(--brand-txt); }
.btn--link{
  background:none; border:none; padding:0; color:var(--brand-txt);
  font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit;
}
.btn--link:hover{ text-decoration:underline; }
.btn--block{ width:100%; }

.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.field input{
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-2);
  border-radius:10px; padding:12px 14px; transition:border-color .18s ease;
}
.field input::placeholder{ color:var(--muted); }
.field input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.field-hint{ font-size:12px; color:var(--muted); }

.notice{
  display:flex; gap:10px; align-items:flex-start; border-radius:var(--r);
  padding:12px 14px; font-size:13.2px; font-weight:500; line-height:1.5;
}
.notice--err{ background:var(--err-bg); border:1px solid var(--err-edge); color:var(--err-ink); }
.notice--ok{ background:var(--ok-bg); border:1px solid var(--ok-edge); color:var(--ok-ink); }
.notice--warn{ background:var(--warn-bg); border:1px solid var(--warn-edge); color:var(--warn-ink); }

/* ---------- boot / loading ---------- */
#boot{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--ground); z-index:100;
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   AUTH
   ============================================================ */
.auth{
  min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr;
  align-items:center; align-content:center;
  background:
    radial-gradient(900px 460px at 12% 0%,   rgba(3,40,60,.55),  transparent 62%),
    radial-gradient(760px 420px at 88% 108%, rgba(30,26,64,.62), transparent 60%),
    radial-gradient(560px 360px at 62% 18%,  rgba(0,80,150,.18), transparent 70%),
    var(--ground);
  padding:40px 24px;
}
.auth-inner{
  width:100%; max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:44px; align-items:center;
}
@media (min-width:940px){ .auth-inner{ grid-template-columns:1.05fr .95fr; gap:64px; } }

.auth-pitch .logo{ display:block; margin-bottom:30px; }
.auth-pitch .logo img{ height:26px; width:auto; display:block; }
.auth-pitch h1{ font-size:clamp(2rem,4vw,2.7rem); margin:20px 0 0; }
.auth-pitch p.lede{ margin-top:16px; font-size:1rem; max-width:48ch; }
.auth-points{ list-style:none; margin:28px 0 0; padding:0; display:flex;
  flex-direction:column; gap:12px; }
.auth-points li{ position:relative; padding-left:28px; font-size:13.8px;
  font-weight:500; color:var(--ink-2); }
/* filled brand disc with a white tick — the site's bullet treatment */
.auth-points li::before{
  content:""; position:absolute; left:0; top:.24em; width:17px; height:17px;
  border-radius:99px; background:var(--brand) no-repeat center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23041220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px 11px;
}

.auth-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-lg);
}
.auth-card h2{ font-size:1.35rem; }
.auth-card > p.sub{ margin-top:8px; font-size:13.6px; }
.auth-form{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.auth-alt{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13.4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.auth-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

.auth-state{ text-align:center; padding:8px 0; }
.auth-state .badge{
  width:52px; height:52px; border-radius:99px; display:grid; place-items:center;
  margin:0 auto 18px; font-size:22px; font-weight:800;
}
.auth-state--ok .badge{ background:var(--ok-bg); border:1px solid var(--ok-edge); color:var(--ok-ink); }
.auth-state--wait .badge{ background:var(--warn-bg); border:1px solid var(--warn-edge); color:var(--warn-ink); }
.auth-state p{ margin-top:10px; font-size:13.8px; }

/* ============================================================
   APP SHELL
   ============================================================ */
#root{ min-height:100vh; min-height:100dvh; }
.app{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
/* flex items default to min-width:auto, which lets the funnel's intrinsic
   width stretch the whole page on narrow screens. Pin it to 0 so the
   scroll containers actually scroll. */
.app > *{ min-width:0; }

.appbar{
  position:sticky; top:0; z-index:30;
  background:rgba(10,12,25,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.appbar-top{
  max-width:var(--max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.appbar-top .logo img{ height:22px; width:auto; display:block; }
.acct{ display:flex; align-items:center; gap:12px; }
.acct-email{ font-size:12.8px; color:var(--muted); }
@media (max-width:640px){ .acct-email{ display:none; } }

.tabs{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; flex:none; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13.8px; font-weight:700; color:var(--muted);
  padding:14px 15px 15px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease; white-space:nowrap;
}
.tab:hover{ color:var(--ink-2); }
.tab[aria-selected="true"]{ color:var(--brand-txt); border-bottom-color:var(--brand); }
.tab-count{
  margin-left:7px; font-size:10.5px; font-weight:800; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:99px; padding:2px 7px; font-variant-numeric:tabular-nums;
}
.tab[aria-selected="true"] .tab-count{ color:var(--brand-txt); border-color:var(--brand-deep); }

.panel{ padding:44px 0 72px; animation:rise .28s ease both; }
@keyframes rise{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.panel-head{ max-width:680px; margin-bottom:36px; }
.panel-head h2{ font-size:clamp(1.65rem,3.2vw,2.2rem); margin-top:17px; }
.panel-head p{ margin-top:13px; }

/* ---------- funnel ---------- */
.funnel{ overflow-x:auto; padding:6px 2px 14px; scrollbar-width:thin; }
.funnel-track{ display:flex; align-items:stretch; min-width:min-content; }
.fn-col{ display:grid; grid-template-rows:96px auto 96px;
  align-items:center; justify-items:center; min-width:160px; }
.fn-slot{ display:flex; flex-direction:column; align-items:center;
  height:100%; width:100%; padding:0 9px; }
.fn-slot--above{ justify-content:flex-end; }
.fn-slot--below{ justify-content:flex-start; }
.fn-drop{ width:2px; flex:1; min-height:18px; background:var(--wire); }
.fn-stage{
  position:relative; width:calc(100% - 18px); min-height:86px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:14px 12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  font-weight:700; font-size:13.5px; color:var(--ink);
  box-shadow:var(--shadow-sm); line-height:1.35;
}
.fn-step{ display:block; font-size:10px; font-weight:700; letter-spacing:.1em;
  color:var(--brand-lift); margin-bottom:7px; font-variant-numeric:tabular-nums; }
.fn-col:not(.fn-col--cap) .fn-stage::before,
.fn-col--cap .fn-cap::before{
  content:""; position:absolute; left:-18px; top:50%;
  width:18px; height:2px; background:var(--wire);
}
.fn-col--cap:first-child .fn-cap::before{ display:none; }
.fn-cap{
  position:relative; width:calc(100% - 18px); min-height:86px;
  border-radius:var(--r); padding:14px 12px; display:flex;
  align-items:center; justify-content:center; text-align:center;
  font-weight:800; font-size:13.5px; line-height:1.3;
}
.fn-cap--start{ background:var(--cap-a-bg); border:1px solid var(--cap-a-edge); color:var(--cap-a-ink); }
.fn-cap--end{ background:var(--cap-z-bg); border:1px solid var(--cap-z-edge); color:var(--cap-z-ink); }
.fn-branch{
  display:block; width:100%; background:var(--tint); border:1px solid var(--edge);
  border-radius:var(--r); padding:11px 12px; text-align:center; cursor:pointer;
  font-family:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.fn-branch:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.fn-branch-name{ display:block; font-size:12.5px; font-weight:700;
  color:var(--h-title); line-height:1.3; }
.fn-branch-go{ display:block; margin-top:4px; font-size:10.5px;
  font-weight:600; color:var(--h-body); opacity:.85; }

/* ---------- flows ---------- */
.flows{ display:flex; flex-direction:column; gap:26px; }
.flow{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
  overflow:hidden; scroll-margin-top:120px;
}
.flow-head{
  display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;
  justify-content:space-between; padding:24px 26px 20px;
  border-bottom:1px solid var(--line);
}
.flow-id{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.flow-swatch{ flex:none; width:12px; height:38px; border-radius:99px;
  background:var(--h-body); margin-top:2px; }
.flow-name{ font-size:1.22rem; }
.flow-note{ margin-top:6px; font-size:13.5px; color:var(--body); max-width:60ch; }
.flow-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trigger{
  display:inline-flex; align-items:center; gap:9px; background:var(--tint);
  border:1px solid var(--edge); border-radius:99px; padding:7px 14px 7px 8px;
  font-size:12.5px; font-weight:600; color:var(--h-title);
}
.trigger-key{
  background:var(--h-body); color:var(--tint); border-radius:99px;
  padding:3px 9px; font-size:9.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
}
.count{
  font-size:12.5px; font-weight:600; color:var(--muted);
  border:1px solid var(--line-2); border-radius:99px; padding:7px 13px; white-space:nowrap;
}
.count strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

.rail{ overflow-x:auto; padding:24px 26px 26px; scrollbar-width:thin; }
.rail-track{ list-style:none; margin:0; padding:0; display:flex;
  align-items:stretch; min-width:min-content; }
.step{ display:flex; align-items:stretch; }
.step + .step::before{ content:""; align-self:center; flex:none;
  width:26px; height:2px; background:var(--edge); }
.step-card{
  width:252px; display:flex; flex-direction:column; gap:12px;
  background:var(--tint); border:1px solid var(--edge); border-radius:var(--r-lg);
  padding:16px 17px 17px; transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.step-head{ display:flex; align-items:center; gap:10px; }
.step-num{
  flex:none; min-width:26px; height:22px; display:grid; place-items:center;
  background:var(--h-body); color:var(--tint); border-radius:99px;
  font-size:10.5px; font-weight:800; letter-spacing:.05em;
  font-variant-numeric:tabular-nums; padding:0 7px;
}
.step-title{ font-size:.98rem; font-weight:700; color:var(--h-title); }
.step-list{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:9px; }
.step-list li{
  position:relative; padding-left:19px; font-size:12.9px; line-height:1.45;
  font-weight:500; color:var(--h-body);
}
.step-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:9px; height:9px;
  border-radius:99px; background:var(--h-body); opacity:.55;
}

/* ---------- campaigns ---------- */
.camp-grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.camp-item{
  background:var(--tint); border:1px solid var(--edge); border-radius:var(--r);
  padding:15px 17px; font-size:13.6px; font-weight:600; color:var(--h-title);
  transition:transform .18s ease, box-shadow .18s ease;
}
.camp-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- stats ---------- */
.stats{ display:grid; gap:14px; margin-bottom:34px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); max-width:780px; }
.stat{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.stat-n{ font-size:1.9rem; font-weight:800; color:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
.stat-l{ margin-top:7px; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.055em; line-height:1.35; }

/* ---------- footer ---------- */
.appfoot{ margin-top:auto; background:var(--band); border-top:1px solid var(--line);
  padding:26px 0; }
.appfoot-in{ display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; }
.appfoot-brand{ display:flex; align-items:center; gap:12px; }
.appfoot-brand img{ width:22px; height:auto; }
.appfoot-brand span{ font-size:12.6px; font-weight:700; color:var(--ink); }
.appfoot p{ font-size:12.2px; color:var(--muted); }

@media (max-width:720px){
  .wrap,.appbar-top,.tabs{ padding-left:18px; padding-right:18px; }
  .panel{ padding:32px 0 56px; }
  .flow-head,.rail{ padding:20px; }
  .auth-card{ padding:24px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}