/* ==========================================================================
   Tajdar Chaudry / Lucreative site system
   Tokens and components per website/DESIGN.md (Stripi Inspired, alpha).
   Inter 300 substitutes Sohne per DESIGN.md's substitution note.
   ========================================================================== */

:root{
  /* color */
  --primary:#533afd;
  --primary-deep:#4434d4;
  --primary-press:#2e2b8c;
  --primary-soft:#665efd;
  --primary-subdued:#b9b9f9;
  --brand-dark:#1c1e54;
  --ink:#0d253d;
  --ink-secondary:#273951;
  --ink-mute:#64748d;
  --on-primary:#ffffff;
  --canvas:#ffffff;
  --canvas-soft:#f6f9fc;
  --canvas-cream:#f5e9d4;
  --hairline:#e3e8ee;
  --hairline-input:#a8c3de;
  --ruby:#ea2261;
  --magenta:#f96bee;
  --lemon:#9b6829;

  /* elevation */
  --sh1:rgba(0,55,112,.08) 0 1px 3px;
  --sh2:rgba(0,55,112,.08) 0 8px 24px, rgba(0,55,112,.04) 0 2px 6px;

  /* radius */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;

  /* spacing */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px; --sp-xxl:32px; --sp-huge:64px;

  --container:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','SF Pro Display',system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  background:var(--canvas);
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- type scale ---------- */
.display-xxl{font-size:clamp(36px,5vw,56px);font-weight:300;line-height:1.03;letter-spacing:-1.4px}
.display-xl{font-size:clamp(30px,4vw,48px);font-weight:300;line-height:1.15;letter-spacing:-.96px}
.display-lg{font-size:clamp(26px,3vw,32px);font-weight:300;line-height:1.1;letter-spacing:-.64px}
.display-md{font-size:26px;font-weight:300;line-height:1.12;letter-spacing:-.26px}
.heading-lg{font-size:22px;font-weight:300;line-height:1.1;letter-spacing:-.22px}
.heading-md{font-size:20px;font-weight:300;line-height:1.4;letter-spacing:-.2px}
.heading-sm{font-size:18px;font-weight:300;line-height:1.4}
.body-lg{font-size:16px}
.caption{font-size:13px;font-weight:400;letter-spacing:-.39px;color:var(--ink-mute)}
.micro{font-size:11px}
.eyebrow{
  font-size:10px;font-weight:400;line-height:1.15;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary-deep);
  display:inline-block;margin-bottom:var(--sp-lg);
}
.eyebrow.on-dark{color:var(--primary-subdued)}
.num,.tnum{font-feature-settings:"ss01","tnum";letter-spacing:-.42px}
.lead{font-size:16px;color:var(--ink-secondary);max-width:68ch}
.muted{color:var(--ink-mute)}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-xl)}
.band{padding:96px 0}
.band-tight{padding:64px 0}
.band-soft{background:var(--canvas-soft)}
.band-dark{background:var(--brand-dark);color:var(--on-primary)}
.band-dark .lead{color:rgba(255,255,255,.72)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-huge)}
.grid-2-tight{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xxl)}
.split-40-60{display:grid;grid-template-columns:2fr 3fr;gap:var(--sp-huge)}
.split-60-40{display:grid;grid-template-columns:3fr 2fr;gap:var(--sp-huge)}
@media(max-width:900px){
  .grid-2,.grid-2-tight,.split-40-60,.split-60-40{grid-template-columns:1fr;gap:var(--sp-xxl)}
  .band{padding:64px 0}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:400;line-height:1;
  padding:12px 22px;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out;
  min-height:44px;
}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-deep)}
.btn-primary:active{background:var(--primary-press)}
.btn-secondary{background:var(--canvas);color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:#f4f2ff}
.btn-on-dark{background:var(--canvas);color:var(--brand-dark)}
.btn-on-dark:hover{background:var(--canvas-soft)}
.btn-ghost-dark{background:transparent;color:var(--on-primary);border-color:rgba(255,255,255,.4)}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.8)}
.btn .arr{font-weight:300}

a.link{color:var(--primary);text-decoration:none}
a.link:hover{text-decoration:underline}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease-out;
}
.nav.scrolled{border-bottom-color:var(--hairline)}
.nav-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
}
.wordmark{
  font-size:16px;font-weight:400;letter-spacing:-.2px;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wordmark small{display:block;font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;font-weight:400;color:var(--ink-secondary);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--primary-deep)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .btn{padding:9px 18px;font-size:14px;min-height:40px}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .2s ease-out,opacity .2s ease-out}
@media(max-width:1023px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--canvas);border-bottom:1px solid var(--hairline);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:14px 24px;font-size:16px}
  .nav-burger{display:block}
  .nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){opacity:0}
  .nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---------- gradient mesh hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-mesh{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.hero-mesh svg{position:absolute;top:-20%;left:-10%;width:120%;height:110%}
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--canvas));
}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--container);margin:0 auto;
  padding:96px 24px 72px;
}
@media(max-width:768px){.hero-inner{padding:64px 24px 48px}}

