/* =========================================================
   CapiFii PLATFORM — DESIGN TOKENS
   ========================================================= */
:root{
  /* CapiFii brand palette — Coral Red accent on Deep Purple foundation */
  --amplify: #E75246;   /* Coral Red — CTA, callouts, accents */
  --skill:   #70477D;   /* Mid Lavender — supporting UI, gradients, positive signals */
  --visual:  #51266A;   /* Plum — secondary base, strong overlays */
  --ignite:  #E75246;   /* Coral Red — alerts, risk, ignite moments */

  --ink:      #3B114B;    /* Deep Purple — primary text & headings */
  --ink-soft: #51266A;    /* Plum */
  --ink-mute: #6B5E73;    /* Muted purple-grey */
  --line:     #EDE4F0;    /* Soft lavender border */
  --line-2:   #F2EAF5;    /* Even softer border */
  --canvas:   #FFFFFF;    /* Pure white main background */
  --paper:    #FDFAFB;    /* Rose-tinted white for cards */
  --cream:    #FFFFFF;    /* Legacy alias → white */
  --rose:     #ECA5A2;    /* Soft Rose Pink — gentle fills */

  --ok:   #70477D;        /* Mid Lavender */
  --warn: #E75246;        /* Coral Red */
  --risk: #E75246;        /* Coral Red */

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-1: 0 1px 0 rgba(59,17,75,.04), 0 1px 2px rgba(59,17,75,.05);
  --shadow-2: 0 4px 20px -6px rgba(59,17,75,.10), 0 2px 6px rgba(59,17,75,.06);
  --shadow-3: 0 24px 60px -20px rgba(59,17,75,.18);

  --t-1: .2s cubic-bezier(.4,0,.2,1);
  --t-2: .5s cubic-bezier(.2,.8,.2,1);
  --t-3: .9s cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* noise overlay for "paper" feel */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .65;
  z-index: 1000;
  mix-blend-mode: multiply;
}

