/* ============================================================
   LukeZigger AI — shared design system (single source of truth)
   Extracted from the duplicated inline <style> blocks that were
   previously copy-pasted into index.html, help.html,
   how-to-enrol.html and how-to-use.html independently.
   Base tokens/components below are byte-identical to the original
   V10 styling (same --bg/--text/--cyan/--blue/--green/--shadow
   palette, same fonts, same border-radius, same button system) —
   nothing in this section changes how the site looks.
   New additions (nav dropdown/accordion, auth tablist, reduced
   motion, focus-visible, help-center layout) are appended after,
   clearly marked.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#080b13;--panel:#0e1421;--panel2:#111a2a;--line:rgba(170,196,255,.14);--text:#f5f8ff;--muted:#9ba9bf;--cyan:#63ddff;--blue:#4f78ff;--green:#68e0ac;--shadow:0 24px 70px rgba(0,0,0,.36);
  /* Design tokens — formal scales (Part 1/2 consolidation). Existing
     rules were snapped to these values where safe; new components
     should reference these variables directly rather than introduce
     another one-off number. */
  --r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:26px;
  --space-1:6px;--space-2:10px;--space-3:14px;--space-4:20px;--space-5:28px;--space-6:40px;--space-7:56px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 520px at 72% 10%,rgba(61,107,255,.12),transparent 70%),var(--bg);color:var(--text);font-family:Inter,sans-serif;line-height:1.6}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.nav{position:sticky;top:0;z-index:50;background:rgba(8,11,19,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.navin{height:76px;display:flex;align-items:center;justify-content:space-between}.brand img{width:190px;display:block}.links{display:flex;gap:28px;align-items:center;font-size:14px;color:#bdc8da}.links a:hover{color:white}.btn{border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06101b;border:0;box-shadow:0 14px 36px rgba(79,120,255,.22)}.ghost{background:rgba(255,255,255,.025);color:white}.hero{min-height:690px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px;padding:70px 0}.pill{display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:999px;padding:8px 13px;color:#cbd6e8;font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:0}h1{font-size:clamp(44px,6vw,76px);line-height:1.02;margin:22px 0}h1 span{background:linear-gradient(110deg,#fff 15%,var(--cyan),#8e9fff);background-clip:text;-webkit-background-clip:text;color:transparent}.lead{font-size:18px;color:var(--muted);max-width:620px}.heroactions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.proof{margin-top:27px;color:#8493aa;font-size:13px}.core{height:460px;position:relative;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 45%,rgba(79,120,255,.18),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:var(--shadow);overflow:hidden}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent)}.corelogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:116px;height:116px;border-radius:28px;display:grid;place-items:center;background:#0d111c;border:1px solid rgba(99,221,255,.42);box-shadow:0 0 70px rgba(79,120,255,.3)}.corelogo img{width:82px}.orb{position:absolute;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(12,18,31,.88);font-size:12px;color:#dce6f6;box-shadow:0 12px 30px rgba(0,0,0,.28)}.o1{left:9%;top:16%}.o2{right:8%;top:17%}.o3{left:7%;bottom:18%}.o4{right:7%;bottom:18%}.pulse{position:absolute;left:50%;top:50%;width:180px;height:180px;border:1px solid rgba(99,221,255,.16);border-radius:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50% 50%;animation:pulse 3.2s ease-out infinite;will-change:transform,opacity;pointer-events:none}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.75);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.65);opacity:0}}section{padding:100px 0}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.sectionhead h2{font-size:clamp(32px,4vw,50px);line-height:1.08}.sectionhead p{color:var(--muted);max-width:520px}.employees{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid var(--line);border-radius:20px;padding:24px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016));transition:.25s;min-height:260px;display:flex;flex-direction:column}.card:hover{transform:translateY(-6px);border-color:rgba(99,221,255,.34);box-shadow:0 22px 50px rgba(0,0,0,.25)}.icon{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:rgba(99,221,255,.06);font-size:20px}.card h3{font-size:22px;margin:18px 0 7px}.card p{color:var(--muted);font-size:14px;margin:0 0 22px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:21px}.chip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:#aebbd0}.cardactions{display:flex;gap:9px;margin-top:auto}.cardactions .btn{font-size:12px;padding:9px 11px;flex:1}.how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step{padding:24px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}.num{font-family:'Space Grotesk';color:var(--cyan);font-size:12px}.step h3{font-size:18px;margin:12px 0 6px}.step p{font-size:13px;color:var(--muted)}.team{display:grid;grid-template-columns:1fr .8fr;gap:22px;border:1px solid var(--line);border-radius:26px;padding:34px;background:linear-gradient(135deg,rgba(79,120,255,.09),rgba(99,221,255,.035))}.teamlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.pick{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.025);cursor:pointer}.pick input{accent-color:#66dfff}.summary{border:1px solid var(--line);border-radius:20px;padding:24px;background:rgba(5,9,16,.48)}.summary-label{display:block;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em}.summary-count{display:block;margin:8px 0 14px;font-family:Inter,sans-serif;font-size:52px;line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--text)}.summary .btn{width:100%;margin-top:22px}.dashboard{border:1px solid var(--line);border-radius:26px;background:#0b111d;padding:20px;box-shadow:var(--shadow)}.dashbar{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:4px 4px 18px}.dashgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px}.metric{padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.metric span{font-size:12px;color:var(--muted)}.metric b{display:block;font-family:'Space Grotesk';font-size:26px;margin-top:8px}.activity{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:16px}.row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px}.row:last-child{border:0}.ok{color:var(--green)}.cta{padding:70px 0}.ctabox{border:1px solid rgba(99,221,255,.25);border-radius:28px;padding:50px;text-align:center;background:radial-gradient(circle at 50% 120%,rgba(79,120,255,.22),transparent 60%),rgba(255,255,255,.025)}.ctabox h2{font-size:clamp(34px,5vw,58px)}.ctabox p{color:var(--muted);max-width:650px;margin:14px auto 28px}.footer{border-top:1px solid var(--line);padding:36px 0;color:#8795aa}.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px}.modal{position:fixed;inset:0;background:rgba(2,5,10,.75);backdrop-filter:blur(10px);display:none;place-items:center;z-index:100;padding:20px}.modal.open{display:grid}.modalbox{width:min(620px,100%);border:1px solid var(--line);border-radius:26px;background:#0d1421;padding:28px;box-shadow:var(--shadow)}.modalhead{display:flex;justify-content:space-between;gap:20px}.close{border:0;background:transparent;color:white;font-size:24px;cursor:pointer}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.formgrid .full{grid-column:1/-1}.field{width:100%;background:#090e18;color:white;border:1px solid var(--line);border-radius:10px;padding:12px}.note{font-size:12px;color:var(--muted);margin-top:12px}.mobilemenu{display:none}.mobiletoggle{display:none;background:transparent;border:1px solid var(--line);color:white;border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer}

.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.plan{border:1px solid var(--line);border-radius:20px;padding:24px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016));display:flex;flex-direction:column}.plan.featured{border-color:rgba(99,221,255,.45);box-shadow:0 20px 50px rgba(35,100,255,.18)}.plan-name{font-weight:800;font-size:14px;color:var(--cyan)}.plan-price{font-family:'Space Grotesk';font-size:26px;line-height:1.25;margin:10px 0 4px}.plan-price small{font-size:13px;color:var(--muted);font-weight:500}.plan-desc{color:var(--muted);font-size:13px;margin-bottom:16px}.plan-feats{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;font-size:13px;color:#cdd8ec}.plan-feats li{display:flex;gap:8px}.plan-feats li:before{content:'✓';color:var(--green);font-weight:800}.plan .btn{margin-top:auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.about-card{border:1px solid var(--line);border-radius:20px;padding:28px;background:rgba(255,255,255,.025)}
.faq-item{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px;background:rgba(255,255,255,.02);cursor:pointer}.faq-item b{display:flex;justify-content:space-between;font-size:15px}.faq-a{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:.25s}.faq-item.open .faq-a{max-height:200px;margin-top:10px}
.founder-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;border:1px solid var(--line);border-radius:26px;padding:34px;background:radial-gradient(circle at 20% 20%,rgba(79,120,255,.14),transparent 55%),rgba(255,255,255,.02)}.founder-actions{display:grid;gap:10px;margin-top:18px}.founder-actions .btn{justify-content:flex-start}
.authtabs{display:flex;gap:8px;margin:16px 0}.authtab{flex:1;text-align:center;padding:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}.authtab.active{color:#06101b;background:linear-gradient(135deg,var(--cyan),var(--blue));border:0}.authpane{display:none}.authpane.active{display:block}.oauthrow{display:grid;gap:10px;margin:14px 0}.oauthbtn{width:100%;justify-content:center}.authsplit{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0}.authsplit:before,.authsplit:after{content:'';flex:1;height:1px;background:var(--line)}
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-transform:uppercase}.badge.auto{background:rgba(104,224,172,.14);color:var(--green);border:1px solid rgba(104,224,172,.3)}.badge.approve{background:rgba(99,221,255,.12);color:var(--cyan);border:1px solid rgba(99,221,255,.3)}



.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:90;border:1px solid rgba(99,221,255,.34);background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06101b;border-radius:999px;padding:14px 18px;font-weight:800;box-shadow:0 18px 50px rgba(35,100,255,.32);cursor:pointer;display:flex;align-items:center;gap:10px}.chat-launcher:hover{transform:translateY(-2px)}.chat-dot{width:9px;height:9px;border-radius:50%;background:#06101b;box-shadow:0 0 0 5px rgba(6,16,27,.12)}.chat-panel{position:fixed;right:22px;bottom:84px;width:min(380px,calc(100% - 28px));max-height:620px;z-index:95;border:1px solid var(--line);border-radius:20px;background:#0d1421;box-shadow:0 28px 80px rgba(0,0,0,.5);display:none;overflow:hidden}.chat-panel.open{display:flex;flex-direction:column}.chat-head{padding:18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.chat-title{font-weight:800}.chat-status{font-size:12px;color:var(--green)}.chat-body{padding:18px;display:flex;flex-direction:column;gap:12px;overflow:auto}.bubble{max-width:88%;padding:11px 13px;border-radius:14px;font-size:14px;line-height:1.45}.bubble.bot{background:rgba(255,255,255,.055);border:1px solid var(--line)}.bubble.user{margin-left:auto;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06101b;font-weight:600}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-actions button{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);border-radius:10px;padding:10px;text-align:left;cursor:pointer;font-weight:600}.quick-actions button:hover{border-color:rgba(99,221,255,.35)}.chat-foot{padding:14px 18px 18px;border-top:1px solid var(--line)}.chat-foot .btn{width:100%}.process-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.025)}.process-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);font-weight:800;margin-bottom:10px}.process-step{display:grid;grid-template-columns:25px 1fr;gap:9px;align-items:start;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px}.process-step:last-child{border-bottom:0}.step-badge{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:rgba(99,221,255,.1);border:1px solid rgba(99,221,255,.24);color:var(--cyan);font-size:11px;font-weight:800}.automation-card{border-color:rgba(104,224,172,.3);background:rgba(104,224,172,.045)}.automation-card .process-title{color:var(--green)}.automation-card .step-badge{color:var(--green);background:rgba(104,224,172,.1);border-color:rgba(104,224,172,.28)}.impact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.impact{padding:10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:11px;color:var(--muted)}.impact b{display:block;color:var(--text);font-size:13px;margin-bottom:2px}.restart-chat{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}.restart-chat:hover{color:white}.enroll-steps{display:flex;gap:7px;margin:18px 0 4px}.enroll-step{height:4px;flex:1;border-radius:999px;background:rgba(255,255,255,.08)}.enroll-step.active{background:linear-gradient(90deg,var(--cyan),var(--blue))}.step-pane{display:none}.step-pane.active{display:grid}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.modal-actions .btn{flex:1}.field-label{display:block;font-size:12px;font-weight:700;color:#c9d4e6;margin-bottom:6px}.success-box{display:none;text-align:center;padding:26px 10px}.success-box.open{display:block}.success-box h3{font-size:26px;margin:12px 0}.success-icon{width:54px;height:54px;margin:auto;border-radius:50%;display:grid;place-items:center;background:rgba(104,224,172,.12);border:1px solid rgba(104,224,172,.35);color:var(--green);font-size:24px}



.workflow-builder{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.025);margin:8px 0}.workflow-continue{width:100%;margin-top:12px}.chat-panel{width:min(430px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 100px))}.chat-body{max-height:600px}.quick-actions button{text-align:left}.process-card{width:100%}

