/* ============================================================================
   Realeflow Partner Plan Portal — styles
   Reskinned to Realeflow brand (tokens lifted from realeflow.com, matching
   the Launch Kit): dark surfaces, teal→blue gradient, Geist / Geist Mono.
============================================================================ */
:root{
  --teal:#22DFDC;
  --blue:#8bc9ee;
  --teal-rgb:34,223,220;
  --blue-rgb:139,201,238;
  --gold:#E8C56E;
  --gold-rgb:232,197,110;
  --slate:#8B95A5;
  --slate-rgb:139,149,165;
  --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;
  --danger:#FF7A7A;
  --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));
}

*{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}
input{font-family:inherit}
h1,h2,h3,h4{font-weight:600}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.muted{color:var(--ink-3)}

.eyebrow{
  font-family:var(--mono);
  color:var(--ink-3);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:500;
  display:inline-block;
}
.eyebrow.light{color:var(--teal)}

/* Buttons --------------------------------------------------------------- */
.primary-button,.secondary-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:600;min-height:44px;
  transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease,border-color .2s ease,opacity .15s ease;
}
.primary-button{
  background:var(--grad);
  color:var(--grad-ink);
}
.primary-button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 30px rgba(var(--teal-rgb),.28);
}
.primary-button:disabled{opacity:.35;cursor:not-allowed}
.secondary-button{
  color:var(--ink);
  border:1px solid var(--line-2);
  background:transparent;
}
.secondary-button:hover{background:rgba(255,255,255,.05);transform:translateY(-1px)}
.danger-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:600;min-height:44px;
  color:var(--danger);
  background:rgba(255,122,122,.1);
  border:1px solid rgba(255,122,122,.35);
  transition:transform .2s var(--ease),background .2s ease;
}
.danger-button:hover{background:rgba(255,122,122,.18);transform:translateY(-1px)}
.full{width:100%}

