/* ============================================================================
   Realeflow Launch Kit — styles
   Tokens lifted directly from realeflow.com (styles.css :root)
============================================================================ */
:root{
  --teal:#22DFDC;
  --blue:#8bc9ee;
  /* rgb triplets for rgba() washes + ink for text on brand gradients —
     overridden at runtime from the white-label's palette (applyBrandTheme) */
  --teal-rgb:34,223,220;
  --blue-rgb:139,201,238;
  --grad-ink:#06181a;
  --bg:#08090B;
  --bg-1:#0E1014;
  --bg-2:#13161B;
  --bg-3:#1B1F26;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --ink:#F5F6F4;
  --ink-2:#C7CAC2;
  --ink-3:#8B8F88;
  --ink-4:#5B5F58;
  --sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --radius:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(.2,.65,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --grad:linear-gradient(135deg,var(--teal),var(--blue));
  --sidebar-w:288px;
  --rail:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
*::selection{background:var(--blue);color:#0a0a0a}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--ink-3)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:500;
  border:1px solid var(--line-2);
  transition:transform .25s var(--ease),background .25s ease,border-color .25s ease,opacity .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--grad);color:var(--grad-ink);border-color:transparent;font-weight:600}
.btn--primary:hover{box-shadow:0 8px 30px rgba(var(--teal-rgb),.25)}
.btn--ghost{color:var(--ink)}
.btn--ghost:hover{background:rgba(255,255,255,.05)}
.btn--sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ============================================================================
   ONBOARDING / INTAKE
============================================================================ */
.intake{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;position:relative;overflow:hidden;
  /* mirror the dashboard hero: brand glows + soft top wash over the dark bg */
  background:
    radial-gradient(1000px 520px at 75% -12%,rgba(var(--teal-rgb),.16),transparent 62%),
    radial-gradient(800px 560px at 8% 112%,rgba(var(--blue-rgb),.13),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),
    var(--bg);
}
/* the same faint map motif the checklist hero uses, fading in from the right */
.intake::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:62%;pointer-events:none;
  background:url('assets/images/map_2_tile.svg') right center / cover no-repeat;
  opacity:.10;filter:grayscale(1) brightness(2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 85%);mask-image:linear-gradient(90deg,transparent,#000 85%);
}
.intake > *{position:relative;z-index:1}
.intake__inner{width:100%;max-width:760px}

/* sign-in card */
.auth-card{width:100%;max-width:400px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:18px;
  padding:38px 34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-card__logo{height:26px;margin-bottom:24px}
.auth-card h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.auth-card__sub{font-size:14px;color:var(--ink-3);line-height:1.55;margin-bottom:22px}
.auth-card__err{font-size:13px;color:#ffb4b4;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);
  border-radius:10px;padding:10px 12px;margin-bottom:18px;text-align:left}
.auth-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.auth-form input{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  color:var(--ink);font-size:15px;font-family:inherit}
.auth-form input:focus{outline:none;border-color:var(--teal)}
.auth-form .btn{margin-top:4px;justify-content:center;padding:13px}
.auth-card__msg{font-size:13px;color:#ffb4b4;min-height:1em;text-align:center}
.auth-card__alt{font-size:13px;color:var(--ink-3);margin-top:18px}
.auth-card__alt button{color:var(--teal);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.auth-card__alt button:hover{color:var(--ink)}

/* ---- Admin area ---- */
#admin{min-height:100vh}
.admin__top{display:flex;align-items:center;gap:14px;padding:16px clamp(20px,4vw,40px);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.admin__logo{height:22px}
.admin__badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);
  border:1px solid rgba(var(--teal-rgb),.3);border-radius:999px;padding:4px 10px}
.admin__spacer{flex:1}
.admin__user{font-size:13px;color:var(--ink-3)}
.admin__body{max-width:1100px;margin:0 auto;padding:clamp(24px,4vw,44px)}
.admin__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.admin__head h1{font-size:26px;font-weight:600;letter-spacing:-.02em}
.admin__head p{color:var(--ink-3);font-size:14px;margin-top:4px}
.admin__empty{color:var(--ink-3);font-size:15px;padding:60px 0;text-align:center;border:1px dashed var(--line-2);border-radius:var(--radius-lg)}
.admin__err{color:#ffb4b4;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);border-radius:10px;padding:12px 14px;margin-bottom:18px}
.admin__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.orgcard{background:var(--bg-1);border:1px solid var(--line);border-radius:16px;padding:20px}
.orgcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.orgcard__head h3{font-size:17px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgcard__actions{display:flex;gap:6px;flex:0 0 auto}
.orgcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.orgchip{font-size:11px;color:var(--ink-2);background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.orgchip--tool{color:var(--teal);border-color:rgba(var(--teal-rgb),.28);background:rgba(var(--teal-rgb),.07)}
.orgcard__link{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.orgcard__link input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  color:var(--ink-3);font-size:12px;font-family:var(--mono)}

/* org config form */
.orgform{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.orgform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.orgform__field{display:flex;flex-direction:column;gap:7px}
.orgform__field > span{font-size:12px;font-weight:600;color:var(--ink-2)}
.orgform__field input[type=text],.orgform__field select{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--ink);font-size:14px;font-family:inherit}
.orgform__field input[type=text]:focus,.orgform__field select:focus{outline:none;border-color:var(--teal)}
.orgform__field input[type=color]{width:100%;height:42px;padding:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.orgform__checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.orgcheck{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.orgcheck input{accent-color:var(--teal);width:16px;height:16px}
@media(max-width:560px){.orgform__row,.orgform__checks{grid-template-columns:1fr}}
.orgform__hint{font-size:12px;color:var(--ink-4);line-height:1.5;margin:-2px 0 4px;font-weight:400}
.orgform__logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.orgform__logo-cur{height:34px;max-width:150px;object-fit:contain;filter:brightness(0) invert(1)}
.orgform__logo input{font-size:12.5px;color:var(--ink-3)}
.orgform__fills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:280px;overflow-y:auto;padding-right:4px}
.orgform__fill{display:flex;flex-direction:column;gap:4px}
.orgform__fill > span{font-size:11px;color:var(--ink-3)}
.orgform__fill input{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--ink);font-size:13px;font-family:inherit}
.orgform__fill input:focus{outline:none;border-color:var(--teal)}
@media(max-width:560px){.orgform__fills{grid-template-columns:1fr}}
.orgcard__count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:rgba(var(--teal-rgb),.15);color:var(--teal);font-size:10.5px;font-weight:600}

/* roster modal */
.roster{display:flex;flex-direction:column;margin-top:4px}
.roster__row{display:grid;grid-template-columns:minmax(180px,1.4fr) auto minmax(160px,1fr) auto;gap:16px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.roster__row:last-child{border-bottom:none}
.roster__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.roster__who b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster__who span{font-size:12px;color:var(--ink-4)}
.roster__joined,.roster__active{font-size:12px;color:var(--ink-3);white-space:nowrap}
.roster__prog{display:flex;align-items:center;gap:10px}
.roster__prog span{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.roster__bar{flex:1;height:5px;border-radius:999px;background:var(--bg-3);overflow:hidden}
.roster__bar i{display:block;height:100%;background:var(--grad);border-radius:999px}
.roster__empty{color:var(--ink-3);font-size:14px;padding:28px 0;text-align:center}
@media(max-width:640px){.roster__row{grid-template-columns:1fr auto;grid-auto-rows:auto}}

/* partner brand bar: managed by admin */
.bt-bar__managed{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4)}
.bt-bar__managed svg{width:13px;height:13px}

/* admin preview bar */
.preview-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:130;display:flex;align-items:center;gap:16px;
  background:rgba(15,17,21,.96);border:1px solid var(--line-2);border-radius:999px;padding:8px 8px 8px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);font-size:13px;color:var(--ink-2);max-width:calc(100vw - 32px)}
.preview-bar b{color:var(--ink)}
.preview-bar svg{width:15px;height:15px;color:var(--teal);vertical-align:-2px;margin-right:4px}
.preview-bar .btn{background:var(--grad);color:var(--grad-ink);border:none}
.intake__logo{height:30px;margin-bottom:40px;display:block}
.intake__step .mono{display:block;margin-bottom:14px}
.intake h1{font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.02em;font-weight:600;margin-bottom:12px}
.intake p.sub{color:var(--ink-2);font-size:16px;margin-bottom:32px;max-width:54ch}
.choices{display:grid;gap:14px}
.choices--cards{grid-template-columns:1fr 1fr}
.choice__text{display:block}
.choice--card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.choice__thumb{display:block;width:100%;height:130px;background-size:cover;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.choice--card .choice__radio{position:absolute;top:14px;right:14px;background:rgba(8,9,11,.6);backdrop-filter:blur(6px)}
.choice--card .choice__text{padding:0 20px 20px}
.choice--card{position:relative}
@media(max-width:560px){.choices--cards{grid-template-columns:1fr}}
.choice{
  text-align:left;padding:20px 22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .2s ease,background .2s ease,transform .2s var(--ease);
  display:flex;gap:16px;align-items:flex-start;
}
.choice:hover{border-color:var(--line-2);transform:translateY(-2px)}
.choice.is-selected{border-color:var(--teal);background:rgba(var(--teal-rgb),.06)}
.choice__radio{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-2);margin-top:2px;position:relative;transition:border-color .2s
}
.choice.is-selected .choice__radio{border-color:var(--teal)}
.choice.is-selected .choice__radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad)
}
.choice__label{display:block;font-weight:600;font-size:16px;margin-bottom:3px}
.choice__blurb{display:block;color:var(--ink-3);font-size:14px}
.intake__field{margin-bottom:32px}
.intake__field label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.intake__field input{
  width:100%;padding:14px 16px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);font-size:15px;font-family:inherit
}
.intake__field input:focus{outline:none;border-color:var(--teal)}
.intake__nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px}
.intake__dots{display:flex;gap:8px}
.intake__dots span{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .3s}
.intake__dots span.on{background:var(--grad)}

