/* ============================================================
   CASE STUDY — cs.css (Ayush-reference structure)
   ============================================================ */

.cs-hero{ padding:clamp(3.2rem,8vw,6rem) 0 clamp(2rem,4vw,3rem); }
.cs-crumb{ font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.5em; margin-bottom:1.6rem; }
.cs-crumb a{ color:#0F47FF; }
.cs-crumb span{ opacity:.4; }
.cs-hero h1{ font-size:clamp(2.3rem,6.5vw,4.2rem); max-width:16ch; }
.cs-hero h1 .acc{ color:var(--acc); }
.cs-tagline{ font-size:clamp(.98rem,1.9vw,1.2rem); color:var(--ink2); max-width:56ch; line-height:1.7; margin-top:1.1rem; }

.cs-cover{ width:100%; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); margin-top:2.2rem; background:var(--bg2); }
.cs-cover img{ width:100%; display:block; }

.cs-meta{ display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; margin-top:2rem; transition:background .3s; }
.cs-meta-item{ padding:1.2rem 1.1rem; box-shadow:1px 0 0 var(--line); }
.cs-meta-item:last-child{ box-shadow:none; }
.cs-meta-item .ml{ font-family:var(--f-mono); font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.4rem; }
.cs-meta-item .mv{ font-size:.86rem; font-weight:600; line-height:1.4; }
@media(max-width:640px){ .cs-meta{ grid-template-columns:repeat(2,1fr); } .cs-meta-item{ box-shadow:0 1px 0 var(--line); } }

.cs-sec{ padding:clamp(2.6rem,5.5vw,4.2rem) 0; }
.cs-sec + .cs-sec{ box-shadow:0 -1px 0 var(--line); }
.cs-num{ font-family:var(--f-mono); font-size:.78rem; color:var(--acc); display:block; margin-bottom:.7rem; }
.cs-sec h2{ font-size:clamp(1.5rem,3.6vw,2.3rem); max-width:20ch; margin-bottom:1.5rem; }
.cs-sec h3{ font-size:clamp(1.05rem,2.3vw,1.4rem); margin:1.8rem 0 .8rem; }
.cs-sec p{ font-size:.96rem; color:var(--ink2); max-width:66ch; line-height:1.8; }
.cs-sec p+p{ margin-top:.85rem; }

.cs-quote{ background:var(--acc-s); border-radius:var(--r); padding:1.5rem 1.9rem; margin:1.7rem 0; transition:background .3s; }
.cs-quote p{ font-size:clamp(1.02rem,2vw,1.28rem); font-weight:700; font-style:italic; color:var(--ink); max-width:54ch; line-height:1.4; }

.cs-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cs-sum-card{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.6rem 1.4rem; transition:background .3s, box-shadow .25s; }
.cs-sum-card:hover{ box-shadow:var(--shadow-md); }
.cs-sum-card .sl{ font-family:var(--f-mono); font-size:.68rem; color:var(--acc); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.75rem; }
.cs-sum-card p{ font-size:.9rem; color:var(--ink2); line-height:1.68; }
@media(max-width:640px){ .cs-summary{ grid-template-columns:1fr; } }

.cs-steps{ display:flex; flex-direction:column; gap:1.2rem; margin-top:1.4rem; }
.cs-step{ display:grid; grid-template-columns:2.6rem 1fr; gap:1.1rem; align-items:start; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.4rem 1.6rem; transition:background .3s; }
.cs-step-n{ font-family:var(--f-mono); font-size:1.2rem; font-weight:700; color:var(--acc); }
.cs-step h4{ font-size:.96rem; font-weight:700; margin-bottom:.4rem; }
.cs-step p{ font-size:.87rem; color:var(--muted); line-height:1.7; margin-top:0; }

.cs-flow{ display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; margin:1.6rem 0; transition:background .3s; }
.cs-flow-step{ padding:1.2rem .8rem; text-align:center; box-shadow:1px 0 0 var(--line); }
.cs-flow-step:last-child{ box-shadow:none; }
.cs-flow-n{ display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--acc); color:#fff; font-size:.7rem; font-weight:700; align-items:center; justify-content:center; margin-bottom:.55rem; }
.cs-flow-step h5{ font-size:.8rem; font-weight:700; }
.cs-flow-step p{ font-size:.7rem; color:var(--muted); margin-top:.25rem; line-height:1.35; }
@media(max-width:580px){ .cs-flow{ grid-template-columns:1fr 1fr; } }

.cs-kdm{ margin:1.8rem 0; }
.cs-kdm-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:.9rem; }
.cs-kdm-badge{ width:34px; height:34px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-weight:700; font-size:.85rem; flex-shrink:0; }
.cs-kdm-head h3{ margin:0; font-size:clamp(1.05rem,2.3vw,1.4rem); }

