/* ============================================================
   studio.css — the six-pillar expansion: pillar tiles, priced
   packages, studio formats, courses, research fields, checkout.
   Loaded after jynapse.css; it reuses its variables and card
   language (panel, line, gold accent, indigo→cyan glow).
   ============================================================ */

/* ---- pillars (homepage + about) ---- */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{position:relative;display:flex;flex-direction:column;gap:.45rem;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;color:var(--ink);transition:.3s}
.pillar:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.4)}
.pillar.core{border-color:rgba(34,211,238,.45);background:linear-gradient(180deg,rgba(109,94,252,.14),var(--panel));box-shadow:var(--shadow)}
.pillar-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--gold-2);margin-bottom:.4rem;
  background:linear-gradient(135deg,rgba(109,94,252,.22),rgba(34,211,238,.08));border:1px solid rgba(109,94,252,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.11)}
.pillar-ico svg{width:24px;height:24px}
.pillar-tag{font-size:.78rem;color:var(--gold-2);font-weight:600;letter-spacing:.03em}
.pillar h3{font-size:1.15rem}
.pillar p{color:var(--muted);font-size:.93rem;flex:1;margin:0}
.pillar .card-link{margin-top:.5rem}

/* ---- price cards (app.css supplies the base; these are the theme accents) ---- */
.price-card{padding:30px 26px}
.price-card:hover{border-color:rgba(109,94,252,.4)}
.price-card.featured{border-color:rgba(34,211,238,.45);
  background:linear-gradient(180deg,rgba(109,94,252,.12),var(--panel));box-shadow:var(--shadow)}
.price-card .ribbon{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#0a0f1f;letter-spacing:.08em;text-transform:uppercase}
.price-card .tier{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:.5rem}
.price-card h3{font-size:1.35rem}
.price-card .price{font-family:var(--font-head);font-size:2.3rem;line-height:1;color:var(--ink);margin:.55rem 0 .35rem;font-weight:700}
.price-card .price .cur{font-size:1rem;color:var(--gold-2);margin-right:.35rem;vertical-align:.7em;font-weight:600}
.price-card .price small{display:block;font-size:.8rem;color:var(--muted);font-weight:400;margin-top:.4rem;font-family:var(--font-body)}
.price-card .engage-best{margin:.2rem 0 .6rem}
.price-card .tagline{font-size:.93rem;margin-bottom:.9rem}
.price-card ul{gap:.55rem;margin:.6rem 0 1.3rem}
.price-card li{font-size:.9rem}
.price-card li::before{color:var(--gold-2)}
.price-card .deliver{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.86rem;margin:0 0 1rem}
.price-card .deliver svg{width:16px;height:16px;color:var(--gold-2)}
.pricing-grid.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
.pricing-grid.compact{gap:18px}
.pricing-grid.compact .price-card{padding:24px 22px}
.pricing-grid.compact .price-card .price{font-size:1.9rem}
.course-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .9rem}
.course-meta span{font-size:.74rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line)}

/* ---- add-ons ---- */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.addon{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;display:flex;flex-direction:column;gap:.35rem;transition:.25s}
.addon:hover{border-color:rgba(109,94,252,.4)}
.addon b{font-size:1rem}
.addon .price{font-family:var(--font-head);font-size:1.1rem;color:var(--gold-2);font-weight:700}
.addon .price small{font-family:var(--font-body);font-weight:400;font-size:.78rem}
.addon p{color:var(--muted);font-size:.88rem;flex:1;margin:.2rem 0 .6rem}
.arrow-link{color:var(--gold-2);font-size:.88rem;font-weight:600}
.arrow-link:hover{text-decoration:underline}