/* ============================================================================
   APP SHELL
============================================================================ */
.app{display:none;min-height:100vh}
/* fixed sidebar + content offset by its width (rail width when collapsed). The sidebar
   overlays content when it expands on hover, so the content never reflows. */
.app.is-active{--nav-w:var(--sidebar-w);display:block;min-height:100vh;padding-left:var(--nav-w);transition:padding-left .4s cubic-bezier(.4,0,.2,1)}
.app.nav-collapsed{--nav-w:var(--rail)}
/* scrim that dims the content while the collapsed nav is hover-expanded (flyout) */
.app.is-active::before{content:"";position:fixed;inset:0 0 0 var(--rail);z-index:39;pointer-events:none;
  background:rgba(8,9,11,.55);opacity:0;transition:opacity .35s ease}
.app.nav-flyout::before{opacity:1}
/* ambient brand glow behind the content, lifted from realeflow.com hero blobs */
.main::before{
  content:"";position:fixed;inset:0 0 auto auto;width:70vw;height:70vh;pointer-events:none;z-index:0;
  background:
    radial-gradient(closest-side, rgba(var(--teal-rgb),.16), transparent 70%) 80% -10% / 55vw 55vw no-repeat,
    radial-gradient(closest-side, rgba(var(--blue-rgb),.13), transparent 70%) 120% 40% / 50vw 50vw no-repeat;
  filter:blur(30px);
}
.main::after{
  content:"";position:fixed;left:var(--sidebar-w);bottom:-10%;width:40vw;height:40vw;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(var(--teal-rgb),.07), transparent 70%);filter:blur(40px);
}

/* Sidebar — fixed; collapses to an icon rail, expands on hover or via the toggle */
.sidebar{
  position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-w);z-index:40;
  overflow-x:hidden;overflow-y:auto;
  background:var(--bg-1);border-right:1px solid var(--line);
  padding:20px 18px;display:flex;flex-direction:column;gap:8px;
  transition:width .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;
}
.app.nav-collapsed .sidebar{width:var(--rail);padding:20px 14px}
.app.nav-collapsed .sidebar.is-expanded{width:var(--sidebar-w);box-shadow:24px 0 50px rgba(0,0,0,.5)}

/* sidebar header: hamburger toggle + logo */
.sidebar__top{display:flex;align-items:center;gap:10px;margin:2px 4px 20px;min-height:30px}
.sidebar__toggle{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:background .15s ease,color .15s ease}
.sidebar__toggle:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.sidebar__logo{height:24px}
.sidebar__logo--full{display:block}
.sidebar__logo--icon{display:none;height:24px}
/* collapsed (and not hovered): show only icons */
.app.nav-collapsed .sidebar:not(.is-expanded) .sidebar__logo--full,
.app.nav-collapsed .sidebar:not(.is-expanded) .sidebar__logo--icon{display:none}
.app.nav-collapsed .sidebar:not(.is-expanded) .sidebar__top{justify-content:center}
.app.nav-collapsed .sidebar:not(.is-expanded) .navitem > span:not(.navitem__icon),
.app.nav-collapsed .sidebar:not(.is-expanded) .nav-section,
.app.nav-collapsed .sidebar:not(.is-expanded) #sidebarCase,
.app.nav-collapsed .sidebar:not(.is-expanded) .sidebar__foot{display:none}
.app.nav-collapsed .sidebar:not(.is-expanded) .navitem{justify-content:center;padding:11px 0}

.sidebar__nav{display:flex;flex-direction:column;gap:2px}
.navitem{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  color:var(--ink-2);font-size:14px;transition:background .15s,color .15s;width:100%;text-align:left;white-space:nowrap
}
.navitem:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.navitem.is-active{background:rgba(var(--teal-rgb),.08);color:var(--ink)}
.navitem.is-active .navitem__icon{color:var(--teal)}
.navitem__icon{width:20px;display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.navitem__icon svg{width:17px;height:17px}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.navitem__lock{margin-left:auto;font-size:10px;color:var(--ink-4)}
.navitem.locked{opacity:.55}
.navitem--ext .navitem__icon{color:var(--blue)}

/* nav hierarchy: prominent "home base" item + quiet grouped sections */
.navitem--home{margin-bottom:4px;padding:12px;border-radius:12px;color:var(--ink);
  background:linear-gradient(135deg, rgba(var(--teal-rgb),.12), rgba(var(--blue-rgb),.05));
  border:1px solid rgba(var(--teal-rgb),.22)}
.navitem--home:hover{color:var(--ink);background:linear-gradient(135deg, rgba(var(--teal-rgb),.17), rgba(var(--blue-rgb),.08));border-color:rgba(var(--teal-rgb),.42)}
.navitem--home.is-active{background:linear-gradient(135deg, rgba(var(--teal-rgb),.2), rgba(var(--blue-rgb),.09));border-color:rgba(var(--teal-rgb),.5)}
.navitem--home .navitem__icon{color:var(--teal)}
.navitem__home{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.navitem__title{font-size:14px;font-weight:600;color:var(--ink)}
.navitem__sub{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal)}
.nav-section{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-4);padding:0 12px;margin:18px 0 6px}
/* fixed width = expanded content width: keeps the case card AND profile footer
   laid out at final size, so neither reflows (and shifts the card's position)
   while the sidebar animates open */
.sidebar__bottom{margin-top:auto;display:flex;flex-direction:column;width:calc(var(--sidebar-w) - 36px)}
.sidebar__foot{padding:14px 12px 0;border-top:1px solid var(--line)}
.sidebar__profile{font-size:13px;color:var(--ink-2)}
.sidebar__profile b{color:var(--ink);display:block;font-size:14px}
.sidebar__foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px}
.sidebar__reset{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-4);padding:2px 0}
.sidebar__reset:hover{color:var(--ink-2)}
.sidebar__reset svg{width:12px;height:12px}

