/* sahaya.css - Premium Editorial UX Case Study Styling */

:root {
  --bg-main: #FCFAF6; /* Beautiful warm creme / vanilla-alabaster paper background */
  --bg-light: #FFFFFF; /* Stark floating white surfaces */
  --text-primary: #121212; /* Rich elegant deep charcoal for headers */
  --text-secondary: #52525E; /* Modern luxurious soft graphite gray */
  --text-tertiary: #CD5C44; /* Terracotta rust / warm red for micro-meta labels */
  --border-light: #ECE7DF; /* Fine warm-tone paper borders */
  --accent-color: #E24A24; /* Rich tomato-red accent from the inspiration image */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, Cambria, "Times New Roman", serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Container constraints for clean editorial reading margins */
.max-width-container {
  max-width: 1040px;
  width: 100%;
}

/* Custom font styles */
.font-sans-custom {
  font-family: var(--font-sans);
}

.font-serif-custom {
  font-family: var(--font-serif);
}

.font-mono-custom {
  font-family: var(--font-mono);
}

.font-black {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* DEFINED TYPOGRAPHY HIERARCHY */
.h1-editorial {
  font-family: var(--font-sans);
  font-size: calc(1.85rem + 1.1vw);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 3.5rem !important; /* Default distance from Section Title directly to content blocks */
  max-width: 800px;
}

/* Elegant relative spacing rule: if followed by direct section-lead, decrease margins so it is tight and unified */
.h1-editorial + .section-lead {
  margin-top: 0.75rem !important;
  margin-bottom: 3.5rem !important; 
}

.section-lead {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  font-style: normal !important;
  color: var(--text-secondary) !important;
  max-width: 640px !important;
  margin-top: 0 !important;
  margin-bottom: 3.5rem !important; /* Identical vertical distance above content blocks across every section */
  display: block;
}

.h2-editorial {
  font-family: var(--font-sans);
  font-size: calc(1.3rem + 0.5vw);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.h3-editorial {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 0.75rem;
  display: block;
}

.h4-editorial {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important; /* Refine letter spacing for high-end editorial feel */
  text-transform: uppercase !important;
  color: #52525B !important; /* Neutral dark charcoal with high readability and 0% blue dominance */
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important; /* Uniform distance above H1 titles */
  display: block !important;
}

.body-editorial, .body-text {
  font-family: var(--font-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  max-width: 65ch !important;
  margin-bottom: 1.25rem !important;
}

/* Card Consistency */
.editorial-card {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  padding: 1.5rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
}

.editorial-card:hover {
  border-color: var(--text-primary) !important;
  transform: translateY(-2px);
}

/* Header navbar styling */
#sahaya-header {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  padding: 1.1rem 0;
  z-index: 1050;
  transition: background-color 0.3s;
}

.back-link {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}

.back-link:hover {
  opacity: 0.7;
  color: var(--text-primary);
}

.brand-signature {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.dot-divider {
  margin: 0 0.5rem;
}

.active-pill {
  color: var(--text-primary);
  border-bottom: 2px solid var(--text-primary);
  padding-bottom: 1px;
}

/* Hero Section */
.sahaya-hero {
  padding-top: 8.5rem;
  padding-bottom: 4rem;
}

.case-study-label {
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
}

.hero-title {
  font-size: calc(2.4rem + 1.6vw);
  line-height: 1.08;
  color: var(--text-primary);
}

.hero-subtitle {
  font-size: calc(1.15rem + 0.4vw);
  color: var(--text-secondary);
  font-weight: 400;
}

/* Metadata Grid */
.metadata-grid {
  border-color: var(--border-light) !important;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.meta-val {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Custom styled placeholder hero image blocks */
.hero-image-block {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--bg-light);
}

.inner-block {
  display: flex;
  flex-direction: column;
}

.mockup-browser-bar {
  background-color: #E4E4E7;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #D4D4D8;
}

.dots-group {
  display: flex;
  gap: 0.35rem;
}

.browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #A1A1AA;
  display: inline-block;
}

.browser-address {
  margin-left: 2.5rem;
  font-size: 0.65rem;
  color: #71717A;
  letter-spacing: 0.02em;
}

.placeholder-caption-block {
  max-width: 520px;
  margin: 0 auto;
}

.placeholder-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  background-color: rgba(37, 99, 235, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.placeholder-caption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Sections Global */
.sahaya-section {
  padding: 6.5rem 0;
  border-color: var(--border-light) !important;
}

.bg-light-section {
  background-color: #F8F8F9;
}

.section-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #71717A;
}

.section-title {
  font-size: calc(1.75rem + 1vw);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Custom Workflow step blocks in Section 1 */
.context-workflow-wrapper {
  background-color: rgba(244, 244, 245, 0.5);
  border-color: var(--border-light) !important;
}

.workflow-step-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 1.15rem;
}

.step-num {
  font-size: 0.9rem;
  font-weight: 700;
  color: #DC2626;
  background-color: rgba(220, 38, 38, 0.06);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.step-title {
  font-size: 0.925rem;
  color: var(--text-primary);
}

.step-sub {
  font-size: 0.725rem;
  display: block;
}

.connector-line {
  line-height: 1;
}

.workflow-friction-card {
  border-color: rgba(220, 38, 38, 0.2) !important;
}

.friction-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Failure Lists and items */
.systems-failure-list li {
  color: var(--text-secondary);
}

.broken-aspect-box {
  border-color: var(--border-light) !important;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.03);
}

.lh-quote {
  font-size: calc(1.35rem + 0.5vw);
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-primary);
  border-left: 2px solid var(--text-primary);
  padding-left: 1.5rem;
}

.source-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Decision Elements */
.decision-bullets-list li {
  padding-bottom: 0.5rem;
}

.bullet-index {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  background-color: #F4F4F5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Device Viewports & Interactive Shell */
.device-viewport-container {
  border-color: var(--border-light) !important;
}

.iphone-mockup {
  width: 275px;
  height: 520px;
  border: 11px solid #18181B;
  border-radius: 36px;
  background-color: #FFFFFF;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

.iphone-notch {
  width: 110px;
  height: 16px;
  background-color: #18181B;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.iphone-screen {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  overflow-y: auto;
  /* Hide scrollbar */
  scrollbar-width: none;
}

.iphone-screen::-webkit-scrollbar {
  display: none;
}

.iphone-screen-div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.phone-app-header {
  padding-top: 0.85rem !important;
}

/* Timeline Components */
.timeline-visual-simple {
  position: relative;
  padding-left: 0.5rem;
}

.timeline-node-item {
  position: relative;
  padding-left: 1rem;
  padding-bottom: 0.75rem;
  border-left: 1px solid var(--border-light);
}

.timeline-node-item:last-child {
  border-left: 1px solid transparent;
  padding-bottom: 0;
}

.node-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #059669; /* Success green active */
  position: absolute;
  left: -4px;
  top: 3px;
  z-index: 2;
}

.grey-dot {
  background-color: #D1D1D6;
}

.active-node {
  border-left-color: #059669;
}

.node-content strong {
  display: block;
  font-size: 8.5px;
  color: var(--text-primary);
  line-height: 1.12;
}

.node-content span {
  font-size: 7px;
  display: inline-block;
  color: var(--text-tertiary);
}

.node-content p {
  font-size: 7.5px;
  line-height: 1.25;
  margin-top: 0.15rem;
}

/* Interactive step lists */
.interactive-step-pill {
  background-color: var(--bg-main);
  border-color: var(--border-light) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.interactive-step-pill:hover {
  transform: translateY(-2px);
  border-color: var(--text-primary) !important;
}

.interactive-step-pill.active {
  background-color: var(--bg-light);
  border-color: var(--text-primary) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.pill-number {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  background-color: #E4E4E7; /* High-contrast editorial style neutral grey tag */
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.pill-title {
  font-size: 1.05rem;
  color: var(--text-primary);
}

/* Supporting Screen boxes */
.supporting-screen-box {
  background-color: rgba(244, 244, 245, 0.35);
  border-color: var(--border-light) !important;
  transition: border-color 0.2s;
}

.supporting-screen-box:hover {
  border-color: var(--text-primary) !important;
}

.screen-header {
  border-bottom-color: var(--border-light) !important;
}

/* Constraint cards */
.constraint-card {
  border-color: var(--border-light) !important;
  background-color: rgba(244, 244, 245, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.constraint-card:hover {
  transform: translateY(-3px);
  border-color: var(--text-primary) !important;
}

.design-response-box {
  border-color: #E4E4E7 !important;
}

/* Case Study Conclusion Footer */
.sahaya-conclusion-section {
  padding: 6rem 0;
  background-color: #09090B !important;
}

.footer-label {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.footer-heading {
  font-size: calc(1.5rem + 0.9vw);
  line-height: 1.15;
}

.footer-card-item {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
}

/* Scroll reveal helper */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Premium Connected Timeline and Refined Editorial Callouts */
.timeline-container {
  position: relative;
}

.timeline-step-item {
  position: relative;
}

.step-marker-wrapper {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step-item:hover .step-marker-wrapper {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  transform: scale(1.06);
}

.timeline-step-item:hover .timeline-card {
  border-color: var(--text-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.06) !important;
}

/* Custom interactive pulse-like transition for Outcome Friction markers on hover */
.timeline-step-item:hover .step-marker-wrapper.bg-danger {
  background-color: #DC2626 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
}

.timeline-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-callout-item {
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-callout-item:hover {
  transform: translateX(5px);
}

.hover-lift {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.015);
}

.hover-lift:hover {
  transform: translateY(-3px);
  border-color: var(--text-primary) !important;
  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.05), 0 4px 12px -2px rgba(0, 0, 0, 0.01) !important;
}

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* Custom tailwind utilities mapping to Bootstrap helper classes */
.text-[6px] { font-size: 6px; }
.text-[7px] { font-size: 7px; }
.text-[8px] { font-size: 8px; }
.text-[9px] { font-size: 9px; }
.text-[10px] { font-size: 10px; }
.text-[11px] { font-size: 11px; }
.text-[12px] { font-size: 12px; }
.text-[13px] { font-size: 13px; }
.text-[14px] { font-size: 14px; }
.text-uppercase { text-transform: uppercase; }
.cursor-pointer { cursor: pointer; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-1\.5 { gap: 0.35rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Section 02 - Clinical Failure Diagnosis & Architectural Model CSS */
.diagnosis-quote-centerpiece {
  font-size: calc(1.8rem + 1.2vw);
  line-height: 1.35;
  color: var(--text-primary);
  font-weight: 400;
  border: none;
  padding: 0;
  margin: 0;
}

.clinical-diagnosis-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 2px solid var(--border-light) !important;
}

.clinical-diagnosis-card:hover {
  border-left-color: #DC2626 !important;
  transform: translateX(4px);
  background-color: rgba(220, 38, 38, 0.01) !important;
}

.clinical-diagnosis-card.ux-card:hover {
  border-left-color: var(--text-primary) !important;
  background-color: var(--bg-light) !important;
}

.structured-diagnosis-model {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.model-row {
  transition: background-color 0.25s ease;
}

.model-row:hover {
  background-color: rgba(244, 244, 245, 0.5);
}

.model-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.model-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.badge-primary-model {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.badge-secondary-model {
  background-color: #F4F4F5;
  color: #27272A;
  border: 1px solid #E4E4E7;
}

.badge-tertiary-model {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.research-evidence-card {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.research-evidence-card:hover {
  transform: translateY(-2px);
  border-color: var(--text-primary);
  box-shadow: 0 12px 25px -8px rgba(0, 0, 0, 0.04) !important;
}

.research-bullet-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #DC2626;
  display: inline-block;
}

/* Reusable Decision navigation styles */
.decision-navigation-bar {
  border-bottom: 1.5px solid var(--border-light);
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

.dec-nav-item {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.725rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding-bottom: 0.85rem;
  border-bottom: 2.2px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  top: 1.5px; /* overlay container border */
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dec-nav-item:hover {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-light);
}

.dec-nav-item.active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--text-primary) !important;
}

.dec-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.dec-nav-item.active .dec-num {
  color: var(--text-primary);
}

.dec-label {
  font-family: var(--font-sans);
}

/* Styled Editorial Placeholder styles */
.styled-editorial-placeholder {
  background-color: #FFFFFF !important;
  border: 1.5px dashed var(--border-light) !important;
  border-radius: 8px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.styled-editorial-placeholder:hover {
  border-color: var(--text-secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04) !important;
}

.decision-core-card {
  padding: 1.5rem;
  background-color: var(--bg-light);
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

.decision-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-primary);
  display: inline-block;
  margin-top: 7px; /* Align nicely with text height */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .border-md-start {
    border-left: 1.5px solid var(--border-light) !important;
  }
}

/* Custom Editorial Table & Key Findings Grid Rules */
.table-header-row {
  border-bottom: 2px solid var(--text-primary) !important;
  padding-bottom: 0.85rem !important;
}

.table-row-item {
  border-bottom: 1px solid #D4D4D8 !important; /* Richer grey list divider */
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
  transition: background-color 0.15s ease;
}

.table-row-item:hover {
  background-color: rgba(244, 244, 245, 0.45);
}

.table-header-title {
  font-family: var(--font-mono) !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important; /* Bold primary carbon for crisp columns */
  margin: 0;
  display: inline-block;
}

.table-cell-title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
}

.table-cell-body {
  font-family: var(--font-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important; /* Dark charcoal zinc-800 for high-contrast reading */
}

.table-cell-emphasis {
  font-family: var(--font-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important; /* High contrast emphasis */
}

@media (min-width: 768px) {
  .border-md-start-dark {
    border-left: 1px solid #D4D4D8 !important;
  }
}