/* ---- studio formats ---- */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fmt{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:.3s}
.fmt:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.4)}
.fmt.featured{border-color:rgba(34,211,238,.45);background:linear-gradient(180deg,rgba(109,94,252,.12),var(--panel));box-shadow:var(--shadow)}
.fmt-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.fmt-head .cap-icon{width:42px;height:42px;border-radius:11px}
.fmt-head .cap-icon svg{width:20px;height:20px}
.fmt h3,.field h3,.course-card h3{font-size:1.1rem}
.fmt-tag{color:var(--gold-2);font-size:.84rem;font-weight:600;display:block;margin-bottom:.5rem}
.fmt p{color:var(--muted);font-size:.92rem}
.fmt-needs{margin:.6rem 0 .9rem;font-size:.86rem;color:var(--muted)}
.fmt-needs b{display:block;color:var(--ink);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.fmt-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.fmt-price{font-family:var(--font-head);font-size:1.3rem;font-weight:700;line-height:1.1}
.fmt-price small{display:block;font-family:var(--font-body);font-size:.74rem;color:var(--muted);font-weight:400;margin-top:.25rem}
.fmt-price small.fmt-bundle{color:var(--gold-2)}

/* ---- courses ---- */
.course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.course-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:.35rem;transition:.3s}
.course-card:hover{border-color:rgba(109,94,252,.4)}
.course-card.featured{border-color:rgba(34,211,238,.45);background:linear-gradient(180deg,rgba(109,94,252,.12),var(--panel));box-shadow:var(--shadow)}
.course-card > p.muted{font-size:.93rem}
.course-modules-toggle{margin:.6rem 0 .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2)}
.course-modules-toggle summary{cursor:pointer;padding:.75rem 1rem;color:var(--gold-2);font-weight:600;font-size:.9rem;list-style:none}
.course-modules-toggle summary::-webkit-details-marker{display:none}
.course-modules-toggle summary::after{content:"+";float:right;font-size:1.1rem}
.course-modules-toggle[open] summary::after{content:"−"}
.course-modules{list-style:none;margin:0;padding:0 .8rem .8rem;gap:8px}
.course-modules .module-row{padding:10px 14px;background:var(--panel);font-size:.9rem}
.course-modules .module-num{width:26px;height:26px;font-size:.8rem;background:rgba(109,94,252,.18);color:var(--gold-2)}
.course-card .fits-label{margin-top:.2rem}
.course-card .tick-list{margin:.4rem 0 1rem}
.course-card .fmt-foot{margin-top:auto}

/* ---- research ---- */
.research-hero .ind-nav{margin-top:1.4rem}
.research-hero .chip{cursor:default}
.motto{font-family:var(--font-head);color:var(--gold-2);font-size:1.15rem;margin:.6rem 0 1.4rem}
.center-cta{justify-content:center}
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.story-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.story-cards .cap-item{flex-direction:column;align-items:flex-start;gap:.3rem}
.story-cards b{color:var(--gold-2);font-family:var(--font-head);font-size:1.05rem}
.story-cards small{color:var(--muted);font-size:.86rem;line-height:1.5}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.3s}
.field:hover{border-color:rgba(34,211,238,.4)}
.field-sub{color:var(--gold-2);font-size:.84rem;font-weight:600;display:block;margin:.2rem 0 .6rem}
.field-reality{color:var(--muted);font-size:.92rem;font-style:italic;margin-bottom:.6rem}
.field-reality b{color:var(--ink);font-style:normal;font-weight:600}
.field .tick-list{margin:.4rem 0 .9rem}
.process.five{grid-template-columns:repeat(5,1fr);gap:18px}
.process.five .process-step{padding:20px}
.process.five .process-step h4{font-size:1rem}
.process.five .process-step p{font-size:.88rem}
.step-tools{display:block;margin-top:.5rem;font-size:.76rem;color:var(--gold-2);font-weight:600}
.cap-grid .cap-item small.muted{font-size:.84rem}

/* ---- compare table (extends .cap-table) ---- */
.cap-table td:first-child{color:var(--gold-2);font-weight:600;white-space:nowrap}
.cap-table small{font-size:.82rem}