/* account settings modal */
.acct{display:flex;flex-direction:column;margin-top:4px}
.acct__section{padding:18px 0;border-bottom:1px solid var(--line)}
.acct__section:last-child{border-bottom:none}
.acct__section h3{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.acct__section > p{font-size:12.5px;color:var(--ink-4);line-height:1.5;margin-bottom:12px}
.acct__row{display:flex;gap:10px;align-items:center}
.acct__row input{flex:1;min-width:0}
.acct__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.acct__col input{width:100%}
.acct input{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  color:var(--ink);font-size:14px;font-family:inherit}
.acct input:focus{outline:none;border-color:var(--teal)}
.acct__msg{font-size:12.5px;color:#ffb4b4;min-height:1em;margin-top:8px}
.acct__msg.is-ok{color:#34d399}

/* Main */
.main{padding:40px clamp(24px,5vw,72px);max-width:1500px;width:100%;position:relative;z-index:1}
.page{display:none;animation:fade .4s var(--ease-out)}
.page.is-active{display:block}
/* opacity-only so it never puts a transform on .page (which would break sticky tabs) */
@keyframes fade{from{opacity:0}to{opacity:1}}
/* full-bleed header banner — sets the title section apart from the content below */
.page__head{
  position:relative;overflow:hidden;
  /* span from the content's left edge all the way to the viewport's right edge */
  width:calc(100vw - var(--nav-w));
  margin:-40px 0 36px calc(-1 * clamp(24px,5vw,72px));
  padding:38px clamp(24px,5vw,72px) 28px;
  border-bottom:1px solid var(--line);
  transition:width .4s cubic-bezier(.4,0,.2,1);
  background:
    radial-gradient(720px 260px at 82% -50%, rgba(var(--teal-rgb),.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 70%);
}
/* faint real-estate map motif fading in from the right */
.page__head::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:60%;pointer-events:none;z-index:0;
  background:url('assets/images/map_2_tile.svg') right center / cover no-repeat;
  opacity:.12;filter:grayscale(1) brightness(2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 85%);mask-image:linear-gradient(90deg,transparent,#000 85%);
}
.page__head > *{position:relative;z-index:1}
/* per-page photo headers (Unsplash) — colored, fading off on the left so copy stays readable */
#page-emails .page__head::after,
#page-social .page__head::after,
#page-battlecards .page__head::after,
#page-videos .page__head::after,
#page-proof .page__head::after{
  width:64%;opacity:.42;filter:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 78%);mask-image:linear-gradient(90deg,transparent,#000 78%);
}
#page-emails .page__head::after{background-image:url('assets/images/Headers/email.jpg')}
#page-social .page__head::after{background-image:url('assets/images/Headers/marketing.jpg')}
#page-battlecards .page__head::after{background-image:url('assets/images/Headers/battlecards.jpg')}
#page-videos .page__head::after{background-image:url('assets/images/Headers/walkthroughs.jpg')}
#page-proof .page__head::after{background-image:url('assets/images/Headers/proof.jpg')}
.page__head h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;font-weight:600;margin:8px 0 10px}
.page__head p{color:var(--ink-2);font-size:16px;max-width:64ch}

/* checklist hero: greeting on the left, progress card on the right */
.page__head--split{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.page__head--split .page__head-text{flex:1 1 340px;min-width:0}
.page__head--split .progress{flex:0 0 auto;width:clamp(300px,34%,400px);margin-bottom:0}
@media(max-width:820px){.page__head--split .progress{width:100%}}

/* Progress bar */
.progress{
  position:relative;overflow:hidden;
  background:
    linear-gradient(120deg, rgba(var(--blue-rgb),.16), rgba(var(--teal-rgb),.07) 48%, transparent 72%),
    var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;margin-bottom:36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap
}
.progress > *{position:relative;z-index:1}
.progress__ring{position:relative;flex:0 0 84px;width:84px;height:84px}
.progress__ring svg{transform:rotate(-90deg)}
.progress__pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}
.progress__meta{flex:1;min-width:200px}
.progress__meta b{font-size:18px}
.progress__meta p{color:var(--ink-3);font-size:14px;margin-top:4px}
.progress__bar{height:6px;border-radius:999px;background:var(--bg-3);margin-top:14px;overflow:hidden}
.progress__bar i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .6s var(--ease-out)}

/* Stage cards — the condensed navigator -------------------------------- */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px}
/* the 5th card: external "next step" link to the Partner Resource Hub */
.stage--hub{border-color:rgba(var(--teal-rgb),.22);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(var(--blue-rgb),.10), transparent 70%),
    linear-gradient(150deg, rgba(var(--teal-rgb),.07), transparent 60%),
    var(--bg-2)}
.stage--hub:hover{border-color:rgba(var(--teal-rgb),.45);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.stage--hub .stage__num{background:var(--grad);border-color:transparent;color:var(--grad-ink)}
.stage--hub .stage__num svg{width:14px;height:14px}
.stage--hub .stage__count{color:var(--teal)}
.stage{
  position:relative;
  text-align:left;display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 18px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .2s ease,background .2s ease,transform .2s var(--ease),box-shadow .2s ease;
}
.stage:hover{border-color:var(--line-2);transform:translateY(-2px)}
.stage.is-active{border-color:var(--teal);background:rgba(var(--teal-rgb),.06);box-shadow:0 6px 24px rgba(var(--teal-rgb),.10)}
.stage__top{display:flex;align-items:center;justify-content:space-between}
.stage__num{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2)}
.stage.is-active .stage__num{color:var(--grad-ink);background:var(--grad);border-color:transparent}
.stage.is-done .stage__num{color:var(--grad-ink);background:var(--grad);border-color:transparent}
.stage.is-done .stage__num svg{width:15px;height:15px}
.stage__title{font-weight:600;font-size:14.5px;line-height:1.25;min-height:2.4em}
.stage__bar{height:4px;border-radius:999px;background:var(--bg-3);overflow:hidden;display:block}
.stage__bar i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .5s var(--ease-out)}
.stage__count{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}
.stage.is-done .stage__count{color:var(--teal)}
@media(max-width:980px){.stages{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stages{grid-template-columns:1fr}}

/* group the stage tabs with the content they reveal, so it reads as one unit */
.stage-group{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;margin-bottom:28px}
.stage-group .stages{margin-bottom:18px}
.stage-group .phase-detail{margin:0;background:var(--bg-2);border-radius:var(--radius)}

/* Focused phase detail -------------------------------------------------- */
.phase-detail{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 26px 24px;animation:fade .35s var(--ease-out)}
.phase-detail__head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.phase-detail__head h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.phase__num{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--grad-ink);background:var(--grad)}
.phase__blurb{color:var(--ink-3);font-size:14px;margin:0 0 18px;max-width:70ch}
.steps{display:flex;flex-direction:column}
.step-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.step-row--full{grid-template-columns:1fr}
/* faint full-width divider in the whitespace between rows — read each row left→right, then drop down */
.step-row:not(:last-child){padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.step__text{display:block;min-width:0}
@media(max-width:1080px){.step-row{grid-template-columns:1fr;gap:10px}}
.step{
  display:flex;gap:14px;align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .2s,background .2s
}
.step:hover{border-color:var(--line-2)}
.step:focus-visible{outline:none;border-color:var(--blue)}
.step__body{flex:1;min-width:0;display:flex;flex-direction:column}
/* the action button — clearly a button, sits below the text */
.step__btn{
  align-self:flex-start;margin-top:12px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:9px;font-size:13px;font-weight:600;
  background:rgba(var(--blue-rgb),.1);border:1px solid rgba(var(--blue-rgb),.35);color:var(--blue);
  /* background can't tween into a gradient, so border/background switch together
     (no lingering border ghost on the gradient); only motion + text fade */
  transition:transform .2s var(--ease),color .2s ease
}
.step__btn:hover{background:var(--grad);color:var(--grad-ink);border-color:transparent;transform:translateY(-1px)}
.step__btn svg{width:14px;height:14px}
/* two buttons on one row (e.g. View tips + Example Copy) */
.step__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.step__btns .step__btn{margin-top:0}

/* launch-week example copy modal */
.excopy{margin-top:16px}
.excopy__subject{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:12px}
.excopy__subject .mono{font-size:10px;color:var(--ink-4);flex:0 0 auto}
.excopy__body{white-space:pre-wrap;font-size:14px;line-height:1.65;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-height:46vh;overflow-y:auto}
.step.done .step__btn{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.step.done .step__btn:hover{color:var(--ink);border-color:var(--ink-3)}
/* certification quiz — a milestone, styled apart from the video steps */
.step--quiz{background:linear-gradient(120deg, rgba(var(--teal-rgb),.10), rgba(var(--blue-rgb),.05) 60%, transparent), var(--bg-2);border-color:rgba(var(--teal-rgb),.32)}
.step--quiz .step__icon{background:var(--grad);color:var(--grad-ink);border-color:transparent}
.step--quiz .step__btn{background:var(--grad);color:var(--grad-ink);border-color:transparent;font-weight:600}
.step--quiz .step__btn:hover{box-shadow:0 6px 18px rgba(var(--teal-rgb),.3)}
.step--quiz.done{background:var(--bg-2)}
.step--quiz.done .step__icon{background:var(--bg-3);color:var(--teal)}
.step.done{background:rgba(var(--teal-rgb),.04)}
.step.done .step__title{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
/* semantic icon chip on the left of the title */
.step__icon{
  flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-3);border:1px solid var(--line);color:var(--blue);transition:color .2s ease
}
.step.done .step__icon{color:var(--teal);border-color:rgba(var(--teal-rgb),.25);background:rgba(var(--teal-rgb),.07)}
.step__title{display:block;font-weight:500;font-size:15px}
.step__desc{display:block;color:var(--ink-3);font-size:13.5px;margin-top:3px;line-height:1.45}
/* check toggle on the right */
.step__check{
  flex:0 0 22px;width:22px;height:22px;border-radius:7px;margin-left:auto;align-self:center;
  border:2px solid var(--line-2);position:relative;transition:all .2s var(--ease)
}
.step:hover .step__check{border-color:var(--ink-3)}
.step.done .step__check{background:var(--grad);border-color:transparent}
.step.done .step__check::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #06181a;border-width:0 2px 2px 0;transform:rotate(45deg)
}

/* Generic content cards */
.cards{display:grid;gap:16px}
.cards--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.card h3{font-size:16px;font-weight:600;margin-bottom:6px}
.card .meta{font-size:13px;color:var(--ink-3);margin-bottom:14px}
.card pre{
  white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:220px;overflow:auto;margin:12px 0
}
.card__actions{display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-3)}
.tag svg{width:12px;height:12px;color:var(--blue)}