.cs-outcomes{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.6rem 0; }
.cs-oc{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.4rem 1.5rem; transition:background .3s; }
.cs-oc .oc-icon{ font-size:1.3rem; margin-bottom:.6rem; }
.cs-oc p{ font-size:.9rem; color:var(--ink2); line-height:1.72; margin-top:0; }
@media(max-width:600px){ .cs-outcomes{ grid-template-columns:1fr; } }

.cs-learn{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.4rem; }
.cs-learn-item{ display:grid; grid-template-columns:2.3rem 1fr; gap:1rem; align-items:start; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.4rem 1.5rem; transition:background .3s; }
.cs-learn-n{ font-family:var(--f-mono); font-size:1.3rem; font-weight:300; color:var(--faint); }
.cs-learn-item h4{ font-size:.94rem; font-weight:700; margin-bottom:.35rem; }
.cs-learn-item p{ font-size:.88rem; color:var(--muted); line-height:1.7; margin-top:0; }

.cs-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem; }
.cs-tag{ font-size:.72rem; font-weight:600; color:var(--muted); background:var(--bg2); padding:.3em .8em; border-radius:100px; }

.cs-next{ background:transparent; box-shadow:0 -1px 0 var(--line); padding:2.6rem 0 1.6rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem; margin-top:3.5rem; }

/* ============================================================
   JOURNEY MAP
   ============================================================ */
.journey-map{ display:flex; gap:0; margin:1.8rem 0; }
.journey-stage{
  flex:1; position:relative; padding:0 .9rem; text-align:center;
}
.journey-stage:not(:last-child)::after{
  content:'→'; position:absolute; right:-.15rem; top:.35rem; color:var(--line2); font-size:1.1rem;
}
.journey-mood{ font-size:1.5rem; line-height:1; margin-bottom:.6rem; }
.journey-stage h5{ font-size:.85rem; font-weight:700; margin-bottom:.5rem; }
.journey-tag{
  display:inline-block; font-family:var(--f-mono); font-size:.62rem; color:var(--muted);
  background:var(--bg2); padding:.22em .6em; border-radius:100px; margin-bottom:.6rem;
}
.journey-note{ font-size:.76rem; color:var(--muted); line-height:1.55; }
.journey-note strong{ color:var(--ink2); font-weight:600; }
@media(max-width:700px){
  .journey-map{ flex-direction:column; gap:1.4rem; }
  .journey-stage{ text-align:left; padding:0 0 1.2rem 1.2rem; border-left:2px solid var(--line); }
  .journey-stage:not(:last-child)::after{ display:none; }
}

/* ============================================================
   CONCEPTUALISING — sketch-style exploration cards
   ============================================================ */