/* ---------- cards ---------- */
.card{
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-xxl);
}
.card.lifted{box-shadow:var(--sh1)}
.card-cream{background:var(--canvas-cream);border:none;border-radius:var(--r-lg);padding:var(--sp-xxl)}
.card-dark{background:var(--brand-dark);color:var(--on-primary);border-radius:var(--r-lg);padding:var(--sp-xxl)}

/* ---------- pill tags & chips ---------- */
.pill-tag{
  display:inline-block;background:var(--primary-subdued);color:var(--primary-deep);
  font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);
}
.pill-tag.pc-indigo{background:var(--primary-subdued);color:var(--primary-deep)}
.pill-tag.pc-amber{background:rgba(155,104,41,.12);color:var(--lemon)}
.pill-tag.pc-navy{background:rgba(13,37,61,.08);color:var(--ink-secondary)}
.pill-tag.pc-green{background:rgba(0,92,60,.1);color:#005c3c}
.pill-tag.pc-ruby{background:rgba(234,34,97,.1);color:var(--ruby)}

/* ---------- positioning map (recreated from the real report component) ---------- */
.pos-map{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-lg);position:relative;height:340px;overflow:hidden;margin-bottom:12px}
.pos-ah{position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--hairline)}
.pos-av{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--hairline)}
.pos-side{position:absolute;font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute)}
.pos-dot-wrap{position:absolute;transform:translate(-50%,-50%);text-align:center}
.pos-dot{width:12px;height:12px;border-radius:50%;margin:0 auto;background:var(--ink-mute)}
.pos-callout{font-size:12px;font-weight:400;color:var(--ink);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:2px 8px;margin-top:5px;white-space:nowrap;box-shadow:var(--sh1)}
.pos-dot-wrap.you .pos-dot{background:var(--primary)}
.pos-dot-wrap.you .pos-callout{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- shared report table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);padding:8px 12px;border-bottom:1px solid var(--hairline)}
.tbl td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink-secondary)}
.tbl td b{font-weight:400;color:var(--ink)}
.tbl-wrap{overflow-x:auto}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:400;padding:4px 10px;
  border-radius:var(--r-pill);border:1px solid;
}
.chip-verified{background:rgba(0,92,60,.05);border-color:rgba(0,92,60,.3);color:#005c3c}
.chip-observed{background:rgba(13,37,61,.05);border-color:rgba(13,37,61,.2);color:var(--ink-secondary)}
.chip-modelled{background:rgba(155,104,41,.06);border-color:rgba(155,104,41,.35);color:var(--lemon)}
.icon{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.chip .icon{width:12px;height:12px}
li.check{list-style:none;display:flex;align-items:flex-start;gap:8px}
li.check .icon{margin-top:3px;color:var(--primary)}
.price-card.featured li.check .icon{color:var(--primary-soft)}
.tier-icon{width:30px;height:30px;stroke-width:1.4;color:var(--primary);margin-bottom:14px}
.price-card.featured .tier-icon{color:var(--primary-soft)}
.price-card ul li{list-style:none}

/* bullet marker upgraded to a small checkmark icon, mask-based so no markup changes needed */
.bullet-row .dot{
  width:14px;height:14px;margin-top:3px;border-radius:0;background:none;
  background-color:var(--primary);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* term-led list rows (<li><b>Term.</b> text) now carry a distinct inline icon per concept instead of a repeated bullet */
.ruled-rows li.term-row,
p.body-lg.term-row{display:flex;align-items:flex-start;gap:12px}
.ruled-rows li.term-row .icon,
p.body-lg.term-row .icon{margin-top:4px;color:var(--primary);flex:none}

/* ---------- report mockup components ---------- */
.mockup{
  background:var(--canvas);border-radius:var(--r-lg);
  box-shadow:var(--sh2);padding:var(--sp-xl);
  font-size:13px;letter-spacing:-.2px;
}
.mockup .mk-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hairline);
}
.mockup .mk-title{font-size:12px;font-weight:400;color:var(--ink-mute);letter-spacing:.04em;text-transform:uppercase}
.mockup-dark{
  background:var(--brand-dark);color:var(--on-primary);
  border-radius:var(--r-lg);box-shadow:var(--sh2);padding:var(--sp-xl);
}
.score-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.score-row .nm{flex:1;min-width:0}
.score-row .nm b{font-weight:400;font-size:13px;display:block}
.score-row .nm small{font-size:11px;color:var(--ink-mute)}
.score-bar{height:5px;border-radius:3px;background:var(--canvas-soft);margin-top:5px;overflow:hidden}
.score-bar i{display:block;height:100%;border-radius:3px}
.score-val{font-size:15px;font-weight:400;font-feature-settings:"ss01","tnum";min-width:52px;text-align:right}
.score-val small{font-size:11px;color:var(--ink-mute)}
.bar-hi{background:#0d8a5f}
.bar-mid{background:var(--primary-soft)}
.bar-lo{background:var(--ruby)}

.bench{margin-top:6px}
.bench-track{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.bench-track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--primary-soft)}
.bench-track .tick{position:absolute;top:-4px;width:1.5px;height:14px;background:rgba(255,255,255,.7)}
.bench-legend{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.6);margin-top:8px;font-feature-settings:"ss01","tnum"}