/* battle cards */
.bcard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:14px}
.bcard h3{font-size:18px}
.bcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bcol b{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);display:block;margin-bottom:6px}
.bcol ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.bcol li{font-size:13.5px;color:var(--ink-2);padding-left:16px;position:relative}
.bcol li::before{content:"–";position:absolute;left:0;color:var(--ink-4)}
.bcard__diff{background:rgba(var(--teal-rgb),.06);border:1px solid rgba(var(--teal-rgb),.2);border-radius:10px;padding:14px 16px;font-size:14px}
.bcard__diff b{color:var(--teal);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}

/* video */
.video{display:block;width:100%;text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.video:hover{border-color:var(--line-2);transform:translateY(-2px)}
.video__thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-3),var(--bg-1));background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--ink-4);position:relative}
.video__thumb::after{content:"";position:absolute;inset:0;background:rgba(8,9,11,.28);transition:background .2s ease}
.video:hover .video__thumb::after{background:rgba(8,9,11,.12)}
.video__play{position:relative;z-index:1}
.video:hover .video__play{transform:scale(1.08)}
.video__play{width:54px;height:54px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--grad-ink);transition:transform .2s var(--ease)}
.video__play svg{width:20px;height:20px;margin-left:2px}
.video__body{padding:16px 18px}
.video__body h3{font-size:15px;font-weight:500}
.video__body .meta{font-size:12px;color:var(--ink-3);margin-top:4px}

/* locked teaser */
.locked-page{text-align:center;padding:80px 24px;color:var(--ink-3)}
.locked-page .lk{display:inline-flex;width:64px;height:64px;border-radius:18px;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--blue);margin-bottom:18px}
.locked-page .lk svg{width:28px;height:28px}
.locked-page h2{color:var(--ink);font-size:22px;margin-bottom:8px}

/* placeholder thumb for social */
.social__thumb{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--bg-3),var(--bg-1));
  display:flex;align-items:center;justify-content:center;color:var(--ink-4);font-size:13px;margin-bottom:14px;border:1px solid var(--line)}

/* objections */
.obj{border-top:1px solid var(--line);padding:18px 0}
.obj:first-child{border-top:none}
.obj__q{font-weight:600;font-size:15px;margin-bottom:6px}
.obj__q::before{content:"“";color:var(--ink-4)}
.obj__q::after{content:"”";color:var(--ink-4)}
.obj__a{color:var(--ink-2);font-size:14px}

.section-label{margin:36px 0 16px;font-size:18px;font-weight:600}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;font-size:13px;
  opacity:0;transition:all .3s var(--ease-out);pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- section-complete celebration (confetti + pop-in badge) ---- */
.celebrate-canvas{position:fixed;inset:0;z-index:120;pointer-events:none}
.celebrate-badge{position:fixed;left:50%;top:38%;z-index:121;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:min(88vw,420px);
  padding:34px 44px 30px;border-radius:22px;
  background:rgba(15,17,21,.94);border:1px solid var(--line-2);
  box-shadow:0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--teal-rgb),.10);backdrop-filter:blur(10px);
  transform:translate(-50%,-50%);animation:celebPop .55s cubic-bezier(.18,.9,.28,1.35) both}
.celebrate-badge.is-out{animation:celebOut .42s ease forwards}
.celebrate-badge__ring{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--blue));color:var(--grad-ink);
  box-shadow:0 16px 40px rgba(var(--teal-rgb),.45), 0 0 0 10px rgba(var(--teal-rgb),.12)}
.celebrate-badge__ring svg{width:42px;height:42px}
.celebrate-badge__title{font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.celebrate-badge__sub{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal)}
.celebrate-badge--big{padding:40px 52px 34px}
.celebrate-badge--big .celebrate-badge__ring{width:112px;height:112px}
.celebrate-badge--big .celebrate-badge__ring svg{width:54px;height:54px}
.celebrate-badge--big .celebrate-badge__title{font-size:32px}
@keyframes celebPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}55%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes celebOut{to{transform:translate(-50%,-58%) scale(.94);opacity:0}}
@media(prefers-reduced-motion:reduce){.celebrate-badge{animation:none}}

/* responsive */
@media(max-width:860px){
  .bcols{grid-template-columns:1fr}
}

/* ============================================================================
   Icons in headings, step hints, battle-card icon
============================================================================ */
.page__icon{display:inline-flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--blue);margin-bottom:14px}
.page__icon svg{width:20px;height:20px}
.page__head .mono{display:block}

.bcard h3{display:flex;align-items:center;gap:10px}
.bcard__icon{display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;
  background:var(--bg-3);border:1px solid var(--line);color:var(--blue)}
.bcard__icon svg{width:16px;height:16px}

