/* =========================================================================
   Nancy AI — Development page (development.html) specific styles.
   Loaded only by development.html. Shared components live in main.css;
   patterns shared with other stub-style pages (stub/proof/faq/ctaband)
   are intentionally copied here per the per-page CSS ownership rule.
   ========================================================================= */

/* ───────── STUB HERO ───────── */
.stub{position:relative;isolation:isolate;overflow:hidden;padding:112px 0 128px;color:#fff;
  background:
    radial-gradient(54% 86% at 84% 16%, rgba(47,197,255,.18) 0%, rgba(47,197,255,0) 62%),
    radial-gradient(48% 74% at 72% 88%, rgba(212,75,232,.24) 0%, rgba(212,75,232,0) 68%),
    linear-gradient(128deg,#1F1260 0%,#160D48 48%,#090A10 100%);}
.stub::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 38%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 38%,#000 100%);}
.stub::after{content:"";position:absolute;z-index:-1;top:50%;right:-90px;width:580px;height:580px;transform:translateY(-50%);border-radius:50%;pointer-events:none;opacity:.78;
  background:
    radial-gradient(circle at center,rgba(212,75,232,.32) 0 4px,transparent 5px),
    radial-gradient(circle at center,transparent 0 92px,rgba(163,148,255,.22) 93px 94px,transparent 95px),
    radial-gradient(circle at center,transparent 0 168px,rgba(47,197,255,.17) 169px 170px,transparent 171px),
    radial-gradient(circle at center,transparent 0 250px,rgba(255,255,255,.10) 251px 252px,transparent 253px);}
.stub-inner{position:relative;z-index:1;max-width:780px;}
.stub .eyebrow{color:var(--v300);margin-bottom:16px;}
.stub h1{color:#fff;margin-bottom:22px;}
.stub .lede{color:rgba(255,255,255,.78);margin-bottom:32px;max-width:700px;}
.stub-cta{display:flex;gap:14px;flex-wrap:wrap;}
.stub-cta .btn{min-height:48px;}
.stub-cta .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ───────── PROOF STRIP ───────── */
.proof{background:var(--bg-ink);color:#fff;padding:72px 0;position:relative;overflow:hidden;}
.proof::before{content:"";position:absolute;inset:0;background:var(--grad-aurora);opacity:.5;pointer-events:none;}
.proof-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.proof-item{text-align:center;padding:0 8px;}
.proof-num{font:800 62px/0.95 var(--font-display);letter-spacing:-.035em;color:#fff;margin-bottom:10px;}
.proof-num span{color:var(--v400);font-size:.5em;vertical-align:super;}
.proof-label{font:500 14px/1.45 var(--font-body);color:rgba(255,255,255,.7);}

/* ───────── IDP BAND ───────── */
.idp{padding:120px 0;background:#fff;}
.idp-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.idp-head .eyebrow{margin-bottom:14px;}
.idp-head h2{margin-bottom:18px;}
.idp .pipe{margin-bottom:56px;grid-template-columns:repeat(4,1fr);}
.idp-body{display:grid;grid-template-columns:1fr 0.8fr;gap:56px;align-items:center;}
.idp-body .out-list{max-width:460px;}

/* ───────── SHARED DIAGRAM VOCABULARY (IDP timeline) ─────────
   HTML/CSS diagram — NO text inside scalable SVGs. Labels/numbers are
   real HTML type on a white card, so contrast is measured against #fff. */
.impact-diagram{aspect-ratio:auto;background:var(--bg-soft-2);display:grid;place-items:center;padding:32px;}
.dgm{margin:0;width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 14px 34px rgba(31,18,96,.08);padding:32px 30px 30px;}
.dgm-title{font:700 18px/1.3 var(--font-display);color:var(--ink-900);margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--line);}

/* horizontal quarterly timeline */
.tl{list-style:none;margin:0 0 30px;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);}
.tl::before{content:"";position:absolute;top:30px;left:12.5%;right:12.5%;height:3px;margin-top:-1.5px;background:#E3E0EE;border-radius:2px;z-index:0;}
.tl::after{content:"";position:absolute;top:30px;left:12.5%;width:75%;height:3px;margin-top:-1.5px;background:var(--grad-bar);border-radius:2px;z-index:1;transform:scaleX(0);transform-origin:left center;animation:tlDraw 1.2s .3s cubic-bezier(.4,0,.2,1) forwards;}
.tl-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2;}
.tl-m{font:700 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--v600);margin-bottom:11px;}
.tl-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--v500);opacity:0;transform:scale(.4);animation:tlNode .45s ease forwards;animation-delay:var(--d);}
.tl-name{font:700 13px/1.25 var(--font-display);color:var(--ink-900);margin-top:14px;}

/* uplift target metric */
.dgm-metric{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--v50);border:1px solid var(--v100);border-radius:var(--r-md);}
.dgm-metric-num{font:800 30px/1 var(--font-display);color:var(--v600);letter-spacing:-.02em;flex-shrink:0;}
.dgm-metric-body{display:flex;flex-direction:column;gap:4px;}
.dgm-metric-lbl{font:700 14px/1 var(--font-display);color:var(--ink-900);}
.dgm-metric-sub{font:500 12.5px/1.35 var(--font-body);color:var(--ink-600);}