/* ---- checkout ---- */
.checkout-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.order-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.order-card .kind{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:.4rem}
.order-card h3{font-size:1.4rem}
.order-card .engage-best{margin:.3rem 0 .6rem}
.order-card p.muted{font-size:.93rem}
.order-card .tick-list{margin:.8rem 0 1.2rem;font-size:.9rem}
.order-line{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.order-line small{display:block;color:var(--muted);font-size:.78rem;font-weight:400;font-family:var(--font-body)}
.order-line.total{font-family:var(--font-head);font-size:1.3rem;font-weight:700;color:var(--ink)}
.pay-methods{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.pay-methods span{font-size:.74rem;padding:.3rem .7rem;border-radius:999px;background:rgba(74,222,128,.1);color:#7ee0a4;border:1px solid rgba(74,222,128,.25)}
.contact-form h3{margin-bottom:.2rem}
.pay-result{max-width:640px;margin:0 auto;text-align:center}
.pay-result .big{font-family:var(--font-head);font-size:3.2rem;line-height:1;margin-bottom:1rem;color:var(--gold-2)}
.pay-result .lead{margin:1rem auto 1.6rem}

/* ---- free lessons ---- */
.lesson-list{display:grid;gap:12px}
.lesson-list a{display:flex;align-items:center;gap:1rem;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);transition:.2s;font-size:.95rem}
.lesson-list a:hover{border-color:rgba(34,211,238,.45);transform:translateX(3px)}
.lesson-list .num{font-family:var(--font-head);color:var(--gold-2);font-weight:700;flex-shrink:0}
.lesson-list .free{margin-left:auto;flex-shrink:0;font-size:.7rem;padding:.2rem .6rem;border-radius:999px;background:rgba(74,222,128,.12);color:#7ee0a4;letter-spacing:.06em;text-transform:uppercase}

/* ---- homepage packages teaser ---- */
.teaser-links{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}

/* ---- responsive ---- */
@media(max-width:960px){
  .pillar-grid,.fmt-grid,.addon-grid,.pricing-grid,.pricing-grid.compact{grid-template-columns:1fr 1fr}
  .field-grid,.story-grid,.checkout-grid,.course-grid{grid-template-columns:1fr}
  .process.five{grid-template-columns:repeat(2,1fr)}
  .process.five .process-arrow{display:none}
}
@media(max-width:680px){
  .pillar-grid,.fmt-grid,.addon-grid,.pricing-grid,.pricing-grid.two,.pricing-grid.compact,.story-cards{grid-template-columns:1fr}
  .process.five{grid-template-columns:1fr}
  .fmt-foot{flex-direction:column;align-items:flex-start}
  .fmt-foot .btn{width:100%;text-align:center}
}

/* ---- founding-cohort courses, unpublished lessons ---- */
.soon-badge{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.28rem .7rem;border-radius:999px;
  background:rgba(232,182,84,.12);color:var(--gold-2);border:1px dashed rgba(232,182,84,.45);margin-bottom:.3rem}
.lesson-list .soon{display:flex;align-items:center;gap:1rem;padding:16px 20px;background:transparent;border:1px dashed var(--line);
  border-radius:var(--radius-sm);color:var(--muted);font-size:.95rem}
.lesson-list .soon .free{background:rgba(255,255,255,.06);color:var(--muted)}

/* ---- sample work (case studies) ---- */
.case-list{display:grid;gap:22px}
.case{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.case-head .kind{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:.35rem}
.case-head h3{font-size:1.3rem;margin-bottom:1rem}
.case-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
.case-grid p{color:var(--muted)}
.case-grid .tick-list{margin-top:.5rem;font-size:.92rem}
.case-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.case-result{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--ink);font-size:.93rem}
.case-result svg{width:16px;height:16px;color:var(--gold-2);flex-shrink:0}

/* ---- the studio sample film: portrait, beside its description ---- */
.sample-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:48px;align-items:center}
.film.portrait{aspect-ratio:9/16;width:100%;max-width:340px}
.sample-grid .tick-list{margin:1rem 0}

@media(max-width:960px){ .case-grid,.sample-grid{grid-template-columns:1fr} .film.portrait{margin:0 auto} }

/* ---- pillars: research (the core) spans the row, the other six sit 3 × 2 ---- */
.pillar-grid .pillar.core{grid-column:1/-1;display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:24px;row-gap:.3rem;align-items:center}
.pillar-grid .pillar.core .pillar-ico{grid-row:1/4;margin:0}
.pillar-grid .pillar.core .card-link{grid-column:3;grid-row:1/4;margin:0;white-space:nowrap}
.pillar-grid .pillar.core p{max-width:78ch}
@media(max-width:680px){.pillar-grid .pillar.core{display:flex;flex-direction:column;align-items:flex-start}}

/* ---- dashboards: the live sample ---- */
/* --series-1 is the brand indigo, validated on the panel surface (#121a35):
   OKLCH L inside the dark band, chroma above the floor, >= 3:1 contrast.
   The brand cyan failed the lightness band, so it never carries data. */
.dbx{--series-1:#6d5efc;--series-1-hot:#8a7dff;--ref:#7d88ad;--grid:rgba(234,240,255,.07);
  --good:#4ade80;--warn:#f6b44b;--crit:#f87171;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:18px}
.dbx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.dbx-head h2{font-size:1.3rem;margin-top:.35rem}
.dbx-sample{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  border:1px dashed rgba(246,180,75,.5);border-radius:999px;padding:.22rem .65rem}
.dbx-refresh{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.dbx-refresh svg{width:14px;height:14px}
.dbx-kpis{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:14px}
.dbx-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.dbx-label{font-size:.8rem;color:var(--muted)}
.dbx-hero{font-family:var(--font-body);font-weight:600;font-size:48px;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.dbx-value{font-family:var(--font-body);font-weight:600;font-size:1.9rem;line-height:1.1;color:var(--ink)}
.dbx-sub{font-size:.8rem;color:var(--muted)}
.dbx-meter{height:6px;border-radius:6px;background:rgba(109,94,252,.22);overflow:hidden;margin:.3rem 0 .1rem}
.dbx-meter i{display:block;height:100%;background:var(--series-1);border-radius:6px}
.dbx-delta{font-size:.82rem;font-weight:600}
.dbx-delta em{font-style:normal;font-weight:400;color:var(--muted)}
.dbx-delta.good{color:var(--good)} .dbx-delta.bad{color:var(--warn)} .dbx-delta.crit{color:var(--crit)}
.dbx-charts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}
.dbx-card{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;min-width:0}
.dbx-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:.9rem;margin-bottom:.6rem}
.dbx-unit{font-size:.75rem;color:var(--muted)}
.dbx-legend{margin-left:auto;display:flex;gap:1rem;font-size:.78rem;color:var(--muted)}
.dbx-legend span{display:inline-flex;align-items:center;gap:.4rem}
.k-line,.k-bar{display:inline-block;width:16px;height:0;border-top:2px solid var(--series-1)}
.k-dash{display:inline-block;width:16px;height:0;border-top:2px dashed var(--ref)}
.dbx-plot{min-height:120px;outline:none;border-radius:6px}
.dbx-plot:focus-visible{box-shadow:0 0 0 2px var(--series-1-hot)}
.dbx-plot svg{display:block;overflow:visible}
.dbx-plot .grid{stroke:var(--grid);stroke-width:1}
.dbx-plot .axis{stroke:var(--grid);stroke-width:1}
.dbx-plot .tick{fill:var(--muted);font:12px var(--font-body);font-variant-numeric:tabular-nums}
.dbx-plot .dlabel{fill:var(--ink);font:600 12px var(--font-body)}
.dbx-plot .ref-t{fill:var(--muted);font-weight:500}
.dbx-plot .series{fill:none;stroke:var(--series-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dbx-plot .ref{stroke:var(--ref);stroke-width:1.5;stroke-dasharray:5 4}
.dbx-plot .dot{fill:var(--series-1);stroke:var(--panel);stroke-width:2}
.dbx-plot .dot.hot{fill:var(--series-1-hot)}
.dbx-plot .cross{stroke:rgba(234,240,255,.28);stroke-width:1}
.dbx-plot .bar{cursor:default;outline:none}
.dbx-plot .bar .fill{fill:var(--series-1);transition:fill .15s}
.dbx-plot .bar.on .fill,.dbx-plot .bar:focus .fill{fill:var(--series-1-hot)}
.dbx-tip{position:absolute;z-index:3;pointer-events:none;min-width:150px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:.78rem;box-shadow:var(--shadow)}
.dbx-tip .head{color:var(--muted);margin-bottom:.3rem}
.dbx-tip .row{display:flex;align-items:center;gap:.45rem;line-height:1.6}
.dbx-tip .row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dbx-tip .row span{color:var(--muted)}
.dbx-tip .foot{margin-top:.3rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.3rem}
.dbx-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dbx-title{display:block;font-size:.9rem;margin-bottom:.7rem}
.dbx-alerts,.dbx-sched{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.86rem;color:var(--muted)}
.dbx-alerts li{display:grid;grid-template-columns:92px 1fr;gap:.6rem;align-items:baseline}
.dbx-alerts .st{font-size:.74rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.dbx-alerts .crit .st{color:var(--crit)} .dbx-alerts .warn .st{color:var(--warn)} .dbx-alerts .good .st{color:var(--good)}
.dbx-sched li{display:grid;grid-template-columns:118px 1fr;gap:.6rem;align-items:baseline}
.dbx-sched .when{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dbx-table summary{cursor:pointer;color:var(--muted);font-size:.86rem}
.dbx-table .cap-table-wrap{margin-top:.8rem}
.cap-table.cadence td:nth-child(2){white-space:nowrap}
.cap-item.kind{align-items:flex-start}
@media(max-width:960px){
  .dbx-kpis{grid-template-columns:1fr 1fr} .dbx-kpis .hero{grid-column:1/-1}
  .dbx-charts,.dbx-lists{grid-template-columns:1fr}
}
@media(max-width:680px){
  .dbx{padding:16px}
  .dbx-alerts li,.dbx-sched li{grid-template-columns:1fr;gap:.1rem}
}