/* quiz modal */
.quiz{display:flex;flex-direction:column;gap:20px}
.quiz-q__title{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px;margin-bottom:12px}
.quiz-q__n{flex:0 0 24px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;color:var(--grad-ink);background:var(--grad)}
.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-left:34px}
.quiz-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);font-size:14px;transition:all .15s var(--ease)}
.quiz-opt:hover{border-color:var(--line-2);color:var(--ink)}
.quiz-opt.is-sel{border-color:var(--teal);background:rgba(var(--teal-rgb),.07);color:var(--ink)}
.quiz-opt__mark{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);position:relative;transition:border-color .15s}
.quiz-opt.is-sel .quiz-opt__mark{border-color:var(--teal)}
.quiz-opt.is-sel .quiz-opt__mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad)}
.quiz-result{text-align:center;padding:24px 16px}
.quiz-result__badge{display:inline-flex;width:64px;height:64px;border-radius:50%;align-items:center;justify-content:center;margin-bottom:16px}
.quiz-result.is-pass .quiz-result__badge{background:var(--grad);color:var(--grad-ink)}
.quiz-result.is-fail .quiz-result__badge{background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink-3)}
.quiz-result__badge svg{width:30px;height:30px}
.quiz-result h3{font-size:22px;font-weight:600;margin-bottom:8px}
.quiz-result__score{font-size:16px;color:var(--ink-2)}
.quiz-result__score b{color:var(--ink)}
.quiz-result__sub{font-size:14px;color:var(--ink-3);margin-top:8px;max-width:42ch;margin-inline:auto}
.quiz-result__delta{color:var(--teal);font-family:var(--mono);font-size:13px}
.quiz-result.is-fail .quiz-result__badge svg{animation:none}

/* ---- review missed questions ---- */
.quiz-hint{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px 34px;padding:10px 12px;border-radius:10px;
  background:rgba(var(--blue-rgb),.08);border:1px solid rgba(var(--blue-rgb),.22);color:var(--ink-2);font-size:13px;line-height:1.5}
.quiz-hint svg{flex:0 0 16px;width:16px;height:16px;color:var(--blue);margin-top:1px}
.quiz-hint b{color:var(--ink);font-weight:600}
.quiz-q.is-resolved .quiz-q__n{background:linear-gradient(135deg,#34d399,#22DFDC)}
.quiz-q.is-resolved .quiz-hint{opacity:.5}
.quiz-opt__tag{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);color:#34d399}
.quiz-opt__tag svg{width:13px;height:13px}
.quiz-opt.is-correct{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.1);color:var(--ink)}
.quiz-opt.is-correct .quiz-opt__mark{border-color:#34d399}
.quiz-opt.is-correct .quiz-opt__mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#34d399}
.quiz-opt.is-wrong{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08);color:var(--ink)}
.quiz-opt.is-wrong .quiz-opt__mark{border-color:#f87171}
.quiz-opt.is-locked{cursor:default}
.quiz-opt.is-locked:hover{border-color:rgba(52,211,153,.55)}
.modal__note.is-good{color:#34d399;display:inline-flex;align-items:center}
.modal__note.is-good svg{width:14px;height:14px}

/* ============================================================================
   MODALS
============================================================================ */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,5,7,.66);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease;overflow-y:auto}
.modal-overlay.show{opacity:1}
.modal{position:relative;width:100%;max-width:520px;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.99);transition:transform .25s var(--ease-out);max-height:90vh;overflow-y:auto}
.modal-overlay.show .modal{transform:none}
.modal--md{max-width:600px}
.modal--lg{max-width:860px}
.modal--sm{max-width:440px}
.modal__foot.modal__foot--center{justify-content:center}

/* first-run welcome */
.welcome{text-align:center;padding:8px 6px 4px}
.welcome__icon{display:inline-flex;width:64px;height:64px;border-radius:18px;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--blue));color:var(--grad-ink);margin-bottom:18px}
.welcome__icon svg{width:30px;height:30px}
.welcome h2{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.welcome p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:44ch;margin-inline:auto}

/* guided tour: spotlight + popover */
#tour-root{position:fixed;inset:0;z-index:200}
.tour__spot{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,8,11,.74), 0 0 0 2px var(--teal), 0 0 40px rgba(var(--teal-rgb),.35);
  transition:top .32s var(--ease-out),left .32s var(--ease-out),width .32s var(--ease-out),height .32s var(--ease-out)}
.tour__pop{position:fixed;width:326px;max-width:calc(100vw - 28px);background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:14px;padding:18px 18px 15px;box-shadow:0 26px 70px rgba(0,0,0,.62);
  transition:top .32s var(--ease-out),left .32s var(--ease-out)}
.tour__step{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:8px}
.tour__pop h3{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.tour__pop p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tour__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.tour__skip{font-size:12px;color:var(--ink-4)}
.tour__skip:hover{color:var(--ink-2)}
.tour__nav{display:flex;gap:8px}
.modal__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);border:1px solid transparent;transition:all .2s ease}
.modal__close:hover{color:var(--ink);background:rgba(255,255,255,.05);border-color:var(--line)}
.modal__close svg{width:18px;height:18px}
.modal__head{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;padding-right:30px}
.modal__icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--grad-ink)}
.modal__icon svg{width:22px;height:22px}
.modal__head h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.modal__head p{color:var(--ink-3);font-size:14px;line-height:1.5}
.modal__foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:24px}
.modal__note{margin-right:auto;font-size:13px;color:var(--ink-3)}

/* dropzone */
.dropzone{border:2px dashed var(--line-2);border-radius:var(--radius);padding:40px 24px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-2);transition:all .2s var(--ease);background:var(--bg-2)}
.dropzone:hover{border-color:var(--blue);background:rgba(var(--blue-rgb),.04)}
.dropzone.is-over{border-color:var(--teal);background:rgba(var(--teal-rgb),.07);transform:scale(1.01)}
.dropzone svg{width:30px;height:30px;color:var(--blue);margin-bottom:4px}
.dropzone p{font-size:15px}
.dropzone .link{color:var(--blue);text-decoration:underline}
.dropzone__meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4)}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:18px}
.logo-thumb{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px;background:
  repeating-conic-gradient(var(--bg-2) 0% 25%, var(--bg-3) 0% 50%) 50%/16px 16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.logo-thumb img{max-width:100%;max-height:64px;object-fit:contain}
.logo-thumb__name{font-size:11px;color:var(--ink-3);font-family:var(--mono);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-thumb__del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,9,11,.7);color:var(--ink-2);opacity:0;transition:opacity .15s}
.logo-thumb:hover .logo-thumb__del{opacity:1}
.logo-thumb__del:hover{color:#ff6b6b}
.logo-thumb__del svg{width:13px;height:13px}

/* color rows */
.colors{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.color-row{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.color-swatch{flex:0 0 46px;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);background:none;cursor:pointer;padding:0}
.color-swatch::-webkit-color-swatch-wrapper{padding:3px}
.color-swatch::-webkit-color-swatch{border:none;border-radius:7px}
.color-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.color-label{background:transparent;border:none;color:var(--ink);font-size:14px;font-weight:600;padding:0;font-family:inherit}
.color-label:focus{outline:none}
.color-vals{display:flex;align-items:center;gap:12px}
.color-hex{width:200px;max-width:55%;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink-2);
  font-family:var(--mono);font-size:13px;padding:7px 10px}
.color-hex:focus{outline:none;border-color:var(--blue)}
.color-rgb{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.color-del{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-4);transition:all .2s}
.color-del:hover{color:#ff6b6b;background:rgba(255,107,107,.08)}
.color-del svg{width:15px;height:15px}

/* video modal */
.video-frame{aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line)}
.video-frame__ph{width:100%;height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  text-align:center;color:var(--ink-3);padding:24px;background:linear-gradient(135deg,var(--bg-3),var(--bg-1))}
.video-frame__ph svg{width:40px;height:40px;color:var(--blue)}
.video-frame__ph code{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--bg);padding:2px 6px;border-radius:5px}

@media(max-width:560px){
  .modal{padding:22px}
  .color-row{flex-wrap:wrap}
  .color-hex{max-width:none;width:100%}
}