@keyframes tlDraw{to{transform:scaleX(1);}}
@keyframes tlNode{to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .tl::after{animation:none;transform:scaleX(1);}
  .tl-dot{animation:none;opacity:1;transform:scale(1);}
}

/* ───────── LDP BAND ───────── */
.ldp{padding:120px 0;background:var(--bg-soft);}
.ldp-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:center;}
.ldp-vis .donut-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;}
.ldp-text .eyebrow{margin-bottom:14px;}
.ldp-text h2{margin-bottom:18px;}
.ldp-text .lede{margin-bottom:26px;}

/* ───────── FAQ ───────── */
.faq{padding:120px 0;background:#fff;}
.faq-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.faq-head .eyebrow{margin-bottom:14px;}
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{padding:28px 0;border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item h3{font:700 19px/1.35 var(--font-display);color:var(--ink-900);margin-bottom:12px;}
.faq-item p{font:400 15px/1.6 var(--font-body);color:var(--ink-600);}
.faq-item p a{color:var(--v600);text-decoration:underline;text-underline-offset:3px;}
.faq-item p a:hover{color:var(--v500);}

/* ───────── CTA BAND ───────── */
.ctaband{padding:120px 0;background:var(--bg-ink);color:#fff;position:relative;overflow:hidden;text-align:center;}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 20%, rgba(91,63,228,0.42) 0%, rgba(91,63,228,0) 65%);pointer-events:none;}
.ctaband-inner{position:relative;max-width:720px;margin:0 auto;}
.ctaband .eyebrow{color:var(--v300);margin-bottom:18px;}
.ctaband h2{color:#fff;margin-bottom:20px;}
.ctaband p{color:rgba(255,255,255,.78);font:400 18px/1.55 var(--font-body);max-width:540px;margin:0 auto 32px;}
.ctaband-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.ctaband-cta .btn{min-height:48px;}
.ctaband-cta .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ───────── RESPONSIVE ───────── */
@media (max-width:1100px){
  .proof-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px;}
  .idp .pipe{grid-template-columns:repeat(2,1fr);}
  .idp-body{grid-template-columns:1fr;gap:40px;}
  .idp-body .out-list{max-width:none;}
  .ldp-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:900px){
  .stub, .proof, .idp, .ldp, .faq, .ctaband{padding:88px 0;}
}
@media (max-width:720px){
  .stub, .proof, .idp, .ldp, .faq, .ctaband{padding:64px 0;}
  .proof-num{font-size:48px;}
  .idp .pipe{gap:10px;}
  .ldp-vis .donut-wrap{padding:22px;}
  .ctaband p{font-size:16px;}
  .ctaband-cta .btn{width:100%;justify-content:center;}
  .stub{padding:72px 0 88px;}
  .stub::before{opacity:.2;}
  .stub::after{right:-330px;opacity:.55;}
}
@media (max-width:480px){
  .proof-grid{grid-template-columns:1fr;gap:28px;}
  .idp .pipe{grid-template-columns:1fr;}
  .ldp-vis .donut-wrap{flex-direction:column;align-items:flex-start;}
  .stub, .proof, .idp, .ldp, .faq, .ctaband{padding:52px 0;}
}