.concept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.6rem 0; }
.concept-card{
  border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--surface);
  overflow:hidden; transition:border-color .25s, background .3s;
}
.concept-card:hover{ border-color:var(--acc); }
.concept-sketch{
  aspect-ratio:4/3; position:relative; background:
    repeating-linear-gradient(135deg, var(--bg2) 0px, var(--bg2) 1px, transparent 1px, transparent 10px),
    var(--bg);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.concept-sketch svg{ width:100%; height:100%; opacity:.75; }
.concept-body{ padding:1.1rem 1.2rem 1.3rem; }
.concept-label{ font-family:var(--f-mono); font-size:.68rem; color:var(--acc); text-transform:uppercase; letter-spacing:.06em; }
.concept-body h5{ font-size:.92rem; font-weight:700; margin-top:.4rem; }
.concept-body p{ font-size:.8rem; color:var(--muted); margin-top:.4rem; line-height:1.6; }
.concept-verdict{
  display:inline-block; margin-top:.7rem; font-size:.66rem; font-weight:700; letter-spacing:.03em;
  padding:.25em .65em; border-radius:100px;
}
.concept-verdict.selected{ background:#DCFCE7; color:#166534; }
.concept-verdict.parked{ background:var(--bg2); color:var(--muted); }
[data-theme="dark"] .concept-verdict.selected{ background:#0F3320; color:#4ADE80; }
@media(max-width:700px){ .concept-grid{ grid-template-columns:1fr; } }

/* "Shipped" real-screenshot callout, used under Conceptualising */
.concept-shipped{
  display:grid; grid-template-columns:220px 1fr; gap:1.3rem; align-items:center;
  background:var(--bg2); border-radius:var(--r); padding:1.1rem; margin-top:1.4rem;
  transition:background .3s;
}
.concept-shipped-img{ border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.concept-shipped-img img{ width:100%; display:block; }
.concept-shipped-label{
  font-family:var(--f-mono); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#166534; background:#DCFCE7; padding:.25em .7em; border-radius:100px; display:inline-block; margin-bottom:.6rem;
}
[data-theme="dark"] .concept-shipped-label{ background:#0F3320; color:#4ADE80; }
.concept-shipped-text p{ font-size:.88rem; color:var(--ink2); line-height:1.7; margin:0; }
@media(max-width:640px){ .concept-shipped{ grid-template-columns:1fr; } }

/* ============================================================
   WIREFRAMES — low-fidelity mockups
   ============================================================ */
.wireframe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.6rem 0; }
.wf-card{
  border:1px solid var(--line2); border-radius:var(--r); overflow:hidden;
  background:var(--surface); transition:background .3s;
}
.wf-mock{ background:#F4F4F5; padding:.8rem; aspect-ratio:4/3; display:flex; flex-direction:column; gap:.5rem; }
[data-theme="dark"] .wf-mock{ background:#232326; }
.wf-bar{ height:16px; background:#D4D4D8; border-radius:3px; width:60%; }
.wf-line{ height:7px; background:#D4D4D8; border-radius:2px; }
.wf-line.w100{ width:100%; } .wf-line.w80{ width:80%; } .wf-line.w60{ width:60%; } .wf-line.w40{ width:40%; }
[data-theme="dark"] .wf-bar, [data-theme="dark"] .wf-line{ background:#3A3A3E; }
.wf-box{
  flex:1; border:1.5px solid #D4D4D8; border-radius:4px;
  background-image:linear-gradient(45deg, transparent 48%, #D4D4D8 49%, #D4D4D8 51%, transparent 52%),
                    linear-gradient(-45deg, transparent 48%, #D4D4D8 49%, #D4D4D8 51%, transparent 52%);
}
[data-theme="dark"] .wf-box{ border-color:#3A3A3E; background-image:linear-gradient(45deg, transparent 48%, #3A3A3E 49%, #3A3A3E 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, #3A3A3E 49%, #3A3A3E 51%, transparent 52%); }
.wf-btn{ height:22px; width:70px; border-radius:5px; background:#D4D4D8; align-self:flex-start; }
[data-theme="dark"] .wf-btn{ background:#3A3A3E; }
.wf-label{ padding:.85rem 1.1rem; font-size:.82rem; font-weight:600; box-shadow:0 -1px 0 var(--line); }
.wf-label span{ display:block; font-family:var(--f-mono); font-size:.68rem; font-weight:500; color:var(--muted); margin-top:.2rem; }

/* Additional wireframe primitives — used to mirror real screen structure */
.wf-row{ display:flex; align-items:center; gap:.4rem; }
.wf-circle{ width:20px; height:20px; border-radius:50%; background:#D4D4D8; flex-shrink:0; }
[data-theme="dark"] .wf-circle{ background:#3A3A3E; }
.wf-cards{ display:flex; gap:.4rem; flex:1; }
.wf-card-block{ flex:1; background:#E4E4E7; border-radius:4px; }
[data-theme="dark"] .wf-card-block{ background:#2E2E32; }
.wf-cols{ display:flex; gap:.5rem; flex:1; }
.wf-col{ flex:1; display:flex; flex-direction:column; gap:.35rem; }
.wf-chev-row{ display:flex; align-items:center; justify-content:space-between; padding:.2rem 0; }
.wf-chev{ width:6px; height:6px; border-top:1.5px solid #A1A1AA; border-right:1.5px solid #A1A1AA; transform:rotate(45deg); flex-shrink:0; }
[data-theme="dark"] .wf-chev{ border-color:#6B6B70; }
.wf-toggle{ width:22px; height:11px; border-radius:100px; background:#D4D4D8; flex-shrink:0; position:relative; }
[data-theme="dark"] .wf-toggle{ background:#3A3A3E; }
.wf-toggle::after{ content:''; position:absolute; top:1.5px; left:1.5px; width:8px; height:8px; border-radius:50%; background:#A1A1AA; }
.wf-icon-box{ width:16px; height:16px; border-radius:4px; background:#D4D4D8; flex-shrink:0; }
[data-theme="dark"] .wf-icon-box{ background:#3A3A3E; }
@media(max-width:700px){ .wireframe-grid{ grid-template-columns:1fr; } }

/* ============================================================
   VISUAL DESIGN SYSTEM
   ============================================================ */
.vds-swatches{ display:flex; flex-wrap:wrap; gap:1.1rem; margin:1.4rem 0 2rem; }
.vds-swatch-item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.vds-swatch{ width:52px; height:52px; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.vds-swatch-label{ font-family:var(--f-mono); font-size:.64rem; color:var(--muted); text-align:center; line-height:1.35; }

.vds-type{ display:flex; flex-direction:column; gap:.7rem; margin:1.2rem 0 2rem; }
.vds-type-row{ display:flex; align-items:baseline; gap:1rem; padding:.6rem 0; box-shadow:0 1px 0 var(--line); }
.vds-type-row:first-child{ box-shadow:0 -1px 0 var(--line), 0 1px 0 var(--line); }
.vds-type-sample{ font-weight:700; color:var(--ink); }
.vds-type-meta{ font-family:var(--f-mono); font-size:.68rem; color:var(--muted); margin-left:auto; white-space:nowrap; }

.vds-components{ background:var(--bg2); border-radius:var(--r); padding:1.6rem; transition:background .3s; }
.vds-components.always-light{ background:#FFFFFF; }
.vds-components-label{ font-family:var(--f-mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:1rem; }
.vds-components.always-light .vds-components-label{ color:#71717A; }
.vds-row{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:1rem; }
.vds-row:last-child{ margin-bottom:0; }
.vds-btn{ display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; font-weight:600; padding:.55em 1.1em; border-radius:8px; }
.vds-btn.primary{ background:var(--acc); color:#fff; }
.vds-btn.secondary{ border:1.5px solid var(--acc); color:var(--acc); background:transparent; }
.vds-btn.ghost{ border:1.5px solid var(--line2); color:var(--muted); background:transparent; }
.vds-badge{ font-size:.68rem; font-weight:700; padding:.28em .7em; border-radius:100px; }
.vds-badge.ok{ background:#DCFCE7; color:#166534; }
.vds-badge.warn{ background:#FEF3C7; color:#92400E; }
.vds-badge.err{ background:#FEE2E2; color:#B91C1C; }
[data-theme="dark"] .vds-badge.ok{ background:#0F3320; color:#4ADE80; }
[data-theme="dark"] .vds-badge.warn{ background:#3A2A0A; color:#FBBF24; }
[data-theme="dark"] .vds-badge.err{ background:#3A1414; color:#F87171; }
.vds-input{ border:1.5px solid var(--line2); border-radius:8px; padding:.5em .9em; font-size:.8rem; color:var(--muted); background:var(--surface); width:170px; }
.vds-input.focus{ border-color:var(--acc); }

/* ============================================================
   FINAL SCREENS
   ============================================================ */
.finalscreens-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin:1.6rem 0; }
.fs-frame{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-md); background:var(--surface); transition:background .3s; }
.fs-topbar{ padding:.55rem .9rem; display:flex; align-items:center; gap:.4rem; }
.fs-topbar span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); }
.fs-topbar span:nth-child(1){ background:#F04585; }
.fs-topbar-label{ margin-left:.4rem; font-family:var(--f-mono); font-size:.66rem; color:rgba(255,255,255,.6); }
.fs-body{ min-height:190px; padding:1.1rem; }
.fs-caption{ padding:.8rem 1rem; box-shadow:0 -1px 0 var(--line); font-size:.78rem; font-weight:600; }
.fs-caption span{ display:block; font-family:var(--f-mono); font-size:.66rem; font-weight:500; color:var(--muted); margin-top:.15rem; }
@media(max-width:700px){ .finalscreens-grid{ grid-template-columns:1fr; } }

/* Real product screenshots (used when actual UI captures are available) */
.finalscreens-grid.real{ grid-template-columns:repeat(2,1fr); align-items:start; }
.finalscreens-grid.real.wf-match-grid{ grid-template-columns:repeat(3,1fr); }
.fs-frame.real{ display:flex; flex-direction:column; }
.fs-frame.real .fs-shot{ width:100%; overflow:hidden; background:var(--bg2); }
.fs-frame.real .fs-shot img{ width:100%; height:auto; display:block; }

/* Match prototype screenshots to the 4:3 wireframe cards above them */
.fs-frame.real.wf-match .fs-shot{ aspect-ratio:4/3; }
.fs-frame.real.wf-match .fs-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
@media(max-width:700px){ .finalscreens-grid.real{ grid-template-columns:1fr; } }
@media(max-width:900px){ .finalscreens-grid.real.wf-match-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .finalscreens-grid.real.wf-match-grid{ grid-template-columns:1fr; } }

/* Small icon-button mockup used inside Final Screens frames */
.fs-icon-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.fs-icon-btn{
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:.6rem .3rem; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  transition:background .3s, border-color .3s;
}
.fs-icon-btn.active{ background:var(--acc-s); border-color:var(--acc); }
.fs-icon-btn .fs-ico{ font-size:1.1rem; }
.fs-icon-btn .fs-lbl{ font-size:.62rem; font-weight:600; color:var(--muted); }
.fs-icon-btn.active .fs-lbl{ color:var(--acc); }
.cs-next .nl{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.cs-next h3{ font-size:clamp(1.2rem,2.8vw,1.75rem); margin-top:.3rem; }