/* ============================================================================
   "What's possible" case-study showcase (sits below the checklist, set apart)
============================================================================ */
.case-band{margin-top:44px}
/* labelled divider so it reads as a separate, featured section */
.case-band__sep{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.case-band__sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.case-band__sep .mono{display:inline-flex;align-items:center;gap:7px;color:var(--teal);white-space:nowrap}
.case-band__sep .mono svg{width:13px;height:13px}

.case{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;
  background:
    radial-gradient(520px 320px at 88% -20%, rgba(var(--blue-rgb),.16), transparent 70%),
    radial-gradient(480px 300px at 0% 120%, rgba(var(--teal-rgb),.12), transparent 70%),
    var(--bg-1);
  border:1px solid rgba(var(--teal-rgb),.22);border-radius:var(--radius-lg);
  padding:30px 32px;box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04)
}
/* gradient accent strip along the top edge */
.case::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.9}
.case__title{font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin-bottom:10px}
.case__blurb{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:50ch;margin-bottom:22px}
.case__stats{display:flex;gap:34px;flex-wrap:wrap}
.case__stat b{display:block;font-size:25px;font-weight:600;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.case__stat span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-top:5px;display:block}
.case__chart{position:relative}
.case__chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.case__cap{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4)}
.case__chip{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--teal);
  background:rgba(var(--teal-rgb),.08);border:1px solid rgba(var(--teal-rgb),.28);border-radius:999px;padding:5px 11px;white-space:nowrap}
.case__chip svg{width:13px;height:13px}
.case__chart .spark{width:100%;height:auto;display:block}
@media(max-width:820px){
  .case{grid-template-columns:1fr;gap:24px}
  .case__stats{gap:26px}
}

/* ============================================================================
   Compact "What's possible" card in the sidebar (preview placement)
============================================================================ */
/* fixed width = expanded content width, so the card is laid out at its final
   size immediately and never reshuffles while the sidebar animates open;
   the sidebar's overflow-x:hidden cleanly clips/reveals it as it widens */
#sidebarCase{margin:0 0 14px;width:calc(var(--sidebar-w) - 36px)}
#sidebarCase.is-hidden{display:none}
/* fade in over the hover-expand so the reveal reads as intentional */
.app.nav-collapsed .sidebar.is-expanded #sidebarCase{animation:fade .25s var(--ease-out)}
.navcase{
  position:relative;
  display:block;width:100%;text-align:left;cursor:pointer;
  background:
    radial-gradient(180px 120px at 100% 0%, rgba(var(--blue-rgb),.16), transparent 70%),
    linear-gradient(150deg, rgba(var(--teal-rgb),.10), transparent 60%),
    var(--bg-2);
  border:1px solid rgba(var(--teal-rgb),.22);border-radius:14px;padding:14px;
  transition:border-color .2s ease,transform .2s var(--ease),box-shadow .2s ease;
}
.navcase:hover{border-color:rgba(var(--teal-rgb),.45);transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.navcase__close{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-4);background:rgba(8,9,11,.5);transition:all .15s ease;z-index:2}
.navcase__close:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.navcase__close svg{width:14px;height:14px}
.navcase__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.navcase__eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:10px}
.navcase__eyebrow svg{width:12px;height:12px}
.navcase__chip{font-family:var(--mono);font-size:10px;color:var(--teal);
  background:rgba(var(--teal-rgb),.1);border:1px solid rgba(var(--teal-rgb),.28);border-radius:999px;padding:2px 7px;white-space:nowrap}
.navcase__spark{display:block}
/* fixed height so the card doesn't reflow as the sidebar animates open */
.navcase__spark .spark{width:100%;height:60px;display:block}
.navcase__stats{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.navcase__stats span{font-size:12px;color:var(--ink-3)}
.navcase__stats b{color:var(--ink);font-weight:600;font-size:13px}
.navcase__cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.navcase__cta svg{width:12px;height:12px}
@media(max-width:860px){#sidebarCase{display:none}}

/* ============================================================================
   Email merge tags (auto-injected brand + customer merge fields)
============================================================================ */
.merge{border-radius:5px;padding:1px 5px;font-style:normal}
.merge--brand{background:rgba(var(--teal-rgb),.16);color:var(--teal);font-weight:600}
.merge--field{background:rgba(255,255,255,.06);color:var(--ink-3);border:1px dashed var(--line-2)}
.merge--fill{background:rgba(232,180,90,.14);color:#e8b45a;border:1px dashed rgba(232,180,90,.45)}
.merge--note{display:inline;background:none;padding:0;color:var(--ink-4);font-style:italic;font-size:.92em}

/* email page legend + sequence groups */
.legend{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:14px}
.legend__item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
/* product pill tabs (Lite CRM / Full CRM / AI Zips) — stick to top while scrolling */
.tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  position:sticky;top:0;z-index:20;
  /* bleed the backdrop out to the main content edges */
  margin:0 calc(-1 * clamp(24px,5vw,72px)) 28px;
  padding:16px clamp(24px,5vw,72px);
  /* backdrop is invisible until the bar sticks to the top */
  background:transparent;border-bottom:1px solid transparent;
  transition:background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.tabs.is-stuck{
  background:rgba(8,9,11,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.tabs-sentinel{height:0;margin:0;padding:0}
.tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:500;
  color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);transition:color .18s ease}
.tab:hover{border-color:var(--line-2);color:var(--ink)}
.tab.is-active{background:var(--grad);color:var(--grad-ink);border-color:transparent;font-weight:600}
.tab__count{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.10);color:var(--ink-3)}
.tab.is-active .tab__count{background:rgba(6,24,26,.2);color:var(--grad-ink)}
/* sequence subsection — faint divider between */
.email-sub + .email-sub{border-top:1px solid var(--line);margin-top:26px;padding-top:26px}
.email-sub__head{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:8px}
.email-sub__desc{font-size:13.5px;color:var(--ink-3);line-height:1.5;max-width:68ch;margin-bottom:16px}
.email-group__count{color:var(--ink-4);text-transform:none;letter-spacing:0;margin-left:8px}

/* filled-in field value (read-only contexts like cards) */
.merge--done{background:rgba(var(--teal-rgb),.12);color:var(--ink);border-radius:5px;padding:1px 5px}
/* editable field inside the preview modal */
.merge--edit{display:inline-block;padding:1px 7px;border-radius:5px;cursor:text;outline:none;
  background:rgba(232,180,90,.14);color:#e8b45a;border:1px dashed rgba(232,180,90,.5);transition:all .15s ease}
.merge--edit:empty::before{content:attr(data-label);color:var(--ink-4)}
.merge--edit:hover{border-color:rgba(232,180,90,.8)}
.merge--edit:focus{border-style:solid;border-color:var(--teal);background:rgba(var(--teal-rgb),.08);color:var(--ink)}
.merge--edit.is-filled{background:rgba(var(--teal-rgb),.12);color:var(--ink);border:1px solid rgba(var(--teal-rgb),.4)}
.email-edit-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:18px}
.email-edit-hint svg{width:15px;height:15px;color:var(--blue);flex:0 0 auto}

/* full email preview modal */
.email-view__subject{font-size:16px;color:var(--ink);font-weight:500;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.email-view__label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);margin-bottom:6px;font-weight:400}
.email-view__body{white-space:pre-wrap;font-size:14.5px;line-height:1.65;color:var(--ink-2);max-height:58vh;overflow:auto;padding-right:6px}

/* ============================================================================
   Launch-week scheduler modal
============================================================================ */
.sched__start{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sched__start label{font-size:14px;color:var(--ink-2);font-weight:500}
.sched__start input[type=date]{background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;color-scheme:dark}
.sched__start input[type=date]:focus{outline:none;border-color:var(--teal)}
.sched{display:flex;flex-direction:column;gap:8px}
.sched__day{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px}
.sched__day:hover{border-color:var(--line-2)}
.sched__badge{flex:0 0 76px;display:flex;flex-direction:column;gap:1px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
.sched__badge small{font-size:10px;font-weight:400;letter-spacing:.03em;color:var(--ink-3);text-transform:uppercase}
.sched__title{flex:1;min-width:0;background:transparent;border:none;color:var(--ink);font-size:14px;font-family:inherit;padding:6px 0}
.sched__title:focus{outline:none}
.sched__gcal{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;
  color:var(--ink-3);border:1px solid var(--line);transition:all .15s}
.sched__gcal:hover{color:var(--teal);border-color:rgba(var(--teal-rgb),.4);background:rgba(var(--teal-rgb),.06)}
.sched__gcal svg{width:15px;height:15px}

/* ============================================================================
   Launch-day guide modal
============================================================================ */
.guide{display:flex;flex-direction:column;gap:20px}
.guide__sec{}
.guide__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:10px}
.guide__label svg{width:14px;height:14px}
.guide__list{list-style:none;display:flex;flex-direction:column;gap:8px}
.guide__list li{position:relative;padding-left:18px;font-size:14px;color:var(--ink-2);line-height:1.5}
.guide__list li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.guide__tip{display:flex;gap:10px;align-items:flex-start;background:rgba(var(--teal-rgb),.06);
  border:1px solid rgba(var(--teal-rgb),.2);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.guide__tip svg{flex:0 0 auto;width:16px;height:16px;color:var(--teal);margin-top:1px}
.guide__tip b{color:var(--ink)}

/* editable day-title field in the scheduler */
.sched__field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:9px;padding:0 12px;cursor:text;
  transition:border-color .15s ease,background .15s ease}
.sched__field:hover{border-color:var(--ink-4)}
.sched__field:focus-within{border-color:var(--teal);background:rgba(var(--teal-rgb),.04)}
.sched__field > svg{flex:0 0 auto;width:14px;height:14px;color:var(--ink-4)}
.sched__field:focus-within > svg{color:var(--teal)}
.sched__title{flex:1;min-width:0;background:transparent;border:none;color:var(--ink);font-size:14px;font-family:inherit;padding:9px 0}
.sched__title:focus{outline:none}

/* ============================================================================
   Paid Ads & Copy page
============================================================================ */
.tab svg{width:15px;height:15px;flex:0 0 auto}
/* non-sticky plain pill row (used on the Ads page) */
.tabs--plain{position:static;margin:0 0 24px;padding:0;background:none;border-bottom:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.tabs--lg .tab{padding:11px 18px;font-size:14px}

/* labeled filter row — Category + Format side by side, segmented-control style
   (intentionally lighter than the bold main pills above) */
.ad-filters{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:20px}
.ad-filter{display:flex;align-items:center;gap:10px}
.ad-filter__label{color:var(--ink-4)}
.segment{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.segment__btn{padding:6px 13px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ink-3);
  transition:color .15s ease,background .15s ease}
.segment__btn:hover{color:var(--ink)}
.segment__btn.is-active{background:var(--bg-3);color:var(--teal);box-shadow:0 1px 2px rgba(0,0,0,.3)}
@media(max-width:560px){.ad-filters{gap:14px}.ad-filter{width:100%}}

/* ad graphics grid */
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:6px}
.adcard{display:flex;flex-direction:column;gap:10px}
.adcard__img{display:block;width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);cursor:zoom-in;padding:0;line-height:0}
.adcard__img img{width:100%;height:auto;display:block;transition:transform .25s var(--ease)}
.adcard__img:hover{border-color:var(--line-2)}
.adcard__img:hover img{transform:scale(1.03)}
.adcard__actions{display:flex;gap:8px;align-items:center}
/* single-format download = blue icon-only circle */
.adcard__dl{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:var(--grad-ink);transition:transform .2s var(--ease),box-shadow .2s ease}
.adcard__dl:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--blue-rgb),.4)}
.adcard__dl svg{width:16px;height:16px}
/* all-formats = ghost text button filling the rest */
.adcard__all{flex:1;justify-content:center;padding-left:10px;padding-right:10px}