/* ============================================================
   NEW: Accessible desktop dropdown navigation (Phase 3)
   Grouped structure: Products / Get Started / Resources, each a
   real disclosure widget — click-based (not hover-only), keyboard
   operable, closes on Escape and outside click.
   ============================================================ */
.navgroup{position:relative}
.navgroup>button{background:transparent;border:0;color:#bdc8da;font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 4px}
.navgroup>button:hover{color:#fff}
.navgroup>button .caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;margin-top:-3px}
.navgroup[aria-expanded="true"]>button .caret{transform:rotate(-135deg);margin-top:3px}
.navmenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:220px;background:#0e1421;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.navgroup[aria-expanded="true"] .navmenu{display:flex}
.navmenu a{display:block;padding:10px 12px;border-radius:10px;font-size:14px;color:#dce6f6}
.navmenu a:hover,.navmenu a:focus-visible{background:rgba(255,255,255,.06);color:#fff}
.navmenu a[aria-current="page"]{color:var(--cyan)}
.links a[aria-current="page"]{color:var(--cyan)}

/* ============================================================
   NEW: Mobile accordion navigation (Phase 4) — single
   implementation, replaces the two contradictory
   @media(max-width:900px) blocks that previously existed.
   ============================================================ */
.mobile-overlay{position:fixed;inset:0;background:rgba(2,5,10,.6);z-index:190;display:none}
.mobile-overlay.open{display:block}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:#080b13;border-left:1px solid var(--line);z-index:195;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;overflow-y:auto;padding:20px}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mobile-close{background:transparent;border:1px solid var(--line);color:#fff;width:40px;height:40px;border-radius:10px;font-size:18px}
.mobile-group summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;border-bottom:1px solid var(--line);min-height:44px}
.mobile-group summary::-webkit-details-marker{display:none}
.mobile-group summary .caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.mobile-group[open] summary .caret{transform:rotate(-135deg)}
.mobile-group .mobile-sub{display:flex;flex-direction:column;padding:4px 4px 10px}
.mobile-sub a{padding:12px 10px;font-size:15px;color:#bdc8da;border-radius:8px;min-height:44px;display:flex;align-items:center}
.mobile-sub a:hover,.mobile-sub a:focus-visible{background:rgba(255,255,255,.05);color:#fff}
.mobile-actions{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.mobile-actions .btn{width:100%;min-height:48px}
body.nav-locked{overflow:hidden}

/* ============================================================
   NEW: Accessible auth tabs (real ARIA tablist) — Phase 14
   Visual appearance unchanged; only semantics/keyboard behavior added.
   ============================================================ */
.authtab{min-height:44px}
.authtab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ============================================================
   NEW: consistent focus-visible + minimum touch target (Phase 14)
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.btn{min-height:44px}
.mobiletoggle{min-height:44px;min-width:44px}

/* ============================================================
   NEW: Reduced motion support (Phase 14) — exact block requested
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Page-specific component styles (previously separate inline
   <style> blocks in how-to-enrol.html / how-to-use.html /
   help.html — consolidated here as the single source of truth)
   ============================================================ */
.enrol-stage{border:1px solid var(--line);border-radius:20px;padding:28px;margin-bottom:16px;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.enrol-stage .stagenum{font-family:'Space Grotesk';color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.04em}
.enrol-stage h3{font-size:22px;margin:8px 0 14px}
.enrol-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.enrol-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;font-weight:700}
.enrol-col ul{margin:0;padding-left:18px;font-size:14px;color:#dce6f6;line-height:1.7}
.enrol-col p{font-size:14px;color:#dce6f6;line-height:1.6;margin:0}

.use-topic{border:1px solid var(--line);border-radius:20px;padding:26px;margin-bottom:14px;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.use-topic h3{font-size:18px;margin:0 0 10px}
.use-topic p{font-size:14px;color:#dce6f6;line-height:1.65;margin:0}
.use-topic ol,.use-topic ul{margin:10px 0 0;padding-left:20px;font-size:14px;color:#dce6f6;line-height:1.75}
.planned{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#ffcf7a;background:rgba(255,207,122,.1);border:1px solid rgba(255,207,122,.28);border-radius:999px;padding:4px 10px;margin-left:8px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--green);background:rgba(104,224,172,.1);border:1px solid rgba(104,224,172,.28);border-radius:999px;padding:4px 10px;margin-left:8px}

.help-shell{display:grid;grid-template-columns:250px 1fr;gap:48px;padding:56px 0 90px}
.help-nav{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.help-nav a{font-size:14px;color:var(--muted);padding:9px 12px;border-radius:8px;min-height:44px;display:flex;align-items:center}
.help-nav a:hover,.help-nav a:focus-visible{background:rgba(255,255,255,.04);color:#fff}
.help-nav a.active{background:rgba(99,221,255,.1);color:var(--cyan);font-weight:700}
.help-topic{padding:34px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.help-topic:first-child{padding-top:0}
.help-topic:last-child{border-bottom:none}
.help-topic h2{font-size:22px}
.help-topic p{color:var(--muted);font-size:14px;margin-top:10px;max-width:640px;line-height:1.65}
.help-topic ul{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.8}
.help-mobile-jump{display:none}
.help-mobile-jump select{width:100%;background:#0e1421;color:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;min-height:48px}

/* ============================================================
   Lead-submission error state (Phase 13)
   ============================================================ */
.lead-error{display:none;border:1px solid rgba(255,120,120,.35);background:rgba(255,80,80,.08);border-radius:14px;padding:16px;margin-top:14px;font-size:14px;color:#ffd7d7}
.lead-error.open{display:block}
.lead-error .btn{margin-top:10px}

/* ============================================================
   NEW: Consultation "blueprint" presentation (Part 6) — one
   cohesive deliverable-style card instead of separate floating
   process-cards. Uses only real backend-generated fields.
   ============================================================ */
.blueprint{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));overflow:hidden;margin:10px 0}
.blueprint-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:rgba(99,221,255,.045)}
.blueprint-head .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.blueprint-head b{font-family:'Space Grotesk';font-size:13px;letter-spacing:.02em}
.blueprint-section{padding:16px 18px;border-bottom:1px solid var(--line)}
.blueprint-section:last-child{border-bottom:none}
.blueprint-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0 0 10px}
.blueprint-summary{font-size:14px;color:#dce6f6;line-height:1.6}

/* ============================================================
   NEW: Luke typing indicator (Part 4 — Luke Experience polish)
   Animated dots instead of a static "please wait" sentence.
   ============================================================ */
.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block;animation:typingBounce 1.1s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion: reduce){.typing-dots i{animation:none;opacity:.8}}

/* ============================================================
   NEW: Header refinement (Part 2) — the nav CTA/login buttons
   were using the same padding as large hero/section CTAs, making
   the header feel heavier than its 76px height suggests. Scoped
   override only within .navin — every other .btn usage elsewhere
   on the site is untouched.
   ============================================================ */
.navin .btn{padding:9px 16px;font-size:13.5px;border-radius:var(--r-xs)}
.navgroup>button{padding:9px 8px}
.links{gap:22px}

/* ============================================================
   NEW: Header restructure (Priority 1) — simplified to Logo /
   4 direct items (one being a Resources dropdown) / Log in + a
   single "Talk to Luke" CTA. Divider gives the actions group
   clear visual separation from the nav links without another
   competing button.
   ============================================================ */
.navdivider{width:1px;height:22px;background:var(--line);margin:0 4px}
.mobile-flatlinks{display:flex;flex-direction:column}
.mobile-flatlinks a{padding:14px 4px;border-bottom:1px solid var(--line-soft,var(--line));font-size:var(--fs-lg);color:#dce6f6;min-height:44px;display:flex;align-items:center}
.mobile-flatlinks a:hover,.mobile-flatlinks a:focus-visible{color:#fff}

/* ============================================================
   NEW: Blueprint visual process flow (Priority 2) — HTML/CSS
   only, no image. Horizontal with connector arrows where space
   allows; switches to a vertical stack on narrow viewports so
   labels never overlap or cross (see responsive.css).
   ============================================================ */
.flow-diagram{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:6px}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:132px;padding:10px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.02);font-size:var(--fs-sm)}
.flow-step.proposed{border-color:rgba(99,221,255,.32);background:rgba(99,221,255,.05)}
.flow-badge{width:22px;height:22px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cyan)}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;width:24px;flex:none}

/* ============================================================
   NEW: Dashboard empty state (Priority 1, Section 8) — honest,
   no fabricated metrics. Only shown when the account genuinely
   has zero of everything the real API returns.
   ============================================================ */
.dash-empty{padding:40px 20px;text-align:center}
.dash-empty h4{font-family:'Space Grotesk';font-size:var(--fs-xl);color:#fff}
.dash-empty p{color:var(--muted);font-size:var(--fs-base);margin:10px auto 20px;max-width:360px}

/* ============================================================
   NEW: Homepage restructure additions (Priority 1) — example
   conversation bubbles and the outcome-grouped automation grid.
   ============================================================ */
.example-convo{display:flex;flex-direction:column;gap:10px;max-width:560px}
.alt-section{background:rgba(255,255,255,.012)}
.automate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.automate-grid .card h3{font-size:var(--fs-lg);margin-bottom:10px}
.automate-grid .card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.automate-grid .card ul li{font-size:var(--fs-sm);color:var(--muted);padding-left:16px;position:relative}
.automate-grid .card ul li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}

/* ============================================================
   NEW: FAQ accessible toggle (Priority 4/10) — real button,
   aria-expanded, plus/minus that actually changes state (it
   previously always showed "+" regardless of open/closed).
   ============================================================ */
.faq-item{border:1px solid var(--line);border-radius:14px;padding:0;margin-bottom:10px;background:rgba(255,255,255,.02)}
.faq-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:16px 18px;font-size:var(--fs-md);font-family:inherit;color:#f5f8ff;background:transparent;border:0;cursor:pointer;text-align:left;gap:12px}
.faq-toggle:hover{color:var(--cyan)}
.faq-icon{font-size:18px;color:var(--muted);flex:none}
.faq-item .faq-a{padding:0 18px}
.faq-item.open .faq-a{padding-bottom:16px}