.big-score{font-size:72px;font-weight:300;line-height:.95;letter-spacing:-3px;font-feature-settings:"ss01","tnum"}
.big-score small{font-size:22px;color:rgba(255,255,255,.5);letter-spacing:-.5px}

/* ---------- rows / list rhythm ---------- */
.ruled-rows{list-style:none}
.ruled-rows li{padding:22px 0;border-top:1px solid var(--hairline)}
.ruled-rows li:last-child{border-bottom:1px solid var(--hairline)}
.bullet-row{display:flex;gap:12px;align-items:flex-start;padding:6px 0}

/* ---------- pathway rows (who I help) ---------- */
.pathway{
  display:grid;grid-template-columns:64px 32px 1fr auto;gap:24px;align-items:center;
  padding:28px 8px;border-top:1px solid var(--hairline);
  text-decoration:none;color:var(--ink);
  transition:background .15s ease-out;
}
.pathway:last-of-type{border-bottom:1px solid var(--hairline)}
.pathway:hover{background:var(--canvas-soft)}
.pathway .idx{font-size:26px;font-weight:300;color:var(--ink-mute);font-feature-settings:"ss01","tnum";letter-spacing:-.5px}
.pathway h3{font-size:22px;font-weight:300;letter-spacing:-.22px;margin-bottom:4px}
.pathway p{font-size:14px;color:var(--ink-mute);max-width:56ch}
.pathway .go{font-size:20px;color:var(--primary);font-weight:300}
.pathway .icon{width:26px;height:26px;stroke-width:1.4;color:var(--primary)}
@media(max-width:700px){.pathway{grid-template-columns:1fr;gap:8px}.pathway .idx,.pathway .go,.pathway .icon{display:none}}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-xl)}
.price-card{
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--sp-xxl);display:flex;flex-direction:column;gap:16px;
  text-align:left;
}
.price-card.featured{background:var(--brand-dark);color:var(--on-primary);border:none}
.price-card .tier{font-size:22px;font-weight:300;letter-spacing:-.22px}
.price-card .amount{font-size:26px;font-weight:300;letter-spacing:-.26px;font-feature-settings:"ss01","tnum"}
.price-card .amount small{display:block;font-size:13px;color:var(--ink-mute);margin-top:4px}
.price-card.featured .amount small{color:rgba(255,255,255,.6)}
.price-card ul{list-style:none;flex:1}
.price-card ul li{font-size:14px;padding:6px 0;border-top:1px solid var(--hairline)}
.price-card.featured ul li{border-top-color:rgba(255,255,255,.14)}
.price-card .btn{justify-content:center}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hairline);padding:64px 0 40px;color:var(--ink-mute);font-size:13px;letter-spacing:-.2px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-xxl)}
.footer h4{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-secondary);margin-bottom:14px}
.footer ul{list-style:none}
.footer ul li{padding:4px 0}
.footer a{color:var(--ink-mute);text-decoration:none}
.footer a:hover{color:var(--ink)}
.footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- limited-time pricing ---------- */
.price-strike{text-decoration:line-through;color:var(--ink-mute);font-size:16px;font-weight:300;margin-right:8px}
.price-card.featured .price-strike{color:rgba(255,255,255,.45)}
.pill-tag.limited{background:var(--ruby);color:#fff}

/* ---------- misc ---------- */
.kicker-note{font-size:13px;color:var(--ink-mute);max-width:62ch}
.section-head{margin-bottom:var(--sp-huge)}
.section-head .display-xl{max-width:18em}
.formula{
  font-size:clamp(28px,4vw,44px);font-weight:300;letter-spacing:-.8px;
  font-feature-settings:"ss01";
}
.formula sup{font-size:.55em;vertical-align:super}
.formula .t-b0{color:var(--primary-deep)}
.formula .t-cx{color:var(--ruby)}
.formula .t-ex{color:var(--lemon)}
.formula .t-w{color:var(--ink-mute)}

/* ---------- quote fan (audience intelligence mockup) ---------- */
.quote-fan{position:relative;height:280px}
.quote-fan .qcard{
  position:absolute;left:0;right:36px;top:0;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--sh2);padding:var(--sp-lg) var(--sp-xl);font-size:14px;color:var(--ink-secondary);
}
.quote-fan .qcard b{display:block;font-weight:400;color:var(--ink);font-size:15px;margin-bottom:10px}
.quote-fan .qcard .chip{margin-top:10px}
.quote-fan .qcard:nth-child(1){transform:rotate(-4deg) translate(0,0);z-index:1}
.quote-fan .qcard:nth-child(2){transform:rotate(2deg) translate(28px,64px);z-index:2}
.quote-fan .qcard:nth-child(3){transform:rotate(-1deg) translate(6px,128px);z-index:3}
@media(max-width:520px){.quote-fan{height:360px}.quote-fan .qcard{right:12px}}

::selection{background:var(--primary-subdued);color:var(--primary-press)}