/* typography */
.display{
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing:auto;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.italic{ font-style: italic; }
.mono{ font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .02em; }
.eyebrow{
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 600; color: var(--ink-mute);
}

/* =========================================================
   APP SHELL
   ========================================================= */
.app{
  display:block;
  width:100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ----------- WORKSPACE ----------- */
.workspace{
  width:100%;
  max-width:100%;
  padding: 0;
  position: relative;
  background: var(--canvas);
  min-height: 100vh;
}
.view{
  display: none;
  padding: 44px 54px 80px;
  max-width: 100%;
  animation: viewIn var(--t-3);
}
.view.active{ display: block; }
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

.view-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.view-title{
  font-size: 46px;
  font-weight: 400;
  color: var(--ink);
}
.view-title em{
  font-style: italic; color: var(--ignite);
  font-weight: 300;
}
.view-sub{
  color: var(--ink-mute);
  font-size: 15px;
  max-width: 520px;
  margin-top: 10px;
}

/* =========================================================
   OVERVIEW VIEW
   ========================================================= */

    .hero{
    position: relative;
    padding: 32px 0 40px;
    border-bottom: 1px solid var(--line);
    }
    .hero-super{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    margin-bottom: 18px;
    }

    .hero h1{
    font-family: 'Fraunces', serif;
    font-size: clamp(44px, 6vw, 84px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
    max-width: 100%;
    }
    .hero h1 em{
    font-style: italic;
    color: var(--ignite);
    font-weight: 300;
    }
    .hero h1 .sq-underline{
    position: relative;
    display: inline-block;
    }
    .hero h1 .sq-underline::after{
    content:""; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'><path d='M2 10 C 60 2, 120 2, 180 8 S 280 14, 298 6' stroke='%23B33A20' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
    }
    .hero p{
    font-size: 18px; color: var(--ink-soft);
    max-width: 80%;
    margin: 0 0 24px;
    line-height: 1.5;
    }
    .hero-cta{
    display: flex; gap: 12px; flex-wrap: wrap;
    }

/* =========================================================
   PLATFORM INTRODUCTION GUIDE
   ========================================================= */
.intro-guide{
  margin: 40px 0;
  padding: 40px;
  background: linear-gradient(135deg, #FDFAFB 0%, #F0EAF2 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.intro-guide::before{
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 10% 10%, rgba(236,165,162,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.intro-head{
  position: relative; z-index: 1;
  text-align: center;
  margin-bottom: 32px;
}
.intro-title{
  font-family: 'Fraunces', serif;
  font-weight: 400; font-size: 36px;
  margin: 8px 0 10px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.intro-title em{ font-style: italic; color: var(--amplify); }
.intro-sub{
  font-size: 14px; color: var(--ink-mute);
  max-width: 560px; margin: 0 auto;
  line-height: 1.5;
}
.intro-steps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative; z-index: 1;
}
@media (max-width: 900px){ .intro-steps{ grid-template-columns: 1fr; } }
.intro-step{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--t-1);
}
.intro-step:hover{
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
}
.intro-step:hover .intro-step-cta{
  color: var(--amplify);
  transform: translateX(3px);
}
.intro-step-num{
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--amplify);
  line-height: 1;
}
.intro-step-body{ min-width: 0; }
.intro-step-t{
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.intro-step-s{
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.intro-step-cta{
  font-size: 11px;
  color: var(--ink-mute);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  transition: all var(--t-1);
  align-self: center;
  white-space: nowrap;
}
.intro-step-dark{
  background: linear-gradient(135deg, var(--ink) 0%, #4A1A5B 100%);
  border-color: var(--ink);
}
@media (max-width: 900px){ .intro-step-dark{ grid-column: span 1; } }
.intro-step-dark .intro-step-num{ color: var(--amplify); font-size: 32px; }
.intro-step-dark .intro-step-t{ color: #FFFFFF; font-size: 18px; }
.intro-step-dark .intro-step-s{ color: rgba(255,255,255,0.7); }
.intro-step-dark .intro-step-cta{ color: rgba(255,255,255,0.6); }
.intro-step-dark:hover .intro-step-cta{ color: var(--amplify); }
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  cursor: pointer; border: none;
  transition: all var(--t-1);
  font-family: inherit;
}
.btn-dark{
  background: var(--ink); color: var(--cream);
}
.btn-dark:hover{
  background: var(--ignite);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--ignite);
}
.btn-ghost{
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--cream); }
.btn svg{ width: 14px; height: 14px; }

/* editorial accent number strip */
.strip{
  display: flex;
  justify-content: space-around;
  align-items:center;
  gap: 28px;
  padding: 30px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  flex-wrap:wrap;
}
.strip-num{
  font-family: 'Fraunces', serif;
  font-size: 46px; font-weight: 300;
  color: var(--ink); line-height: 1;
  letter-spacing: -.02em;
}
.strip-num em{ color: var(--ignite); font-style: italic; }
.strip-lab{ font-size: 13px; color: var(--ink-mute); margin-top: 8px; }

/* Lifecycle map */
.lifecycle-wrap{
  margin: 40px 0;
}
.lifecycle-map{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.lifecycle-map::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(231,82,70,.08), transparent 40%),
              radial-gradient(circle at 80% 90%, rgba(112,71,125,.08), transparent 40%);
  pointer-events:none;
}
.lifecycle-title{
  font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400;
  margin: 0 0 6px;
}
.lifecycle-title em{ font-style: italic; color: var(--ignite); }
.lifecycle-sub{ color: var(--ink-mute); margin-bottom: 28px; }

.lifecycle-flow{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  position: relative;
  margin-top: 26px;
}
.lc-node{
  padding: 16px 12px;
  border-radius: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--t-1);
  position: relative;
  text-align: center;
}
.lc-node:hover{
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.lc-node:hover .lc-node-i{ color: var(--cream); }
.lc-node:hover .lc-node-desc{ color: rgba(255,255,255,.7); }
.lc-node-i{
  width: 24px; height: 24px;
  margin: 0 auto 10px;
  color: var(--ink);
  transition: all var(--t-1);
}
.lc-node-name{ font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.lc-node-desc{ font-size: 11px; color: var(--ink-mute); line-height: 1.35; }
.lc-node::after{
  content:""; position: absolute; right: -10px; top: 50%;
  width: 12px; height: 2px;
  background: var(--line);
  transform: translateY(-50%);
}
.lc-node:last-child::after{ display: none; }

/* capability grid */
.cap-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin: 50px 0;
}
.cap-card{
  grid-column: span 4;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t-2);
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.cap-card.feature{ grid-column: span 6; background: var(--ink); color: var(--cream); border-color: var(--ink); }
.cap-card.wide{ grid-column: span 8; }
.cap-card::after{
  content:""; position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent, var(--ignite));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-2);
}
.cap-card:hover::after{ transform: scaleX(1); }
.cap-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.cap-num{
  font-family: 'Fraunces', serif; font-size: 13px; font-style: italic;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.cap-card.feature .cap-num{ color: rgba(255,255,255,.6); }
.cap-title{
  font-family: 'Fraunces', serif;
  font-size: 26px; font-weight: 400; line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.cap-title em{ font-style: italic; color: var(--ignite); }
.cap-card.feature .cap-title em{ color: var(--amplify); }
.cap-desc{
  font-size: 13.5px; color: var(--ink-mute); line-height: 1.55;
}
.cap-card.feature .cap-desc{ color: rgba(255,255,255,.7); }
.cap-arrow{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 18px;
}
.cap-card.feature .cap-arrow{ color: var(--amplify); }
.cap-arrow svg{
  width: 12px; height: 12px;
  transition: transform var(--t-1);
}
.cap-card:hover .cap-arrow svg{ transform: translateX(6px); }

/* quote block — editorial pull quote */
.pull-quote{
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  margin: 40px 0;
}
.pull-quote h2{
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  font-style: italic;
  max-width: 28ch;
  margin: 0 auto;
  color: var(--ink);
  line-height: 1.2;
}
.pull-quote h2 b{
  color: var(--ignite);
  font-style: normal; font-weight: 500;
}
.pull-quote-cred{
  margin-top: 20px;
  font-size: 12px; color: var(--ink-mute); letter-spacing: .14em; text-transform: uppercase;
}

/* =========================================================
   COMMON COMPONENTS
   ========================================================= */
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px;
}
.card-title{
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500;
  margin: 0; line-height: 1.2;
}
.card-title em{ font-style: italic; color: var(--ignite); }
.card-sub{ font-size: 12px; color: var(--ink-mute); margin-top: 4px; }

.badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-soft);
}
.badge.ok{ background: #F0EAF2; color: var(--ok); border-color: #DDD3E3; }
.badge.warn{ background: #FCE5E3; color: var(--amplify); border-color: #E5D2EA; }
.badge.risk{ background: #FBDAD7; color: var(--risk); border-color: #ECA5A2; }
.badge.ink{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-1);
}
.chip:hover{ background: var(--ink); color: var(--cream); }
.chip.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.kv{
  display: grid; grid-template-columns: 1fr auto;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.kv:last-child{ border-bottom: 0; }
.kv-k{ color: var(--ink-mute); }
.kv-v{ font-weight: 600; color: var(--ink); }

/* Split layout */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.three-col{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.four-col{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}


/* Org result screen */
.org-result{
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 20px;
}
.capifii-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(25,10,35,.65);
    backdrop-filter:blur(10px);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
}

.capifii-modal-overlay.active{
    opacity:1;
    visibility:visible;
}

.capifii-modal{
    width:100%;
    max-width:520px;
    background:linear-gradient(135deg,#fff 0%,#FCF7FA 100%);
    border-radius:28px;
    padding:42px;
    position:relative;
    border:1px solid rgba(112,71,125,.12);
    box-shadow:0 40px 120px rgba(59,17,75,.25),0 10px 30px rgba(59,17,75,.08);
    transform:translateY(30px) scale(.95);
    transition:.35s;
}

.capifii-modal-overlay.active .capifii-modal{
    transform:translateY(0) scale(1);
}

.capifii-close{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#F5EDF7;
    color:var(--ink);
    cursor:pointer;
    font-size:16px;
    font-weight:700;
    transition:.2s;
}

.capifii-close:hover{
    background:var(--amplify);
    color:#fff;
    transform:rotate(90deg);
}

.capifii-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(231,82,70,.08);
    color:var(--amplify);
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    margin-bottom:20px;
}

.capifii-modal-top h2{
    font-family:'Fraunces',serif;
    font-size:42px;
    line-height:1.05;
    font-weight:400;
    color:var(--ink);
    margin:0 0 16px;
}

.capifii-modal-top h2 em{
    font-style:italic;
    color:var(--amplify);
}

.capifii-modal-top p{
    color:var(--ink-mute);
    line-height:1.7;
    margin-bottom:34px;
}

.capifii-input-group label{
    display:block;
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--ink);
}

.capifii-input-group input{
    width:100%;
    height:62px;
    border-radius:18px;
    border:1.5px solid var(--line);
    padding:0 20px;
    font-size:15px;
    background:#fff;
    transition:.2s;
}

.capifii-input-group input:focus{
    outline:none;
    border-color:var(--skill);
    box-shadow:0 0 0 4px rgba(112,71,125,.10);
}

.capifii-submit-btn{
    width:100%;
    height:62px;
    margin-top:26px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,var(--amplify),#D03D31);
    color:#fff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    transition:.25s;
}

.capifii-submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(231,82,70,.25);
}

.capifii-submit-btn svg{
    width:16px;
    height:16px;
}

.capifii-error{
    margin-top:8px;
    font-size:12px;
    color:#d62828;
}
/*# sourceMappingURL=volt.css.map */
.custom-alert-success {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bolder;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.custom-alert-error {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: red;
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bolder;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999;
} 
.company-select-item{
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    cursor:pointer;
    margin-bottom:12px;
    transition:.25s;
}
.company-select-item:hover{
    border-color:var(--amplify);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(59,17,75,.08);
}
.company-select-name{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
}
.company-select-status{
    font-size:12px;
    color:var(--ink-mute);
    margin-top:4px;
}
/* =========================================================
   HELPERS / RESPONSIVE
   ========================================================= */
.hidden{ display: none !important; }
.mb-0{ margin-bottom: 0; } .mt-0{ margin-top: 0; }
.mt-20{ margin-top: 20px; } .mt-40{ margin-top: 40px; }
.flex{ display: flex; } .flex-between{ display: flex; justify-content: space-between; align-items: center; }
.gap-8{ gap: 8px; } .gap-12{ gap: 12px; } .gap-20{ gap: 20px; }
.text-mute{ color: var(--ink-mute); }
.text-ignite{ color: var(--ignite); }
.text-right{ text-align: right; }
.fraunces{ font-family: 'Fraunces', serif; }

@media (max-width: 1100px){
  .app{ grid-template-columns: 1fr; }
  .nav{ display: none; }
  .view{ padding: 28px 24px; }
  .strip, .cap-grid, .dash-kpis, .ppl-grid{ grid-template-columns: repeat(2,1fr); }
  .cap-card, .cap-card.wide, .cap-card.feature{ grid-column: span 2; }
  .dim-grid, .two-col, .org-result, .roles-layout, .comp-layout, .dash-main{ grid-template-columns: 1fr; }
  .lifecycle-flow{ grid-template-columns: repeat(4,1fr); }
  .lc-node::after{ display: none; }
}

@media (max-width: 567px){
  .lifecycle-flow{ grid-template-columns: repeat(2,1fr); }
}