/* swipe-copy accordion */
.swipe{display:flex;flex-direction:column;gap:10px}
.swipe__item{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden;transition:border-color .2s ease}
.swipe__item.is-open{border-color:var(--line-2)}
.swipe__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink);text-align:left}
.swipe__head:hover{background:rgba(255,255,255,.03)}
.swipe__meta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.swipe__meta svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.swipe__item.is-open .swipe__meta svg{transform:rotate(180deg);color:var(--teal)}
.swipe__body{display:none;padding:0 18px 18px}
.swipe__item.is-open .swipe__body{display:block;animation:fade .3s var(--ease-out)}
.swipe__blocks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swipe__block{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px}
.swipe__block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.swipe__label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.swipe__text{white-space:pre-wrap;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-2);max-height:220px;overflow:auto}
@media(max-width:900px){.swipe__blocks{grid-template-columns:1fr}}

/* slide deck card */
.deckcard{display:flex;gap:16px;align-items:flex-start}
.deckcard__icon{flex:0 0 48px;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--grad-ink)}
.deckcard__icon svg{width:24px;height:24px}
.deckcard__body{flex:1;min-width:0}
.deckcard__note{color:var(--ink-3);font-size:13.5px;line-height:1.5;margin:8px 0 14px}

/* ad image preview modal */
.img-view{border-radius:var(--radius);overflow:hidden;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;max-height:64vh}
.img-view img{max-width:100%;max-height:64vh;object-fit:contain;display:block}

/* ============================================================================
   Social Proof Vault — testimonial cards
============================================================================ */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tcard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s ease}
.tcard:hover{border-color:var(--line-2)}
.tcard__stars{display:flex;gap:3px;color:#E8B45A}
.tcard__stars svg{width:15px;height:15px}
.tcard__quote{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.tcard__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.tcard__person{display:flex;align-items:center;gap:12px}
.tcard__photo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--line);cursor:zoom-in;flex:0 0 auto}
.tcard__mono{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:600;color:var(--teal);background:rgba(var(--teal-rgb),.1);border:1px solid rgba(var(--teal-rgb),.25)}
.tcard__name{display:block;font-weight:600;font-size:14px;color:var(--ink)}
.tcard__co{font-size:12.5px;color:var(--ink-3)}
.tcard__actions{display:flex;gap:8px;align-items:center}
.tcard__copy{flex:1;justify-content:center}
.tcard__dl{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:var(--grad-ink);transition:transform .2s var(--ease),box-shadow .2s ease}
.tcard__dl:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--blue-rgb),.4)}
.tcard__dl svg{width:16px;height:16px}

/* ============================================================================
   Partner Resource Hub — "next step" CTA banner (checklist page)
============================================================================ */
.hub-cta{display:flex;align-items:center;gap:18px;margin-top:28px;padding:22px 24px;border-radius:var(--radius-lg);
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(var(--blue-rgb),.14), transparent 70%),
    linear-gradient(120deg, rgba(var(--teal-rgb),.08), transparent 60%),
    var(--bg-2);
  border:1px solid rgba(var(--teal-rgb),.22);transition:border-color .2s ease,transform .2s var(--ease),box-shadow .2s ease}
.hub-cta:hover{border-color:rgba(var(--teal-rgb),.45);transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.hub-cta__icon{flex:0 0 48px;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--grad-ink)}
.hub-cta__icon svg{width:22px;height:22px}
.hub-cta__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hub-cta__text .mono{color:var(--teal)}
.hub-cta__title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.hub-cta__desc{font-size:14px;color:var(--ink-3);line-height:1.5}
.hub-cta__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  font-size:14px;font-weight:600;background:var(--grad);color:var(--grad-ink);white-space:nowrap}
.hub-cta__btn svg{width:15px;height:15px}
@media(max-width:680px){.hub-cta{flex-direction:column;align-items:flex-start;gap:14px}.hub-cta__btn{width:100%;justify-content:center}}

/* ============================================================================
   BRANDED TEMPLATES (auto-branding POC)
============================================================================ */
/* control bar: current brand kit + quick edit, with the explainer note inside */
.bt-bar{display:flex;flex-direction:column;gap:14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:22px}
.bt-bar__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bt-bar__brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bt-bar__logo{height:30px;display:flex;align-items:center}
.bt-bar__logo img{height:30px;width:auto;max-width:160px;object-fit:contain;filter:brightness(0) invert(1)}
.bt-bar__cols{display:inline-flex;gap:6px}
.bt-swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.bt-bar__status{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px}
.bt-bar__status.is-ready{color:#34d399}
.bt-bar__status svg{width:14px;height:14px}
.bt-bar__actions{display:flex;gap:8px;flex-wrap:wrap}
.bt-bar__note{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;padding-top:14px;
  border-top:1px solid var(--line);display:flex;gap:8px;align-items:flex-start}
.bt-bar__note svg{width:16px;height:16px;color:var(--teal);flex:0 0 16px;margin-top:2px}

/* preview grid */
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.bt-card{background:var(--bg-1);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bt-frame{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#08090b}
.bt-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid var(--line)}
.bt-card__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.bt-card__meta b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-card__meta span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4)}

