/* =====================================================================
   Kenneth Hayes Solutions — shared styles
   (landing page + member portal share this one file)
   ===================================================================== */

:root{
  --ink:#15161D;
  --ink-soft:#21232E;
  --ink-line:#2E313E;
  --paper:#F6F7FA;
  --card:#FFFFFF;
  --line:#E3E6EE;
  --indigo:#6C5CE0;
  --indigo-glow:#8B7CF0;
  --indigo-btn:#5440C7;
  --indigo-deep:#4A3BB8;
  --gold:#F2B33D;
  --text:#23262F;
  --muted:#5C6373;
  --muted-dark:#A7AEC0;
  --r:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.08;letter-spacing:-0.02em;margin:0;}
p{margin:0;}
a{color:inherit;}

.mono{font-family:"IBM Plex Mono",monospace;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--indigo-deep);
  display:inline-block;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* buttons */
.btn{
  display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:.95rem;text-decoration:none;padding:13px 22px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--indigo-btn);color:#fff;}
.btn-primary:hover{background:var(--indigo-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:#fff;border-color:var(--ink-line);}
.btn-ghost:hover{border-color:var(--indigo-glow);transform:translateY(-1px);}
.btn-light{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-light:hover{border-color:var(--indigo);transform:translateY(-1px);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:#f5c259;transform:translateY(-1px);}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--indigo-glow);outline-offset:3px;border-radius:8px;}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(21,22,29,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-0.01em;white-space:nowrap;}
.brand svg{display:block;}
.brand-logo{display:block;border-radius:50%;flex:none;object-fit:cover;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{color:var(--muted-dark);text-decoration:none;font-size:.92rem;transition:color .15s;}
.nav-links a:hover{color:#fff;}
.nav-cta{padding:9px 16px;font-size:.88rem;}
.nav-user{color:var(--muted-dark);font-size:.92rem;}
.menu-only-cta{display:none;}

/* hero */
.hero{background:var(--ink);color:#fff;padding:84px 0 96px;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(620px 360px at 78% 30%,rgba(108,92,224,.20),transparent 70%);pointer-events:none;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(2.3rem,5vw,3.55rem);font-weight:700;margin:18px 0 0;}
.hero h1 .accent{color:var(--gold);}
.hero .sub{color:var(--muted-dark);font-size:1.12rem;margin-top:20px;max-width:30em;}
.hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hero-foot{margin-top:26px;color:#6F7589;font-size:.8rem;letter-spacing:.04em;}
.hero-foot .dot{color:var(--indigo-glow);}

/* flow diagram */
.diagram{width:100%;max-width:480px;margin:0 auto;}
.diagram svg{width:100%;height:auto;display:block;overflow:visible;}
.node-box{fill:var(--ink-soft);stroke:#3A3D4D;stroke-width:1.5;}
.node-hub{fill:url(#hubgrad);stroke:var(--indigo-glow);stroke-width:1.5;}
.node-label{fill:#C9CDDB;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.02em;}
.hub-label{fill:#fff;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;}
.node-dot{fill:var(--gold);}
.conn{fill:none;stroke:var(--indigo);stroke-width:2;opacity:.5;}
.packet{fill:var(--gold);}
.hubglow{animation:hubpulse 2.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes hubpulse{0%,100%{opacity:.25;}50%{opacity:.6;}}

/* generic section */
.sec{padding:88px 0;}
.sec-head{max-width:34em;margin-bottom:44px;}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;margin-top:14px;}
.sec-head .lead{color:var(--muted);font-size:1.08rem;margin-top:14px;}

/* problem */
.problem{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pain{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);}
.pain .pin{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.pain .pin span{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,179,61,.16);}
.pain .pin small{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pain p{font-size:1.02rem;color:var(--text);}
.problem .close{margin-top:30px;font-family:"Space Grotesk",sans-serif;font-size:1.2rem;color:var(--ink);}
.problem .close b{color:var(--indigo-deep);font-weight:600;}

/* services */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.svc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:26px;transition:border-color .18s,transform .18s;position:relative;}
.svc:hover{border-color:var(--indigo);transform:translateY(-2px);}
.svc.feature{grid-column:1 / -1;background:linear-gradient(120deg,#fff, #F3F1FE);border-color:#D9D3F7;}
.svc.wide{grid-column:1 / -1;}
.svc .num{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--indigo);letter-spacing:.1em;}
.svc h3{font-size:1.22rem;font-weight:600;margin:8px 0 9px;color:var(--ink);}
.svc.feature h3{font-size:1.5rem;}
.svc p{color:var(--muted);font-size:1rem;}
.svc .tools{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--indigo-deep);background:rgba(108,92,224,.09);border:1px solid rgba(108,92,224,.18);padding:4px 9px;border-radius:7px;}
.feature-tag{position:absolute;top:22px;right:24px;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(242,179,61,.12);border:1px solid rgba(242,179,61,.3);padding:3px 9px;border-radius:20px;}

/* how it works */
.how{background:var(--ink);color:#fff;}
.how .eyebrow{color:var(--indigo-glow);}
.how .sec-head h2{color:#fff;}
.how .sec-head .lead{color:var(--muted-dark);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}
.step{padding:30px 26px;border:1px solid var(--ink-line);position:relative;background:var(--ink-soft);}
.step:first-child{border-radius:var(--r) 0 0 var(--r);}
.step:last-child{border-radius:0 var(--r) var(--r) 0;}
.step:not(:last-child){border-right:none;}
.step .sn{font-family:"IBM Plex Mono",monospace;color:var(--gold);font-size:.8rem;letter-spacing:.1em;}
.step h3{color:#fff;font-size:1.3rem;font-weight:600;margin:10px 0 10px;}
.step p{color:var(--muted-dark);font-size:.98rem;}
.step .arrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:3;width:22px;height:22px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:13px;}
.step:last-child .arrow{display:none;}

/* tools rail */
.tools-sec{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.rail{display:flex;flex-wrap:wrap;gap:11px;}
.rail .t{font-family:"IBM Plex Mono",monospace;font-size:.92rem;color:var(--text);background:var(--paper);border:1px solid var(--line);padding:10px 16px;border-radius:10px;}
.rail .t b{color:var(--indigo-deep);font-weight:500;}
.tools-note{margin-top:26px;color:var(--muted);font-size:1.02rem;max-width:40em;}
.tools-note b{color:var(--ink);font-weight:600;}

/* about */
.about .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.about p{color:var(--text);font-size:1.08rem;margin-bottom:16px;}
.about p:last-child{margin-bottom:0;}
.about .name{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--ink);font-size:1.3rem;}

/* CTA */
.cta{background:var(--ink);color:#fff;text-align:center;padding:92px 0;position:relative;overflow:hidden;}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 50% 0%,rgba(108,92,224,.22),transparent 70%);pointer-events:none;}
.cta .wrap{position:relative;z-index:1;}
.cta .eyebrow{color:var(--gold);}
.cta h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;margin:16px 0 0;}
.cta p{color:var(--muted-dark);font-size:1.12rem;margin:18px auto 0;max-width:34em;}
.cta-actions{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-mail{margin-top:24px;font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:#7C8295;}
.cta-mail .dot{color:var(--indigo-glow);}
.book-card{max-width:540px;margin:34px auto 0;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:16px;padding:24px;text-align:left;}
.book-zoom{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-glow);margin-bottom:18px;}
.book-zoom::before{content:"";width:8px;height:8px;border-radius:50%;background:#2D8CFF;box-shadow:0 0 0 4px rgba(45,140,255,.18);}
.book-flow{display:flex;flex-direction:column;gap:15px;margin-bottom:22px;}
.book-step{display:flex;align-items:flex-start;gap:12px;}
.book-step .bdot{flex:none;width:23px;height:23px;border-radius:50%;background:rgba(108,92,224,.16);border:1px solid var(--indigo-glow);color:var(--indigo-glow);display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:.72rem;margin-top:1px;}
.book-step b{color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1rem;display:block;margin-bottom:2px;}
.book-step span{color:var(--muted-dark);font-size:.92rem;line-height:1.45;}
.book-card .btn{width:100%;text-align:center;}

/* footer */
footer{background:#101117;color:#6F7589;padding:30px 0;border-top:1px solid var(--ink-line);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.86rem;}
footer .brand{font-size:1rem;}
footer .mono{font-size:.78rem;}

/* =====================================================================
   PORTAL PAGES — signup / login / dashboard (dark backdrop)
   ===================================================================== */
body.app-page{background:var(--ink);}

.auth-wrap{
  min-height:calc(100vh - 64px);display:flex;align-items:flex-start;justify-content:center;
  padding:64px 24px 80px;
  background:radial-gradient(620px 360px at 50% 0%, rgba(108,92,224,.18), transparent 70%), var(--ink);
}
.auth-card{width:100%;max-width:440px;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:18px;padding:34px;}
.auth-card .eyebrow{color:var(--gold);}
.auth-title{color:#fff;font-size:1.7rem;font-weight:700;margin:12px 0 8px;}
.auth-sub{color:var(--muted-dark);font-size:1rem;}
.auth-alt{margin-top:18px;color:var(--muted-dark);font-size:.92rem;}
.auth-alt a{color:var(--indigo-glow);}

.form{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field span{color:#C9CDDB;font-size:.82rem;font-family:"IBM Plex Mono",monospace;letter-spacing:.04em;}
.field input{font-family:"IBM Plex Sans",sans-serif;font-size:1rem;color:#fff;background:#171922;border:1px solid #343849;border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s;}
.field input:focus{outline:none;border-color:var(--indigo-glow);box-shadow:0 0 0 3px rgba(139,124,240,.2);}
.field textarea{font-family:"IBM Plex Sans",sans-serif;font-size:1rem;color:#fff;background:#171922;border:1px solid #343849;border-radius:10px;padding:12px 14px;resize:vertical;transition:border-color .15s,box-shadow .15s;}
.field textarea:focus{outline:none;border-color:var(--indigo-glow);box-shadow:0 0 0 3px rgba(139,124,240,.2);}
.btn-block{width:100%;text-align:center;margin-top:6px;}
.form-error{background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.40);color:#F3B5B7;border-radius:10px;padding:12px 14px;font-size:.92rem;display:flex;flex-direction:column;gap:4px;margin-top:18px;}
.form-ok{background:rgba(64,180,120,.12);border:1px solid rgba(64,180,120,.40);color:#A9E2C4;border-radius:10px;padding:12px 14px;font-size:.94rem;line-height:1.5;margin-top:18px;}
.form-ok strong{color:#fff;}

.dash-wrap{
  min-height:calc(100vh - 64px);padding:64px 0 90px;color:#fff;
  background:radial-gradient(680px 380px at 50% 0%, rgba(108,92,224,.16), transparent 70%), var(--ink);
}
.dash-wrap .eyebrow{color:var(--gold);}
.dash-title{color:#fff;font-size:clamp(1.7rem,4vw,2.3rem);font-weight:700;margin:12px 0 10px;}
.dash-sub{color:var(--muted-dark);font-size:1.08rem;max-width:40em;margin-bottom:34px;}
.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;}
.book-tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:16px;padding:26px;transition:border-color .18s,transform .18s;}
.book-tile:hover{border-color:var(--indigo-glow);transform:translateY(-3px);}
.book-tile-dur{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.35rem;color:#fff;}
.book-tile-price{font-family:"IBM Plex Mono",monospace;color:var(--gold);font-size:1rem;}
.book-tile-desc{color:var(--muted-dark);font-size:.96rem;margin-top:6px;line-height:1.5;}
.book-tile-cta{margin-top:14px;color:var(--indigo-glow);font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.98rem;}
.dash-note{margin-top:28px;color:#7C8295;font-size:.84rem;}
.dash-note a{color:var(--indigo-glow);}

/* responsive */
@media (max-width:860px){
  .hero{padding:60px 0 70px;}
  .hero .wrap{grid-template-columns:1fr;gap:36px;}
  .diagram{order:2;max-width:420px;}
  .nav-links{display:none;}
  .menu-only-cta{display:inline-block;}
  .nav .wrap{padding-left:16px;padding-right:16px;}
  .brand{font-size:.95rem;gap:7px;}
  .menu-only-cta{font-size:.82rem;padding:8px 13px;}
  .pains{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .step:first-child{border-radius:var(--r) var(--r) 0 0;}
  .step:last-child{border-radius:0 0 var(--r) var(--r);}
  .step:not(:last-child){border-right:1px solid var(--ink-line);border-bottom:none;}
  .step .arrow{right:50%;top:auto;bottom:-11px;transform:translateX(50%);}
  .about .grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:680px){
  .book-grid{grid-template-columns:1fr;}
  .auth-card{padding:26px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hubglow{animation:none;opacity:.4;}
  .btn,.svc,.book-tile{transition:none;}
}
body.reduced .packet{display:none;}