/* ============================================================
   THEME — Salespeak. Navy primary, Salespeak blue as the signal colour.
   Fraunces / Playfair Display / Fredoka are only used by the style
   tiles on the Kickoff form.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600&family=Playfair+Display:wght@500;700&family=Fredoka:wght@600&display=swap');

:root {
  --bg:#F4F6FA; --surface-2:#F9FAFD; --surface-hover:#EFF3FA;
  --border:#E1E6F0; --border-strong:#CDD5E3;
  --ink:#0F1B35; --ink-2:#4E5A75; --ink-3:#8590A8;
  --accent:#3E70D4; --accent-ink:#2A55AE; --accent-hover:#3463C2; --accent-soft:#E7EEFB; --accent-line:#BFD0F2; --accent-glow:rgba(62,112,212,.10);
  --on-accent:#FFFFFF;
  --primary:#112A5E; --primary-hover:#1B3A7A; --on-primary:#FFFFFF;
  --hero-bg:#112A5E; --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.68);
  --auth-panel-bg:#112A5E;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --focus:0 0 0 3px rgba(62,112,212,.28);
}

/* The logo is navy; on the navy sign-in panel it is shown in white. */
.ap-brand .auth-logo { filter: brightness(0) invert(1); }

/* Salespeak studio: warm canvas, electric blue, and a quiet ink sidebar. */
:root {
  --bg:#F7F7F2; --surface:#fff; --surface-2:#F8F9FC; --surface-hover:#EEF2FF;
  --border:#E3E6EC; --border-strong:#CBD2E1;
  --ink:#17243C; --ink-2:#526077; --ink-3:#647086;
  --accent:#315CF5; --accent-ink:#284BD1; --accent-hover:#2447D6;
  --accent-soft:#EEF1FF; --accent-line:#CBD5FF;
  --primary:#315CF5; --primary-hover:#2447D6; --on-primary:#fff;
  --hero-bg:#112643; --green:#1A765D; --green-bg:#E5F5ED;
  --r:16px; --r-sm:10px; --sidebar-w:244px; --topbar-h:86px;
  --shadow-sm:0 4px 20px rgba(24,41,73,.035);
}
body { font-size:15px; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible { outline:3px solid #6488ff; outline-offset:3px; }
.btn { min-height:42px; height:auto; padding:10px 17px; font-size:13px; border-radius:10px; }
.btn.primary { box-shadow:0 3px 8px #315cf51a; }
.btn:disabled { opacity:.48; cursor:not-allowed; }
.t-section { font-size:17px; }
.t-label { letter-spacing:.1em; }
.sidebar { background:#10233E; border:0; color:#fff; padding:0 12px 18px; }
.sidebar-logo { padding:0 16px; border-color:#ffffff12; }
.sidebar-logo #sidebar-brand { color:#fff!important; font-size:21px!important; letter-spacing:-.04em!important; }
.sidebar-logo img { filter:brightness(0) invert(1); height:28px!important; }
.sidebar-user { margin:12px 0; border:1px solid #ffffff18; border-radius:12px; background:#ffffff06; padding:7px; order:3; margin-top:auto; }
.sidebar-user-name,.sidebar-user-trigger { color:#fff; }
.sidebar-user-badge,.sidebar-user-gear { color:#b7c7df; }
.sidebar-avatar { background:#C5DEEA; color:#162b49; }
.sidebar-nav { padding:18px 0 28px; flex:1; }
.sidebar .nav-section-label { color:#8EA4BF; font-size:10px; padding:16px 16px 8px; letter-spacing:.13em; }
.sidebar .nav-item,.sidebar .nav-group-header { color:#C6D2E5; min-height:46px; padding:12px 16px; margin:3px 0; font-size:14px; border-radius:9px; }
.sidebar button.nav-item { border:0; background:transparent; width:100%; font-family:var(--font); text-align:left; }
.sidebar .nav-item:hover,.sidebar .nav-group-header:hover { background:#ffffff0c; color:#fff; }
.sidebar .nav-item.active { background:#315CF5; color:#fff; }
.sidebar .nav-item.active::before { display:none; }
.sidebar .nav-group-body { margin-left:14px; }
.sidebar .nav-group-body * { color:#B4C6DD; }
.sidebar .module-header,.sidebar .lesson-item { font-size:12px; }
.sidebar .user-menu { background:#fff; }
.nav-simple-icon { font-size:23px; width:22px; line-height:1; }
.staff-mode .sidebar-nav > .nav-group { display:none; }
.main { padding:38px 48px 60px; }
.page { max-width:1320px; margin:auto; }
.page-header h1,.page-title,.db-greeting { font-size:30px; font-weight:750; letter-spacing:-.04em; }
.card,.db-panel { box-shadow:var(--shadow-sm); }
.admin-tabs { border:0; background:transparent; padding:0; gap:7px; }
.admin-tab { border-radius:9px; padding:11px 17px; }
.admin-tab.active { background:#10233e; color:#fff; box-shadow:none; }
.ov-kpi { border:1px solid var(--border); padding:23px; box-shadow:none; border-radius:16px; }
.ov-kpi-value { font-size:38px; letter-spacing:-.05em; }
.sb-kpis .ov-kpi:first-child { background:#10233e; color:#fff; border-color:#10233e; }
.sb-kpis .ov-kpi:first-child .ov-kpi-label,.sb-kpis .ov-kpi:first-child .ov-kpi-sub { color:#bdd0ed; }
.sb-admin-grid { grid-template-columns:1fr; }
.sb-qi { padding:20px 6px; }
.sb-qi-main { font-size:17px; gap:3px; }
.sb-owner { padding:6px 14px; }
.sb-board { min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.sb-col { min-height:130px; padding:16px; }
.sb-board-scroll { overflow:visible; }
.sb-cv { max-width:1200px; gap:27px; }
.journey-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.journey-heading h2 { font-size:32px; font-weight:750; line-height:1.23; letter-spacing:-.04em; margin:9px 0 10px; }
.journey-heading p { color:var(--ink-2); font-size:14px; }
.journey-badge { border:1px solid var(--border-strong); padding:10px 15px; border-radius:99px; white-space:nowrap; font-size:12px; font-weight:600; }
.journey-badge span { color:var(--accent); padding-left:10px; }
.journey-timeline { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:28px 24px; background:#fff; border:1px solid var(--border); border-radius:16px; }
.journey-milestone { display:flex; align-items:center; flex-direction:column; position:relative; color:#68748a; font-size:12px; gap:4px; }
.journey-milestone::before { content:''; height:2px; background:#e4e8ef; position:absolute; left:-50%; right:50%; top:18px; }
.journey-milestone:first-child::before { display:none; }
.journey-dot { position:relative; z-index:1; display:grid; place-items:center; width:38px; height:38px; background:#f4f6fa; border:1px solid #e4e8ef; border-radius:50%; color:#677287; font-size:13px; font-weight:700; margin-bottom:8px; }
.journey-milestone small { font-size:11px; }
.journey-milestone.done .journey-dot { background:#e6f5ee; border-color:#e6f5ee; color:#15775c; }
.journey-milestone.now { color:#294bd0; }
.journey-milestone.now .journey-dot { background:#315cf5; border-color:#315cf5; color:#fff; box-shadow:0 0 0 5px #eef1ff; }
.journey-milestone.done::before,.journey-milestone.now::before { background:#8ecab6; }
.journey-body { display:flex; flex-direction:column; gap:25px; }
.journey-meta { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; color:var(--ink-2); }
.journey-meta>span:first-child { font-weight:700; color:var(--accent-ink); display:flex; align-items:center; gap:8px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.sb-hero { position:relative; overflow:hidden; background:#EAF0FF; border:0; padding:34px; border-radius:17px; gap:10px; }
.sb-hero::after { content:'✦'; position:absolute; right:5%; top:-25px; font-size:180px; font-weight:300; color:#315cf511; line-height:1.5; pointer-events:none; }
.sb-hero-title { font-size:29px; letter-spacing:-.04em; max-width:80%; position:relative; z-index:1; }
.sb-hero-lead { font-size:15px; color:#4e5e80; max-width:64ch; z-index:1; }
.sb-hero .btn { margin-top:8px; }
.sb-section { gap:14px; }
.sb-section .t-section { font-size:19px; letter-spacing:-.02em; }
.sb-choices { gap:18px; }
.sb-choice { border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; padding:0 0 16px; background:#fff; }
.sb-choice-img { min-height:210px; background:#f8f7f2; border-radius:0; margin:0 0 16px; }
.sb-choice>.row { padding:0 16px; font-size:13px; }
.sb-choice[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.sb-domain { padding:16px 20px; border-radius:10px; background:#fff; font-size:15px; min-height:55px; }
.sb-domains { gap:12px; }
.sb-dcard { border-radius:13px; padding:20px; box-shadow:none; }
.review-actionbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; padding:20px; border:1px solid var(--accent-line); border-radius:13px; background:#f0f3ff; }
.review-actionbar>span { font-size:13px; font-weight:600; }
.journey-support { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.journey-support b { display:block; margin:8px 0 4px; font-size:15px; }
.journey-support p { font-size:13px; color:var(--ink-2); }
.journey-learn { background:#fff; padding:20px; }
.journey-learn summary span { margin-left:auto; font-size:12px; color:var(--ink-2); }
.sb-course { background:transparent; padding:16px 0 0; border:0; }
.sb-wiz { border:1px solid var(--border); padding:32px; background:#fff; box-shadow:var(--shadow-sm); }
.sb-wiz-q { font-size:28px; letter-spacing:-.03em; }
.sb-tile { min-height:60px; border-radius:12px; }
#store-detail-overlay>div:first-child { background:#10233e!important; color:#fff; border:0!important; padding:14px 28px!important; }
#store-detail-overlay>div:first-child .muted-2 { color:#a9bad1; }
#store-detail-content { max-width:1380px!important; margin:0 auto!important; padding:32px 38px!important; width:100%; }
.sb-detail-name { font-size:32px; letter-spacing:-.04em; margin-top:14px; }
.sb-detail-grid { grid-template-columns:minmax(0,1fr) 230px; gap:26px; }
.flow-sidebar { grid-column:2; grid-row:1; }
.sb-detail-main { grid-column:1; grid-row:1; padding:28px; }
.flow-sidebar .card { padding:18px; }
.sb-tabs { gap:14px; padding-bottom:8px; margin-bottom:24px; }
.sb-tabs button { padding:9px 1px; font-size:13px; }
.flow-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.flow-heading h2 { font-size:30px; letter-spacing:-.035em; margin:6px 0; }
.flow-heading p { color:var(--ink-2); font-size:14px; }
.flow-due { font-size:12px; border:1px solid var(--border); background:#f7f9fd; border-radius:30px; padding:8px 12px; white-space:nowrap; }
.flow-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0; }
.flow-strip span { display:flex; gap:10px; padding:12px 15px; background:#f3f5f8; border-radius:9px; color:#637087; font-size:12px; }
.flow-strip .complete { background:#e6f5ee; color:#1a7058; }
.flow-strip .current { background:#eaf0ff; color:#284bd1; }
.flow-section { border-top:1px solid var(--border); padding:25px 0; display:flex; flex-direction:column; gap:15px; }
.flow-section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.flow-section-head>div { display:flex; align-items:center; gap:13px; }
.flow-section-head h3 { font-size:18px; letter-spacing:-.025em; }
.flow-number { color:var(--accent); font-size:12px; font-weight:750; }
.flow-section>p { font-size:13px; }
.flow-details { border:1px solid var(--border); border-radius:12px; padding:15px; background:#fff; }
.flow-details summary { cursor:pointer; font-size:13px; font-weight:650; }
.flow-details[open]>summary { margin-bottom:18px; }
.flow-details .sb-kv { margin:15px 0; }
.flow-details .sb-slot { margin-top:12px; }
.flow-details .sb-brief { margin-top:18px; }
.flow-warning { border:1px solid #eddfb6; background:#fff8e7; padding:15px 18px; border-radius:10px; font-size:13px; color:#684d13; }
.flow-warning ul,.flow-checklist ul { padding-left:18px; margin-top:6px; }
.flow-warning li,.flow-checklist li { margin:3px 0; }
.flow-attachments { padding:16px; background:var(--accent-soft); border-radius:10px; font-size:13px; }
.flow-attachments p { margin:6px 0 12px; }
.flow-attachments .btn { margin:4px 5px 0 0; }
.flow-import { border:1px dashed #a6b9f5; border-radius:12px; background:#f5f7ff; }
.flow-import>summary { padding:22px; cursor:pointer; list-style:none; }
.flow-import>summary span { color:var(--accent-ink); display:block; font-size:15px; font-weight:700; }
.flow-import>summary small { display:block; margin-top:6px; color:var(--ink-2); font-size:12px; }
.flow-import-body { padding:0 22px 22px; display:flex; flex-direction:column; gap:13px; font-size:13px; }
.flow-import-body textarea { font-family:var(--mono); font-size:12px; }
.flow-import-review { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; }
.flow-import-review ul { list-style:none; margin:14px 0; }
.flow-import-review li { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 0; border-bottom:1px solid var(--border); }
.flow-import-review li span { color:var(--ink-2); min-width:130px; }
.flow-import-review small { width:100%; color:var(--ink-2); }
.flow-import-review .btn { margin-top:14px; }
.flow-asset-name { max-width:210px; font-size:12px; }
.sb-entry { padding:12px; width:100%; flex-wrap:wrap; }
.sb-entry-l { flex:1; }
.flow-domain-check { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-2); }
.flow-checklist { font-size:13px; color:var(--ink-2); }
.flow-preview-note { background:#fff4d6; border:1px solid #eddfb6; border-radius:12px; padding:16px; margin-bottom:24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; }
.flow-preview { pointer-events:auto; }
.flow-preview [data-sact] { pointer-events:none; }
.flow-send { padding-bottom:0; }
.sb-toast { z-index:1000; max-width:calc(100vw - 32px); white-space:normal; }
.ap-brand { background:#10233e; }
.ap-headline { font-size:58px; letter-spacing:-.045em; }
.ap-eyebrow { color:#b9d7ff; }
.ap-brand::after { content:'✦'; position:absolute; right:-30px; top:80px; font-size:320px; color:#29496b; opacity:.45; }
.ap-form-inner { padding-top:110px; }
.preview-bar { position:fixed; z-index:800; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; background:#10233e; color:#fff; padding:10px 16px; border:1px solid #ffffff25; border-radius:14px; box-shadow:0 8px 30px #10233e30; font-size:12px; max-width:calc(100vw - 24px); }
.preview-bar select { min-height:34px; border:0; border-radius:7px; background:#fff; padding:5px; color:#17243c; font:inherit; }
.preview-bar b { white-space:nowrap; }
@media(min-width:901px) { #page-store>.page-header { display:none; } }
@media(max-width:1100px) {
  .main { padding:30px; } .journey-heading h2 { font-size:28px; }
  .sb-detail-grid { grid-template-columns:minmax(0,1fr); }
  .flow-sidebar { grid-column:1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; }
  .sb-detail-main { grid-row:1; }
  .journey-badge { display:none; }
}
@media(max-width:900px) {
  .sidebar { padding-top:0; } .main { padding:75px 22px 100px; }
  .sb-cv { max-width:none; } .journey-heading h2 { font-size:27px; }
  .sb-hero-title { font-size:25px; } .sb-hero { padding:25px; }
  #store-detail-content { padding:22px!important; }
  .preview-bar { bottom:78px; }
}
@media(max-width:600px) {
  .main { padding:70px 16px 110px; } .sb-cv { gap:22px; }
  .journey-timeline { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 0; padding:23px 12px; }
  .journey-milestone:nth-child(4)::before { display:none; }
  .journey-heading h2 { font-size:26px; }
  .journey-heading p { font-size:13px; }
  .journey-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .journey-support { flex-direction:column; align-items:flex-start; padding:22px; }
  .sb-board { grid-template-columns:1fr 1fr; }
  .sb-detail-main { padding:18px; }
  #store-detail-content { padding:18px 12px 100px!important; }
  .flow-heading { align-items:flex-start; flex-direction:column; }
  .flow-strip span { flex-direction:column; gap:4px; padding:12px; }
  .flow-sidebar { grid-template-columns:1fr; }
  .flow-section-head h3 { font-size:17px; }
  .flow-asset-name { max-width:none; width:100%; }
  .flow-domain-check { width:100%; font-size:12px; }
  .sb-slot { padding:12px; } .sb-adder .sb-input { min-width:100%; }
  .flow-import-body { padding:0 15px 15px; }
  .sb-choice-img { min-height:180px; }
  .preview-bar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; padding:9px; width:calc(100vw - 24px); box-sizing:border-box; font-size:11px; }
  .preview-bar b { display:none; } .preview-bar select { max-width:none; width:100%; }
  .preview-bar .btn { padding:8px; font-size:11px; white-space:nowrap; }
  .preview-bar span { grid-row:2; grid-column:1/-1; text-align:center; font-size:10px; color:#c4d2e4; }
  .flow-preview-note { font-size:12px; }
  .sb-hero-title { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Keep the review itself prominent above the fold. */
#page-store>.page-title,#page-store>.page-sub { display:none; }
.sb-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sb-choice-img { width:100%; aspect-ratio:1.43; padding:0; min-height:0; }
.sb-choice { gap:0; }
.sb-domains { display:grid; grid-template-columns:1fr 1fr; }
.sb-domain[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
[aria-pressed=true] .sb-radio { border-color:var(--accent); }
[aria-pressed=true] .sb-radio::after { background:var(--accent); }
.sidebar .nav-item svg,.sidebar .nav-group-icon { color:inherit; opacity:.8; }
.sb-dgrid:has(.sb-dcard:only-child) { display:block; }
.sb-dcard:only-child { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:22px; }
.sb-dcard:only-child .sb-dimg { width:100px; }
.sb-dcard:only-child:not(:has(.sb-dimg)) { grid-template-columns:1fr auto; }
@media(max-width:600px) { .sb-choices { grid-template-columns:1fr; } .sb-choice-img { aspect-ratio:1.65; } .sb-domains { grid-template-columns:1fr; } .sb-dcard:only-child { grid-template-columns:65px 1fr; gap:14px; } .sb-dcard:only-child .sb-dimg { width:65px; } .sb-dcard:only-child .btn { grid-column:1/-1; } }
.team-page-tabs { display:flex; gap:7px; flex-wrap:wrap; margin:24px 0; }
.team-page-tabs .auth-tab { flex:none; border:0; border-radius:9px; padding:10px 16px; }
.team-page-tabs .auth-tab.active { background:#10233e; color:#fff; }
#store-detail-overlay>div:nth-child(2) { padding:0!important; }
#store-detail-overlay>div:first-child .t-label { color:#b4c6df; }
.flow-preview button:disabled { opacity:.65; }
@media(max-width:900px) {
  #app::before { content:'Salespeak'; position:fixed; top:0; left:0; right:0; height:56px; padding:15px 66px; background:#fff; color:#10233e; border-bottom:1px solid var(--border); font-size:17px; font-weight:750; letter-spacing:-.035em; z-index:45; }
  .hamburger { z-index:48; }
  .sidebar.open~.main { pointer-events:none; }
}
/* The account menu opens upward from the sidebar footer. */
.sidebar-user .user-menu { top:auto; bottom:calc(100% + 8px); }
.sidebar-user-badge span { color:#b7c7df; }
/* Local preview controls: isolated test runs, with the completed example retained. */
.preview-bar { display:block; width:max-content; max-width:calc(100vw - 24px); padding:12px 16px; }
.preview-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.preview-controls b { font-size:10px; color:#b9cae3; }
.preview-controls a { color:#fff; white-space:nowrap; font-size:12px; }
.preview-controls .preview-fresh { background:#4169ff; border-color:#4169ff; color:#fff; white-space:nowrap; min-height:34px; padding:7px 13px; }
.preview-hint { margin:9px 0 0; text-align:center; font-size:11px; line-height:1.5; }
.preview-hint small { display:block; font-size:10px; color:#b9cae3; }
.preview-more { position:relative; }
.preview-more summary { cursor:pointer; color:#c9d7eb; }
.preview-more>div { position:absolute; bottom:28px; right:0; display:grid; gap:12px; padding:14px; background:#10233e; border:1px solid #547092; border-radius:10px; min-width:140px; }
@media(max-width:600px) {
 .preview-bar { width:calc(100vw - 24px); padding:10px; }
 .preview-controls { gap:8px; }
 .preview-controls b { display:none; }
 .preview-controls select { width:auto; max-width:155px; }
 .preview-controls a { font-size:11px; }
 .preview-hint { font-size:10px; }
}