/* ============================================================================
   AUTH
============================================================================ */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(420px,1.08fr) minmax(500px,.92fr);
  background:var(--bg);
}
.auth-story{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:100vh;
  padding:48px 64px 36px;
  background:
    radial-gradient(1000px 520px at 78% -10%,rgba(var(--teal-rgb),.16),transparent 62%),
    radial-gradient(800px 560px at 6% 112%,rgba(var(--blue-rgb),.13),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),
    var(--bg);
}
.auth-story::before,.auth-story::after{
  content:"";position:absolute;border:1px solid var(--line);border-radius:999px;
}
.auth-story::before{width:620px;height:620px;bottom:-210px;right:-310px}
.auth-story::after{width:420px;height:420px;bottom:-110px;right:-210px}
.auth-logo{
  position:relative;z-index:1;
  width:210px;height:auto;
  object-fit:contain;object-position:left center;
}
.auth-story-copy{position:relative;z-index:1;max-width:650px;margin:auto 0}
.auth-story h1{
  letter-spacing:-.04em;
  max-width:650px;
  margin:20px 0 22px;
  font-size:clamp(42px,4.8vw,72px);
  line-height:1.02;
  font-weight:600;
}
.auth-story-copy>p{color:var(--ink-2);max-width:560px;font-size:18px;line-height:1.62}
.auth-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.auth-proof div{
  display:flex;flex-direction:column;gap:7px;
  padding:17px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.auth-proof strong{font-size:15px}
.auth-proof span{color:var(--ink-3);font-size:12px;line-height:1.4}
.confidential{position:relative;z-index:1;color:var(--ink-4);margin:0}

.auth-panel{
  display:grid;place-items:center;
  padding:54px;
  background:var(--bg-1);
  border-left:1px solid var(--line);
}
.auth-card{width:min(520px,100%)}
.auth-card h2{letter-spacing:-.02em;margin:14px 0 10px;font-size:32px;line-height:1.12}
.auth-card>p{margin:0;font-size:15px}
.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;
  margin:30px 0 26px;
  padding:4px;
}
.auth-tabs button{
  color:var(--ink-3);
  border-radius:999px;
  padding:10px;
  font-weight:600;font-size:13px;
  transition:color .2s ease,background .2s ease;
}
.auth-tabs button.active{color:var(--grad-ink);background:var(--grad)}
.auth-form{display:flex;flex-direction:column;gap:17px}
.auth-form label,.plan-name-field{
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);
  color:var(--ink-3);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-form input,.plan-name-field input{
  width:100%;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:13px 14px;
  font-size:14px;
  transition:border-color .2s,box-shadow .2s;
}
.auth-form input::placeholder,.plan-name-field input::placeholder{color:var(--ink-4)}
.auth-form input:focus,.plan-name-field input:focus{
  border-color:var(--teal);
  outline:none;
  box-shadow:0 0 0 4px rgba(var(--teal-rgb),.14);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-error{
  color:var(--danger);
  background:rgba(255,122,122,.08);
  border:1px solid rgba(255,122,122,.25);
  border-radius:10px;
  padding:11px 13px;
  font-size:13px;
  font-family:var(--sans);
  text-transform:none;letter-spacing:0;
}
.prototype-note{
  color:var(--ink-4);text-align:center;
  margin-top:18px;font-size:11px;
}

/* ============================================================================
   HEADER
============================================================================ */
.portal-shell{min-height:100vh;background:var(--bg)}
.portal-header{
  display:flex;justify-content:space-between;align-items:center;
  height:68px;padding:0 36px;
  background:rgba(8,9,11,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.portal-header>div{display:flex;align-items:center;gap:18px}
.portal-header img{width:145px;height:34px;object-fit:contain;object-position:left center}
.portal-header>div:first-child>span{
  font-family:var(--mono);
  color:var(--ink-3);
  border-left:1px solid var(--line-2);
  padding-left:18px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.header-account{display:flex;align-items:center;gap:14px}
.header-account span{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.header-account strong{font-size:12px}
.header-account small{color:var(--ink-3);font-size:10px}
.header-account button{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:7px 14px;
  font-size:11px;
  color:var(--ink-2);
  transition:background .2s ease;
}
.header-account button:hover{background:rgba(255,255,255,.06)}

/* ============================================================================
   DASHBOARD
============================================================================ */
.dashboard-wrap{width:min(1220px,100% - 48px);margin:0 auto;padding:58px 0 80px}
.dashboard-hero{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:30px;margin-bottom:34px;
}
.dashboard-hero h1{letter-spacing:-.03em;margin:10px 0 8px;font-size:42px}
.dashboard-hero p{max-width:670px;color:var(--ink-3);line-height:1.55}

.empty-state{
  width:100%;min-height:330px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px;
  color:var(--ink-3);
  background:var(--bg-1);
  border:2px dashed var(--line-2);
  border-radius:var(--radius-lg);
  transition:border-color .2s ease,background .2s ease;
}
.empty-state:hover{border-color:var(--teal);background:var(--bg-2)}
.empty-state strong{color:var(--ink);font-size:20px}
.empty-icon{
  display:grid;place-items:center;
  width:50px;height:50px;margin-bottom:4px;
  color:var(--grad-ink);
  background:var(--grad);
  border-radius:50%;
  font-size:27px;
}

.plan-grid,.submitted-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-summary-card{
  --accent-rgb:var(--slate-rgb);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:255px;padding:23px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.plan-summary-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 190px at 88% -8%,rgba(var(--accent-rgb),.14),transparent 62%);
}
.plan-summary-card.blue{--accent-rgb:var(--blue-rgb)}
.plan-summary-card.teal{--accent-rgb:var(--teal-rgb)}
.plan-summary-card.gold{--accent-rgb:var(--gold-rgb)}
/* Tier reads as a solid filled badge; status reads as a dot indicator —
   two distinct species so they never blur together */
.plan-summary-card .tier-pill{
  color:var(--grad-ink);
  background:rgb(var(--accent-rgb));
  border-color:transparent;
  font-weight:600;
}
.plan-card-top{display:flex;justify-content:space-between;align-items:center}
.tier-pill{
  font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;
  padding:5px 10px;font-size:10px;font-weight:500;
  color:var(--ink-2);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase;
  font-size:9px;font-weight:500;
}
.status-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.status-pill.ready{color:var(--teal)}
.status-pill.draft{color:var(--ink-3)}
.plan-summary-card h3{letter-spacing:-.02em;margin:20px 0;font-size:24px}
.plan-card-price,.plan-card-profit{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);
  padding:11px 0;font-size:11px;color:var(--ink-3);
}
.plan-card-price strong{color:var(--ink);font-size:22px;font-weight:600}
.plan-card-price small{color:var(--ink-3);margin-left:3px;font-size:10px;font-weight:400}
.plan-card-profit strong{color:var(--teal);font-weight:600}
.plan-card-toggle{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 0;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;
  transition:color .15s ease;
}
.plan-card-toggle:hover{color:var(--ink)}
.plan-card-toggle b{font-weight:400;font-size:11px}
.plan-card-details{display:flex;flex-direction:column;padding-bottom:8px}
.plan-card-details .summary-line{font-size:11px;padding:7px 0}
.plan-card-details .summary-line:last-child{border-bottom:none}
.plan-card-actions{
  margin-top:auto;padding-top:13px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.plan-card-open{
  color:var(--blue);
  text-align:left;
  font-size:12px;font-weight:600;
  transition:color .2s ease;
}
.plan-card-open:hover{color:var(--teal)}
.plan-card-delete{
  flex:none;
  color:var(--ink-4);
  font-size:11px;font-weight:500;
  transition:color .2s ease;
}
.plan-card-delete:hover{color:var(--danger)}
.add-plan-card{
  min-height:255px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
  border:2px dashed var(--line-2);
  border-radius:var(--radius);
  transition:border-color .2s ease,background .2s ease;
}
.add-plan-card:hover{border-color:var(--teal);background:var(--bg-1)}
.add-plan-card span{
  display:grid;place-items:center;
  width:42px;height:42px;
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  border-radius:50%;
  font-size:24px;
}
.final-submit-bar{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:30px;padding:22px 24px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.final-submit-bar div{display:flex;flex-direction:column;gap:4px}
.final-submit-bar span{color:var(--ink-3);font-size:12px}

/* Submitted state */
.submitted-panel{
  text-align:center;
  padding:40px 0;
}
.success-mark{
  display:grid;place-items:center;
  width:64px;height:64px;margin:0 auto 22px;
  color:var(--grad-ink);
  background:var(--grad);
  border-radius:50%;
  font-size:30px;font-weight:700;
}
.submitted-panel h1{letter-spacing:-.03em;margin:12px 0 10px;font-size:38px}
.submitted-panel>p{color:var(--ink-3);max-width:560px;margin:0 auto}
.submitted-grid{margin:36px 0;text-align:left}
.submitted-actions{display:flex;justify-content:center;gap:12px}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(4,5,6,.72);
  backdrop-filter:blur(6px);
  padding:24px;
}
.modal{
  width:min(480px,100%);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal h2{margin:12px 0 10px;font-size:26px;letter-spacing:-.02em}
.modal p{color:var(--ink-3);font-size:14px}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}

/* ============================================================================
   BUILDER
============================================================================ */
.builder-layout{
  display:grid;
  grid-template-columns:250px minmax(560px,1fr) 320px;
  align-items:stretch;
  min-height:calc(100vh - 68px);
}
.builder-nav{
  display:flex;flex-direction:column;
  border-right:1px solid var(--line);
  background:var(--bg-1);
  padding:28px 22px;
  height:calc(100vh - 68px);
  position:sticky;top:68px;
  overflow-y:auto;
}
.back-link{
  color:var(--blue);
  align-self:flex-start;
  margin-bottom:24px;
  font-size:12px;font-weight:600;
  transition:color .2s ease;
}
.back-link:hover{color:var(--teal)}
.plan-name-field{border-bottom:1px solid var(--line);padding-bottom:25px}
.plan-name-field input{font-size:14px;font-weight:600}
.builder-nav nav{display:flex;flex-direction:column;gap:4px;padding:24px 0}
.builder-nav nav button{
  display:flex;align-items:center;gap:10px;
  color:var(--ink-3);
  text-align:left;
  border-radius:10px;
  padding:9px 8px;
  font-size:12px;font-weight:500;
  transition:background .2s ease,color .2s ease;
}
.builder-nav nav button span{
  display:grid;place-items:center;flex:none;
  width:23px;height:23px;
  font-family:var(--mono);font-size:9px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:50%;
}
.builder-nav nav button.active{color:var(--ink);background:var(--bg-2)}
.builder-nav nav button.active span{border-color:transparent;color:var(--grad-ink);background:var(--grad)}
.builder-nav nav button.complete{color:var(--ink-2)}
.builder-nav nav button.complete span{
  border-color:rgba(var(--teal-rgb),.4);
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
}
.nav-help{
  margin-top:auto;padding:15px;
  color:var(--ink-3);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.nav-help strong{color:var(--ink-2);font-size:11px}
.nav-help p{margin:6px 0 0;font-size:10px;line-height:1.5}

.builder-main{min-width:0;padding:52px clamp(34px,4vw,70px) 80px}
.builder-section{width:min(920px,100%);margin:0 auto}
.step-heading{display:grid;grid-template-columns:42px 1fr;gap:14px;margin-bottom:34px}
.step-heading>span{
  display:grid;place-items:center;
  width:38px;height:38px;
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  border:1px solid rgba(var(--teal-rgb),.25);
  border-radius:50%;
  font-size:11px;
}
.step-heading h1{letter-spacing:-.03em;margin:0 0 9px;font-size:clamp(28px,3vw,38px);line-height:1.08}
.step-heading p{max-width:720px;color:var(--ink-3);font-size:14px;line-height:1.6}
/* Sticky action bar: floats at the bottom of the viewport while the step
   scrolls, settles into the flow at the end of the page */
.section-actions{
  position:sticky;bottom:14px;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:34px;
  padding:12px 16px;
  background:rgba(14,16,20,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.section-actions.right{justify-content:flex-end}

/* Step 1: packages — compact selector rows; each tier carries its own tinted
   wash + accent price, deepening as tiers ascend */
.package-rows{display:flex;flex-direction:column;gap:10px}
.package-row{
  --accent-rgb:var(--slate-rgb);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(150px,175px) 1fr auto;
  align-items:center;column-gap:20px;
  padding:16px 20px;
  text-align:left;
  background:
    linear-gradient(90deg,rgba(var(--accent-rgb),.1),transparent 55%),
    var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease;
}
.package-row.blue{--accent-rgb:var(--blue-rgb)}
.package-row.teal{--accent-rgb:var(--teal-rgb)}
.package-row.gold{--accent-rgb:var(--gold-rgb)}
.package-row:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.45)}
.package-row.selected{
  border-color:rgba(var(--accent-rgb),.7);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 10px 30px rgba(0,0,0,.3);
}
.selection-dot{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;
  font-size:10px;
  color:var(--grad-ink);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:50%;
}
.selected .selection-dot{border-color:transparent;background:rgb(var(--accent-rgb))}
.card-eyebrow{
  font-family:var(--mono);
  color:rgba(var(--accent-rgb),.95);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.package-row-name{display:flex;flex-direction:column;gap:3px}
.package-row-name strong{font-size:20px;letter-spacing:-.02em;font-weight:600}
.package-row-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.package-row-copy>span:first-child{color:var(--ink-3);font-size:12px;line-height:1.5}
.best-fit{color:var(--ink-2);font-size:11px;line-height:1.45}
.best-fit b{color:var(--ink)}
.package-row-price{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  text-align:right;
}
.package-row-price strong{font-size:20px;color:rgb(var(--accent-rgb));font-weight:600;white-space:nowrap}
.package-row-price small{color:var(--ink-3);font-size:11px;font-weight:400}
.module-allowance{
  margin-top:3px;
  font-family:var(--mono);
  color:var(--ink-2);
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;
}

/* Module primer (package step): collapsible menu of every module */
.module-primer{
  margin-top:14px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.primer-toggle{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 20px;
  text-align:left;
  transition:background .15s ease;
}
.primer-toggle:hover{background:rgba(255,255,255,.03)}
.primer-toggle>span{display:flex;flex-direction:column;gap:2px}
.primer-toggle strong{font-size:13px}
.primer-toggle small{color:var(--ink-3);font-size:11px}
.primer-toggle>b{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  border-radius:50%;
  font-size:15px;font-weight:400;
}
.primer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4px 20px 20px}
.primer-grid header{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.primer-grid h4{font-size:13px}
.primer-grid header span{
  font-family:var(--mono);
  color:var(--ink-4);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}
.primer-grid section.premium h4{color:var(--teal)}
.primer-item{
  width:100%;
  display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:10px;row-gap:1px;
  padding:9px 10px;
  text-align:left;
  border-radius:10px;
  transition:background .15s ease;
}
.primer-item:hover{background:rgba(255,255,255,.04)}
.primer-item .primer-name{
  grid-column:1;grid-row:1;
  font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.primer-item .primer-name small{
  font-family:var(--mono);
  color:var(--gold);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.primer-item .primer-desc{
  grid-column:1;grid-row:2;
  color:var(--ink-3);font-size:11px;line-height:1.45;
}
.primer-item>b{
  grid-column:2;grid-row:1 / span 2;
  color:var(--ink-4);font-weight:400;font-size:13px;
  transition:color .15s ease,transform .15s ease;
}
.primer-item:hover>b{color:var(--teal);transform:translateX(2px)}

/* Step 2: modules */
.module-selection-message{
  margin-bottom:22px;padding:16px 18px;
  background:rgba(var(--blue-rgb),.07);
  border:1px solid rgba(var(--blue-rgb),.2);
  border-radius:var(--radius);
}
.module-selection-message.complete{
  background:rgba(var(--teal-rgb),.07);
  border-color:rgba(var(--teal-rgb),.25);
}
.module-selection-message strong{
  display:block;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;
  color:var(--blue);
}
.module-selection-message u{
  text-decoration:underline;
  text-decoration-color:rgba(var(--blue-rgb),.65);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.module-selection-message.complete strong{color:var(--teal)}
.module-selection-message span{display:block;margin-top:6px;color:var(--ink-3);font-size:12px}

.module-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.module-menu-panel{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  transition:opacity .2s ease;
}
.module-menu-panel.premium{border-color:rgba(var(--teal-rgb),.2)}
.module-menu-panel.locked{opacity:.45}
.module-menu-heading{margin-bottom:14px}
.module-menu-title-line{display:flex;justify-content:space-between;align-items:center;gap:10px}
.module-menu-title-line h3{font-size:16px;letter-spacing:-.01em}
.pick-chip{
  flex:none;
  font-family:var(--mono);
  color:var(--blue);
  background:rgba(var(--blue-rgb),.09);
  border:1px solid rgba(var(--blue-rgb),.3);
  border-radius:999px;
  padding:4px 10px;
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.pick-chip.done{
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  border-color:rgba(var(--teal-rgb),.4);
}
.module-menu-heading p{margin-top:4px;color:var(--ink-3);font-size:12px}
.locked-message{
  display:inline-block;margin-top:8px;
  font-family:var(--mono);
  color:var(--ink-4);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.module-column-list{display:flex;flex-direction:column;gap:8px}
.module-list-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s ease,background .2s ease;
}
.module-list-row:hover{border-color:var(--line-2)}
.module-list-row.selected{border-color:rgba(var(--teal-rgb),.45);background:rgba(var(--teal-rgb),.05)}
.module-list-row.disabled{opacity:.42}
.module-radio{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;
  font-size:11px;
  color:var(--grad-ink);
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:50%;
  transition:background .15s ease,border-color .15s ease;
}
.module-list-row.selected .module-radio{border-color:transparent;background:var(--grad)}
.module-radio:disabled{cursor:not-allowed}
.module-list-copy{
  display:flex;flex-direction:column;gap:3px;
  text-align:left;min-width:0;
}
.module-list-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.module-list-title small{
  font-family:var(--mono);
  color:var(--gold);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}
.module-list-copy>span:last-child{color:var(--ink-3);font-size:11px;line-height:1.45}
.module-row-learn{
  flex:none;
  color:var(--blue);
  font-size:11px;font-weight:600;
  transition:color .2s ease;
}
.module-row-learn:hover{color:var(--teal)}

/* Extras */
.extras-wrap{margin-top:22px}
.extras-toggle{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 18px;
  background:var(--bg-1);
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  text-align:left;
  transition:border-color .2s ease;
}
.extras-toggle:hover{border-color:var(--teal)}
.extras-toggle span{display:flex;flex-direction:column;gap:2px}
.extras-toggle strong{font-size:14px}
.extras-toggle small{color:var(--ink-3);font-size:11px}
.extras-toggle b{
  display:grid;place-items:center;
  width:30px;height:30px;flex:none;
  color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  border-radius:50%;
  font-size:16px;
}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.extras-grid{margin-top:14px}
.module-card{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s ease;
}
.module-card:hover{border-color:var(--line-2)}
.module-card.selected{border-color:rgba(var(--teal-rgb),.45);background:rgba(var(--teal-rgb),.04)}
.module-card.disabled{opacity:.45}
.module-select{
  position:absolute;top:14px;right:14px;
  display:grid;place-items:center;
  width:24px;height:24px;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--bg-3);
}
.module-select span{color:var(--grad-ink);font-size:11px}
.module-card.selected .module-select{border-color:transparent;background:var(--grad)}
.module-card-top{display:flex;align-items:center;gap:8px;padding-right:32px}
.tier-pill.standard{color:var(--blue);background:rgba(var(--blue-rgb),.1);border-color:rgba(var(--blue-rgb),.25)}
.tier-pill.premium{color:var(--teal);background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.25)}
.tier-pill.slate{color:var(--ink-2)}
.tier-pill.blue{color:var(--blue);background:rgba(var(--blue-rgb),.1);border-color:rgba(var(--blue-rgb),.25)}
.tier-pill.teal{color:var(--teal);background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.25)}
.tier-pill.gold{color:var(--gold);background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.25)}
.soon-pill{
  font-family:var(--mono);
  color:var(--gold);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}
.module-card h4{font-size:15px;letter-spacing:-.01em}
.module-card>p{color:var(--ink-3);font-size:12px;line-height:1.5}
.learn-button{
  display:flex;align-items:center;gap:6px;
  align-self:flex-start;
  color:var(--blue);
  font-size:11px;font-weight:600;
  transition:color .2s ease;
}
.learn-button:hover{color:var(--teal)}
.module-details{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12px;
}
.module-details strong{display:block;margin-top:8px;font-size:11px;color:var(--ink-2)}
.module-details strong:first-child{margin-top:0}
.module-details p{color:var(--ink-3);margin:2px 0 0;line-height:1.5}
.module-details ul{margin:8px 0 0;padding-left:16px;color:var(--ink-3)}
.module-details li{margin:2px 0}

/* Step 3: add-ons */
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.addon-card{
  display:flex;align-items:center;gap:14px;
  padding:17px 18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.addon-card:hover{border-color:var(--line-2)}
.addon-card.selected{border-color:rgba(var(--teal-rgb),.45);background:rgba(var(--teal-rgb),.04)}
.addon-card.disabled{opacity:.45;cursor:not-allowed}
.addon-card input{display:none}
.addon-check{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;
  font-size:11px;
  color:var(--grad-ink);
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:50%;
  transition:background .15s ease,border-color .15s ease;
}
.addon-card.selected .addon-check{border-color:transparent;background:var(--grad)}
.addon-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.addon-copy strong{font-size:13px}
.addon-copy small{color:var(--ink-3);font-size:11px;line-height:1.45}
.addon-card>b{
  flex:none;
  font-family:var(--mono);
  color:var(--teal);
  font-size:11px;font-weight:500;letter-spacing:.02em;
}
.addon-card.quantity,.addon-card.score{cursor:default}
.counter{display:flex;align-items:center;gap:10px;flex:none}
.counter button{
  display:grid;place-items:center;
  width:28px;height:28px;
  color:var(--ink);
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:50%;
  font-size:14px;
  transition:background .15s ease,opacity .15s ease;
}
.counter button:hover:not(:disabled){background:var(--bg-2);border-color:var(--teal)}
.counter button:disabled{opacity:.3;cursor:not-allowed}
.counter span{min-width:18px;text-align:center;font-weight:600;font-size:14px}
.addon-card.score{flex-wrap:wrap}
.score-options{display:flex;gap:6px;flex:none;flex-wrap:wrap}
.score-options button{
  padding:7px 12px;
  color:var(--ink-3);
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:11px;font-weight:500;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.score-options button b{color:var(--teal);font-weight:600;margin-left:4px}
.score-options button.active{
  color:var(--ink);
  border-color:rgba(var(--teal-rgb),.5);
  background:rgba(var(--teal-rgb),.08);
}

/* Step 4: revenue */
.revenue-dashboard{display:flex;flex-direction:column;gap:16px}
.revenue-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:24px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.revenue-top>.revenue-note{
  flex-basis:100%;
  display:flex;flex-direction:row;align-items:flex-start;gap:9px;
  margin-top:6px;padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--ink-3);font-size:12px;line-height:1.5;
}
.revenue-note b{color:var(--teal);font-weight:400;font-size:14px;line-height:1.3}
.revenue-top .revenue-note span{
  font-family:var(--sans);
  text-transform:none;letter-spacing:0;
  font-size:12px;line-height:1.5;
  color:var(--ink-3);
}
.revenue-top>div{display:flex;flex-direction:column;gap:4px}
.revenue-top span{color:var(--ink-3);font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.revenue-top strong{font-size:28px;letter-spacing:-.02em;font-weight:600}
.revenue-top strong small{color:var(--ink-3);font-size:12px;font-weight:400;margin-left:4px}
.revenue-top .retail strong{color:var(--blue)}
.revenue-top .profit strong{color:var(--teal)}
.revenue-arrow{color:var(--ink-4);font-size:20px}
.growth-model{
  padding:24px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.slider-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.slider-heading>div{display:flex;flex-direction:column;gap:3px}
.slider-heading span{color:var(--ink-3);font-size:11px}
.slider-heading strong{font-size:20px;letter-spacing:-.01em}
.growth-model input[type="range"]{
  width:100%;
  accent-color:var(--teal);
  cursor:pointer;
}
.forecast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.forecast-grid div{
  display:flex;flex-direction:column;gap:4px;
  padding:14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
}
.forecast-grid span{color:var(--ink-3);font-size:10px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.forecast-grid strong{font-size:19px;font-weight:600;letter-spacing:-.01em}
.forecast-grid .highlight{border-color:rgba(var(--teal-rgb),.35);background:rgba(var(--teal-rgb),.06)}
.forecast-grid .highlight strong{color:var(--teal)}

.info-banner{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:16px;padding:15px 17px;
  background:rgba(var(--blue-rgb),.06);
  border:1px solid rgba(var(--blue-rgb),.2);
  border-radius:var(--radius);
}
.info-banner span{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;
  color:var(--blue);
  border:1px solid rgba(var(--blue-rgb),.4);
  border-radius:50%;
  font-size:11px;font-style:italic;font-family:var(--mono);
}
.info-banner p{color:var(--ink-3);font-size:12px;line-height:1.55}
.info-banner strong{color:var(--ink-2)}

/* Step 5: review */
.review-hero{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:26px;
  background:
    radial-gradient(600px 300px at 90% -20%,rgba(var(--teal-rgb),.1),transparent 60%),
    var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.review-hero h2{margin:12px 0 8px;font-size:28px;letter-spacing:-.02em}
.review-hero>div:first-child p{color:var(--ink-3);font-size:13px;max-width:480px;line-height:1.55}
.review-hero>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.review-hero>div:last-child span{color:var(--ink-3);font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.review-hero>div:last-child strong{font-size:34px;color:var(--teal);letter-spacing:-.02em;font-weight:600}
.review-hero>div:last-child small{color:var(--ink-3);font-size:11px}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.review-card{
  padding:20px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.review-label{
  display:block;margin-bottom:12px;
  font-family:var(--mono);
  color:var(--ink-3);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.review-sublabel{
  display:block;margin:14px 0 2px;
  font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
}
.review-sublabel:first-of-type{margin-top:0}
.review-sublabel.standard{color:var(--blue)}
.review-sublabel.premium{color:var(--teal)}
.review-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.review-row:last-child{border-bottom:none}
.review-row span{color:var(--ink-2)}
.review-row strong{color:var(--teal);font-size:12px;font-weight:600;flex:none}
.review-profit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:16px;
}
.review-profit>div{
  display:flex;flex-direction:column;gap:4px;
  padding:18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.review-profit span{color:var(--ink-3);font-size:10px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.review-profit strong{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--teal)}
.review-profit strong small{color:var(--ink-3);font-size:11px;font-weight:400;margin-left:4px}

/* Live summary aside */
.price-summary{
  border-left:1px solid var(--line);
  background:
    radial-gradient(400px 300px at 100% 0%,rgba(var(--blue-rgb),.06),transparent 60%),
    var(--bg-1);
  padding:34px 26px;
  position:sticky;top:68px;
  height:calc(100vh - 68px);
  overflow-y:auto;
}
.price-summary h2{margin:10px 0 20px;font-size:24px;letter-spacing:-.02em}
.summary-lines{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.summary-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink-2);
}
.summary-line strong{color:var(--ink);font-weight:600;flex:none}
.summary-line.included span{padding-left:12px;position:relative}
.summary-line.included span::before{content:"✓";position:absolute;left:0;color:var(--teal);font-size:10px}
.summary-line.included strong{
  color:var(--teal);
  font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.summary-empty{color:var(--ink-4);font-size:12px}
.summary-total{
  display:flex;flex-direction:column;gap:3px;
  padding:18px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
}
.summary-total span{color:var(--ink-3);font-size:10px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.summary-total strong{font-size:32px;letter-spacing:-.02em;font-weight:600}
.summary-total small{color:var(--ink-3);font-size:11px}
.one-time{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding:12px 16px;
  background:rgba(var(--gold-rgb),.06);
  border:1px solid rgba(var(--gold-rgb),.2);
  border-radius:12px;
  font-size:12px;color:var(--ink-2);
}
.one-time strong{color:var(--gold)}
.summary-profit{
  display:flex;flex-direction:column;gap:3px;
  margin-top:12px;padding:16px 18px;
  background:rgba(var(--teal-rgb),.06);
  border:1px solid rgba(var(--teal-rgb),.25);
  border-radius:var(--radius);
}
.summary-profit span{color:var(--ink-3);font-size:10px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.summary-profit strong{color:var(--teal);font-size:22px;font-weight:600}
.summary-profit small{color:var(--ink-3);font-size:11px;line-height:1.5}
.summary-footnote{margin-top:18px;color:var(--ink-4);font-size:11px;line-height:1.55}

/* Module info modal — carries its tier's accent wash, matching the
   package-selector rows (blue = standard, teal = premium) */
.module-info-modal{
  --accent-rgb:var(--blue-rgb);
  position:relative;
  width:min(600px,100%);
  max-height:min(85vh,720px);
  overflow-y:auto;
  background:
    radial-gradient(440px 260px at 88% -10%,rgba(var(--accent-rgb),.16),transparent 62%),
    linear-gradient(200deg,rgba(var(--accent-rgb),.05),transparent 45%),
    var(--bg-2);
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:var(--radius-lg);
  padding:0 0 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.module-info-modal.premium{--accent-rgb:var(--teal-rgb)}
.module-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  display:grid;place-items:center;
  width:32px;height:32px;
  color:var(--ink-2);
  background:rgba(255,255,255,.06);
  border-radius:50%;
  font-size:18px;
  transition:background .2s ease;
}
.module-modal-close:hover{background:rgba(255,255,255,.12)}
.module-modal-header{padding:26px 28px 0}
.module-modal-header h2{margin:12px 0 8px;font-size:26px;letter-spacing:-.02em}
.module-modal-header p{color:var(--ink-3);font-size:13px;line-height:1.55}
.module-modal-body{padding:20px 28px 0}
.module-benefit-callout{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 18px;
  background:rgba(var(--teal-rgb),.06);
  border:1px solid rgba(var(--teal-rgb),.25);
  border-radius:var(--radius);
}
.module-benefit-callout span{
  font-family:var(--mono);
  color:var(--teal);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.module-benefit-callout strong{font-size:14px;line-height:1.5;font-weight:500}
.module-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.module-modal-grid span{
  display:block;margin-bottom:8px;
  font-family:var(--mono);
  color:var(--ink-3);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.module-modal-grid ul{list-style:none;color:var(--ink-2);font-size:13px}
.module-modal-grid li{margin:4px 0}
.module-modal-grid p{color:var(--ink-2);font-size:13px;line-height:1.55}
.module-modal-actions{
  display:flex;justify-content:flex-end;gap:12px;
  margin-top:24px;padding:20px 28px 0;
  border-top:1px solid var(--line);
}

/* ============================================================================
   TOASTS
============================================================================ */
#toasts{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:120;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
  width:max-content;max-width:calc(100vw - 32px);
}
.toast{
  display:flex;align-items:center;gap:16px;
  pointer-events:auto;
  padding:11px 20px;
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:13px;color:var(--ink);
  box-shadow:0 16px 50px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s var(--ease);
}
.toast.show{opacity:1;transform:none}
.toast button{color:var(--teal);font-weight:600;font-size:13px;flex:none}
.toast button:hover{text-decoration:underline}

/* ============================================================================
   NEW COMPONENTS (dashboard + builder batch)
============================================================================ */
/* Saved/draft chip in the builder sidebar */
.plan-state{margin-top:12px}

/* Delete link at the bottom of the builder sidebar */
.builder-delete{
  margin-top:12px;align-self:flex-start;
  color:var(--ink-4);font-size:11px;
  transition:color .2s ease;
}
.builder-delete:hover{color:var(--danger)}

/* Plan card link cluster (one-pager / duplicate / delete) */
.plan-card-links{display:flex;align-items:center;gap:12px;flex:none}
.plan-card-links button{
  color:var(--ink-4);font-size:11px;font-weight:500;
  transition:color .2s ease;
}
.plan-card-links button:hover{color:var(--ink)}
.plan-card-links .plan-card-delete:hover{color:var(--danger)}

/* Core plan module step: extras offered directly */
.core-extras-heading{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:22px 0 12px;
}
.core-extras-heading h3{font-size:16px;letter-spacing:-.01em}
.core-extras-heading span{
  font-family:var(--mono);
  color:var(--ink-3);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}

/* Pricing context line in the module modal */
.module-modal-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.module-modal-price{
  font-family:var(--mono);
  color:var(--ink-3);
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
}

/* Pick-chip pulse when counts change */
@keyframes chipPulse{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.pick-chip.pulse{animation:chipPulse .35s var(--ease)}

/* Lineup rollup (dashboard, 2+ plans) */
.lineup-rollup{
  margin-bottom:22px;padding:18px 20px 16px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lineup-rollup .forecast-grid{margin-top:12px}
.lineup-rollup>p{margin-top:12px;color:var(--ink-4);font-size:11px;line-height:1.5}

/* Account modal */
.modal-footnote{
  color:var(--ink-4);font-size:11px;line-height:1.5;
  font-family:var(--sans);text-transform:none;letter-spacing:0;
}
.modal input:disabled{opacity:.5;cursor:not-allowed}

/* Mobile mini-summary: sticky wholesale/retail readout while building */
.mini-summary{display:none}
@media (max-width:1180px){
  .mini-summary{
    position:sticky;top:82px;z-index:35;
    display:flex;align-items:center;gap:18px;
    width:100%;
    padding:11px 16px;margin-bottom:20px;
    background:rgba(14,16,20,.88);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid var(--line-2);
    border-radius:12px;
    font-size:12px;color:var(--ink-3);
    text-align:left;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .mini-summary strong{color:var(--ink);font-weight:600}
  .mini-summary strong.teal{color:var(--teal)}
  .mini-summary>b{margin-left:auto;color:var(--blue);font-weight:500;font-size:11px;flex:none}
}

/* ============================================================================
   PRODUCT VIDEOS (Wistia)
============================================================================ */
wistia-player{display:block;border-radius:12px;overflow:hidden}
wistia-player:not(:defined){
  display:block;
  padding-top:56.25%;
  background-color:var(--bg-3);
  filter:blur(5px);
}
wistia-player[media-id='votptyc71q']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/votptyc71q/swatch')}
wistia-player[media-id='095f6uuztq']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/095f6uuztq/swatch')}
wistia-player[media-id='xgvydw0bcw']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/xgvydw0bcw/swatch')}
wistia-player[media-id='c0qo3iyk6q']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/c0qo3iyk6q/swatch')}
wistia-player[media-id='j8np0djmgh']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/j8np0djmgh/swatch')}
wistia-player[media-id='8qy7i7t8p5']:not(:defined){background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/8qy7i7t8p5/swatch')}

.module-modal-video{margin-bottom:18px}

.addon-video{
  margin-top:6px;
  align-self:flex-start;
  color:var(--blue);
  font-size:11px;font-weight:600;
  text-align:left;
  transition:color .2s ease;
}
.addon-video:hover{color:var(--teal)}

.video-modal{
  position:relative;
  width:min(760px,100%);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.video-modal h2{font-size:18px;letter-spacing:-.01em;margin:2px 44px 16px 4px}

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width:1180px){
  .builder-layout{grid-template-columns:220px 1fr}
  .price-summary{
    grid-column:1 / -1;
    position:static;height:auto;
    border-left:none;border-top:1px solid var(--line);
  }
}
@media (max-width:980px){
  .auth-shell{grid-template-columns:1fr}
  .auth-story{min-height:auto;padding:40px 32px}
  .auth-panel{border-left:none;border-top:1px solid var(--line);padding:40px 24px}
  .plan-grid,.submitted-grid{grid-template-columns:1fr 1fr}
  .builder-layout{grid-template-columns:1fr}
  .builder-nav{
    position:static;height:auto;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .nav-help{display:none}
  .builder-nav nav{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:720px){
  .portal-header{padding:0 20px}
  .portal-header>div:first-child>span{display:none}
  .dashboard-hero{flex-direction:column;align-items:flex-start}
  .plan-grid,.submitted-grid,.module-menu-grid,.module-grid,.addon-grid,.review-grid,.primer-grid{grid-template-columns:1fr}
  .package-row{grid-template-columns:auto 1fr auto;row-gap:8px}
  .package-row .selection-dot{grid-column:1;grid-row:1}
  .package-row-name{grid-column:2;grid-row:1}
  .package-row-price{grid-column:3;grid-row:1}
  .package-row-copy{grid-column:1 / -1;grid-row:2}
  .revenue-top{flex-direction:column;align-items:flex-start}
  .revenue-arrow{transform:rotate(90deg)}
  .forecast-grid{grid-template-columns:1fr 1fr}
  .review-profit{grid-template-columns:1fr}
  .review-hero{flex-direction:column}
  .review-hero>div:last-child{align-items:flex-start;text-align:left}
  .field-row{grid-template-columns:1fr}
  .final-submit-bar{flex-direction:column;align-items:flex-start}
  .module-modal-grid{grid-template-columns:1fr}
  .plan-card-actions{flex-wrap:wrap}
}

/* ============================================================================
   PRINT (plan summary + customer one-pager)
============================================================================ */
@media print{
  body{background:#fff;color:#111}
  .portal-header,.submitted-actions,.header-account button,#toasts{display:none !important}
  .plan-summary-card,.submitted-panel{background:#fff;border-color:#ddd;color:#111}
  .plan-summary-card h3,.submitted-panel h1{color:#111}
  .plan-card-price strong{color:#111}
  .success-mark{background:#111;color:#fff}
  .eyebrow,.status-pill,.tier-pill{color:#555;background:#f2f2f2;border-color:#ddd}
  .submitted-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   AUTH — Supabase accounts (2026-09-22)
============================================================================ */
.form-notice{
  color:var(--teal);
  background:rgba(34,223,220,.08);
  border:1px solid rgba(34,223,220,.28);
  border-radius:10px;
  padding:11px 13px;
  font-size:13px;
  font-family:var(--sans);
  text-transform:none;letter-spacing:0;
}
.auth-alt{margin:16px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.auth-alt button{
  background:none;border:0;padding:0;margin:0;
  color:var(--teal);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.auth-alt button:hover{color:var(--blue)}
.auth-form[aria-busy="true"] input{opacity:.6}
.loading-shell{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--bg);
}
.loading-logo{height:34px;opacity:.9}
.loading-shell p{font-size:14px;animation:loadingPulse 1.4s ease-in-out infinite}
@keyframes loadingPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ============================================================================
   BILLING TERM (revenue step, 2026-09-22)
============================================================================ */
.billing-block{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.billing-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.billing-heading>div{display:flex;flex-direction:column;gap:6px}
.billing-heading strong{font-size:18px;letter-spacing:-.01em}
.billing-heading .muted{font-size:12px}
.billing-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.billing-card{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  padding:16px 18px;border-radius:14px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:inherit;transition:border-color .15s,background .15s,transform .15s;
}
.billing-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.billing-card.selected{border-color:rgba(var(--teal-rgb),.5);background:rgba(var(--teal-rgb),.05)}
.billing-card .selection-dot{flex:none;margin-top:2px}
.billing-copy{display:flex;flex-direction:column;gap:4px}
.billing-copy strong{font-size:15px}
.billing-copy span{color:var(--ink-2);font-size:13px;line-height:1.45}
.billing-copy small{color:var(--ink-3);font-size:12px;line-height:1.4}
.tier-pill.billing{color:var(--ink-2);margin-left:8px}
@media (max-width:820px){.billing-options{grid-template-columns:1fr}}

/* Annual option strip (revenue step) */
.annual-strip{
  display:flex;flex-direction:column;gap:14px;
  padding:20px 24px;
  background:rgba(var(--blue-rgb),.04);
  border:1px solid rgba(var(--blue-rgb),.22);
  border-radius:var(--radius);
}
.annual-head{display:flex;flex-direction:column;gap:6px}
.annual-head p{margin:0;color:var(--ink-3);font-size:12px;line-height:1.5;max-width:640px}
.annual-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.annual-tiles>div{display:flex;flex-direction:column;gap:4px}
.annual-tiles span{color:var(--ink-3);font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.annual-tiles strong{font-size:24px;letter-spacing:-.02em;font-weight:600}
.annual-tiles strong small{color:var(--ink-3);font-size:12px;font-weight:400;margin-left:4px}
.annual-tiles .retail strong{color:var(--blue)}
.annual-tiles .profit strong{color:var(--teal)}
.summary-annual{display:block;color:var(--blue);margin-top:4px}
@media (max-width:820px){.annual-tiles{grid-template-columns:1fr}}

/* ============================================================================
   PACKAGE STEP — Core + allowance, always-open module explainer (2026-09-22)
============================================================================ */
.module-allowance b{color:var(--ink);font-weight:600}
.module-allowance i{color:var(--ink-4);font-style:normal;margin:0 2px}
.module-primer{margin-top:18px;padding:22px 20px 16px}
.primer-intro{display:flex;flex-direction:column;gap:8px;padding:0 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.primer-intro h3{font-size:18px;letter-spacing:-.015em;font-weight:600}
.primer-intro p{margin:0;color:var(--ink-3);font-size:13px;line-height:1.55;max-width:760px}
.primer-intro p b{color:var(--ink-2);font-weight:600}
.module-primer .primer-grid{padding:8px 0 0}

/* Required plan name */
.plan-name-field span em{color:var(--ink-4);font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.plan-name-field small{display:block;margin-top:8px;color:var(--ink-3);font-size:11px;line-height:1.45}
.plan-name-field.missing input{border-color:rgba(var(--gold-rgb),.55)}
.plan-name-field.missing span em{color:var(--gold)}
.save-hint{margin:10px 0 0;text-align:right;color:var(--gold);font-size:12px}
.save-hint[hidden]{display:none}
.plan-name-field small{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:400}