/* the 1080×1080 canvas — designed at true size, scaled down for preview via JS */
.bt-canvas{width:1080px;height:1080px;position:relative;overflow:hidden;transform-origin:top left;
  font-family:var(--sans);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  padding:96px;box-sizing:border-box}
.bt-canvas .bt-top{display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:2}
.bt-logo{height:72px;width:auto;max-width:440px;object-fit:contain}
.bt-wordmark{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1}
/* knockout the uploaded logo to a single legible color per background tone:
   white on dark canvases, near-black on light ones (works for SVG + raster) */
.bt-tone-dark .bt-logo{filter:brightness(0) invert(1)}
.bt-tone-light .bt-logo{filter:brightness(0)}
.bt-tone-dark .bt-wordmark{color:#fff}
.bt-tone-light .bt-wordmark{color:var(--grad-ink)}
.bt-eyebrow{font-family:var(--mono);font-size:26px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.bt-mid{z-index:2}
.bt-headline{font-size:82px;line-height:1.04;font-weight:700;letter-spacing:-.025em;margin:0;max-width:16ch;text-wrap:balance}
.bt-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:16px;font-size:32px;font-weight:600;
  padding:26px 44px;border-radius:999px;z-index:2;white-space:nowrap}
.bt-cta .bt-arrow{font-size:34px;line-height:1;flex:0 0 auto}

/* spotlight — dark, brand glow, gradient CTA. headline sits high so it clears
   the circle photo below; CTA is pushed to the bottom. */
.bt-spotlight{background:radial-gradient(130% 100% at 100% 0%, #14191f, #08090b 62%);justify-content:flex-start}
.bt-spotlight .bt-mid{margin-top:30px}
.bt-spotlight .bt-cta{margin-top:auto}
.bt-spotlight .bt-glow{position:absolute;width:760px;height:760px;right:-220px;top:-240px;border-radius:50%;
  background:var(--brand);opacity:.32;filter:blur(40px);z-index:0}
.bt-spotlight .bt-photo{position:absolute;width:820px;height:820px;right:-260px;bottom:-280px;border-radius:50%;
  background:linear-gradient(180deg,rgba(8,9,11,.35),rgba(8,9,11,.55)),url('assets/images/Templates/home-modern.jpg') center/cover;
  border:5px solid var(--brand);box-sizing:border-box;z-index:1;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.bt-spotlight .bt-eyebrow{color:var(--brand)}
.bt-spotlight .bt-headline{color:#fff}
.bt-spotlight .bt-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--grad-ink)}

/* gradient — full brand wash with a subtle skyline texture, tone-aware ink */
.bt-gradient{background:linear-gradient(140deg,var(--brand),var(--brand-2))}
.bt-gradient .bt-bg{position:absolute;inset:0;z-index:0;opacity:.16;
  background:url('assets/images/Templates/suburb-capecod.jpg') center/cover}
.bt-gradient .bt-eyebrow{opacity:.72}
.bt-gradient.bt-tone-light .bt-eyebrow,.bt-gradient.bt-tone-light .bt-headline{color:var(--grad-ink)}
.bt-gradient.bt-tone-light .bt-cta{background:#08090b;color:#fff}
.bt-gradient.bt-tone-dark .bt-eyebrow,.bt-gradient.bt-tone-dark .bt-headline{color:#fff}
.bt-gradient.bt-tone-dark .bt-cta{background:#fff;color:#06181a} /* white bg → always dark ink */

/* stat — dark, giant gradient number, lifestyle photo fading in from the right */
.bt-stat{background:radial-gradient(130% 100% at 0% 100%, #14191f, #08090b 60%)}
.bt-stat .bt-side{position:absolute;right:0;top:0;width:54%;height:100%;z-index:0;
  background:
    linear-gradient(90deg,#08090b 1%,rgba(8,9,11,.5) 42%,rgba(8,9,11,.32) 100%),
    linear-gradient(180deg,rgba(8,9,11,.6),transparent 38%),
    url('assets/images/Templates/neighborhood.jpg') center/cover}
/* white (not brand color) — it sits over the photo, so it needs max contrast */
.bt-stat .bt-eyebrow{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.bt-stat .bt-statnum{font-size:240px;line-height:.9;font-weight:800;letter-spacing:-.03em;
  display:inline-block;padding-right:.12em;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bt-stat .bt-statlabel{font-size:40px;line-height:1.25;font-weight:500;color:#c8ccd2;margin-top:18px;max-width:17ch;text-wrap:balance}
.bt-stat .bt-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--grad-ink)}

/* shared: logo pinned to the right edge of the top row (needs canvas-scoped
   specificity to beat the base .bt-canvas .bt-top rule) */
.bt-canvas .bt-top--right{justify-content:flex-end}

/* hero — full-bleed photo + bottom scrim; logo top-right, content bottom-left */
.bt-hero .bt-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(0deg,#08090b 4%,rgba(8,9,11,.35) 44%,rgba(8,9,11,.28) 100%),
  linear-gradient(180deg,rgba(8,9,11,.5),transparent 30%),
  url('assets/images/Templates/home-craftsman.jpg') center/cover}
.bt-hero .bt-top,.bt-hero .bt-foot{z-index:2}
.bt-hero .bt-foot{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.bt-hero .bt-eyebrow{color:var(--brand)}
.bt-hero .bt-headline{color:#fff;max-width:18ch}
.bt-hero .bt-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--grad-ink)}

/* split — clean photo on the left, a solid dark panel over the right with a
   subtle drop shadow at the seam (no fade); wider column, smaller headline */
.bt-split{background:#0b0d10}
.bt-split .bt-half{position:absolute;left:0;top:0;width:46%;height:100%;z-index:0;
  background:url('assets/images/Templates/home-brick.jpg') center/cover}
.bt-split .bt-panel{position:absolute;right:0;top:0;width:57%;height:100%;z-index:1;
  background:radial-gradient(130% 120% at 100% 38%, #161b21, #0b0d10 72%);
  box-shadow:-26px 0 55px rgba(0,0,0,.6)}
.bt-split .bt-top,.bt-split .bt-mid,.bt-split .bt-cta{z-index:2}
.bt-split .bt-mid{max-width:520px;margin-left:auto;text-align:right}
.bt-split .bt-eyebrow{display:block;margin-bottom:18px;color:var(--brand)}
.bt-split .bt-headline{font-size:58px;color:#fff}
.bt-split .bt-cta{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--grad-ink)}

/* quote — centered statement, subtle full-bleed photo behind */
.bt-quote{justify-content:center;align-items:center;text-align:center}
.bt-quote .bt-bg{position:absolute;inset:0;z-index:0;opacity:.15;background:
  linear-gradient(180deg,rgba(8,9,11,.45),rgba(8,9,11,.45)),
  url('assets/images/Templates/home-wood.jpg') center/cover}
.bt-quote .bt-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:32px;max-width:84%}
.bt-quote .bt-logo{height:62px}
.bt-quote .bt-eyebrow{color:var(--brand)}
.bt-quote .bt-headline{color:#fff;max-width:19ch;margin:0}
.bt-quote .bt-cta{align-self:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--grad-ink)}

/* ============================================================================
   Gradient fringe fix — keep LAST in the file.
   `background: var(--grad)` sizes the gradient tile to the padding box and
   backgrounds repeat by default, so the tile wraps under the 1px transparent
   border and paints a fringe of the opposite gradient end around the edges.
   The `background` shorthand resets this longhand, hence the !important.
============================================================================ */
.btn,.step__btn,.step__icon,.tab,.stage__num,.phase__num,.adcard__dl,.tcard__dl,
.hub-cta__btn,.modal__icon,.welcome__icon,.celebrate-badge__ring,.bt-cta,.navcase__cta{
  background-origin:border-box !important}