/* Course Overview - Premium "About the Course" hub page */

.course-overview {
  direction: rtl;
}

/* ── Hero Header ─────────────────────────────────── */

.co-header {
  text-align: center;
  padding: 64px 24px 56px;
  background: linear-gradient(170deg, #D6E8FF 0%, #E8F1FF 30%, #F4F8FF 60%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 100px;
}

.co-header::before {
  content: '10x';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-62%, -48%);
  font-family: 'Noto Sans Hebrew', 'Helvetica Neue', 'Open Sans', -apple-system, sans-serif;
  font-size: 42vw;
  font-weight: 900;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, rgba(0, 113, 227, 0.07) 0%, rgba(0, 90, 180, 0.025) 40%, rgba(100, 160, 240, 0.04) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0.85;
  white-space: nowrap;
}

.co-logo {
  height: 240px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.co-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 12px;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* ── Quick Navigation ─────────────────────────────── */

.co-quick-nav {
  position: sticky;
  /* Matches the 72px toolbar height (drops to 48px on phone via media query below) */
  top: 72px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
  padding: 0 24px;
}

.co-quick-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0;
  /* `safe center` centers the pills when they fit, and falls back to
     `flex-start` (= right edge in RTL) when they overflow - so the
     first pill stays visible instead of getting clipped. */
  justify-content: safe center;
}

.co-quick-nav-inner::-webkit-scrollbar {
  display: none;
}

.co-nav-pill {
  flex-shrink: 0;
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.co-nav-pill:hover {
  background: var(--primary-light);
  color: var(--primary-color);
}

.co-nav-pill.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Desktop (≥1480px): side rail handles navigation, hide the sticky strip.
   Tablet / mobile (≤1479px): hide the desktop side rail so only the strip shows.
   Bumped up from 1400px - between 1400 and 1479 the fixed right rail (240px
   wide, 40px inset) still visually overlapped the centered 860px content
   column, so the rail no longer claims space until the viewport is wide
   enough to comfortably seat both. */
@media (min-width: 1480px) {
  .co-quick-nav {
    display: none;
  }
}

@media (max-width: 1479px) {
  .co-side-nav {
    display: none;
  }
}

/* ── Content & Loading ───────────────────────────── */

.co-content {
  max-width: 100%;
}

.co-loading {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-tertiary);
  font-size: 17px;
  font-family: var(--font-body);
}

/* ── Section Blocks ──────────────────────────────── */

.co-section {
  padding: 80px 24px;
}

.co-section-alt {
  background: linear-gradient(180deg, #EFF6FF 0%, #F5F9FF 100%);
}

.co-section-inner {
  max-width: 860px;
  margin: 0 auto;
}

.co-section-title {
  display: block;
  position: relative;
  margin: 0;
  padding-block-start: 22px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-color);
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.co-section-title::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 999px;
}

.co-section-title .logo-10x-inline {
  height: 1.1em;
  top: 7px;
}

.co-section-subtitle {
  font-size: 16.5px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.7;
  max-width: 720px;
  margin-top: 14px;
  margin-bottom: 28px;
  font-family: var(--font-body);
}

/* ── Read More Links ─────────────────────────────── */

.co-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: 8px;
  font-family: var(--font-body);
}

.co-read-more:hover {
  opacity: 0.75;
}

.co-read-more .fa-arrow-left {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.co-read-more:hover .fa-arrow-left {
  transform: translateX(-3px);
}

.co-read-more-spaced {
  display: inline-flex;
  margin-bottom: 44px;
}

/* ── Audience Section (editorial redesign) ──────── */

/* Canonical eyebrow: mono caps in muted gray. Matches
   .testimonials-teaser__eyebrow / .curriculum-intro-eyebrow so all hubs
   share the same section-header grammar. */
.co-audience-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a5b6a;
  margin-bottom: 14px;
}

.co-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 28px 0 32px;
}

.co-audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 30px;
  /* background: #ffffff80; */
  /* border: 1px solid rgba(0, 60, 130, 0.08); */
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}

.co-audience-card:hover {
  /* border-color: rgba(0, 113, 227, 0.35); */
  /* box-shadow: var(--shadow-md); */
  /* transform: translateY(-2px); */
}

.co-audience-icon {
  width: 36px;
  height: 36px;
  color: var(--text-color);
  transition: color 0.25s ease;
}

.co-audience-card:hover .co-audience-icon {
  color: var(--primary-color);
}

.co-audience-index {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 28px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

.co-audience-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-color);
  margin: 0;
}

.co-audience-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
  max-width: 58ch;
}

/* Featured (5th) profile - full-width, brand gradient */

.co-audience-card--featured {
  grid-column: 1 / -1;
  padding: 32px 36px;
  background:
    radial-gradient(900px 280px at 85% -20%, rgba(8, 148, 255, 0.08), transparent 60%),
    radial-gradient(600px 240px at 10% 120%, rgba(189, 50, 214, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

.co-audience-card--featured::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 999px;
}

.co-audience-card--featured .co-audience-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0894FF 0%, #BD32D6 55%, #FFA304 100%);
}

.co-audience-card--featured:hover .co-audience-icon {
  background: linear-gradient(135deg, #0894FF 0%, #BD32D6 55%, #FFA304 100%);
}

.co-audience-card--featured .co-audience-title {
  font-size: 1.5rem;
}

.co-audience-card--featured .co-audience-desc {
  font-size: 1.05rem;
  max-width: 68ch;
}

/* ── Outcome Cards Grid ──────────────────────────── */

.co-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.co-outcome-card {
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-right: 3px solid var(--primary-color);
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}

.co-outcome-card:hover {
  border-color: var(--primary-border);
  border-right-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.co-outcome-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--primary-color);
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.co-outcome-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-body);
}

/* ── Sub-headings ────────────────────────────────── */

.co-sub-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 18px;
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: 12px;
  letter-spacing: -0.02em;
}

/* ── Curriculum Modules Grid ─────────────────────── */

.co-modules-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.co-module-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}

.co-module-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.co-module-num {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--primary-color);
  opacity: 0.45;
  line-height: 1;
  flex-shrink: 0;
  min-width: 28px;
}

.co-module-info h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 3px;
  font-family: var(--font-body);
  line-height: 1.35;
}

.co-module-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-family: var(--font-body);
}

/* ── Dark Tool Section - Powered by Claude Code ── */

.co-tool-section {
  background: linear-gradient(180deg, #13141C 0%, #1A1B27 50%, #161722 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}

.co-tool-section::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(212, 165, 116, 0.055) 0%, transparent 70%);
  pointer-events: none;
}

.co-tool-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

.co-tool-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.co-tool-badge {
  display: inline-block;
  padding: 7px 20px;
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.18);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: #D4A574;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  font-family: var(--font-body);
}

.co-tool-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  direction: ltr;
}

.co-tool-logo-10x {
  height: 48px;
}

.co-tool-divider {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* The mark is a 1000x144 strip - nearly 7:1 - so a bare height is wider than a
   phone. max-height + max-width lets the browser honour whichever limit binds
   first and keeps the aspect ratio either way. */
.co-tool-cc-logo {
  height: auto;
  max-height: 64px;
  max-width: 100%;
  margin-top: 8px;
}

.co-tool-headline {
  font-size: 30px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
  margin-bottom: 18px;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.co-tool-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto 40px;
  font-family: var(--font-body);
  font-weight: 400;
}

.co-tool-desc strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.co-tool-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.co-tool-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: right;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.co-tool-feature:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 165, 116, 0.18);
  transform: translateY(-2px);
}

.co-tool-feature-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.co-tool-feature:hover .co-tool-feature-icon-wrap {
  background: rgba(212, 165, 116, 0.13);
  border-color: rgba(212, 165, 116, 0.25);
}

.co-tool-feature-icon {
  font-size: 1rem;
  color: #D4A574;
}

.co-tool-feature-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.co-tool-feature-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
}

.co-tool-feature-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
  font-family: var(--font-body);
}

.co-tool-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-tool-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #D4A574;
  text-decoration: none;
  transition: opacity 0.2s ease;
  letter-spacing: 0.01em;
}

.co-tool-cta-link:hover {
  opacity: 0.7;
}

.co-tool-cta-link svg {
  flex-shrink: 0;
}


/* ── Admission: Bring-with-you block ─────────────── */

.co-admission-section .co-section-inner {
  max-width: 1040px;
}

.co-bring-block {
  margin: 32px 0 40px;
  padding: 40px 36px;
  background: #fff;
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04);
}

.co-bring-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
}

.co-bring-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a5b6a;
  margin-bottom: 10px;
}

.co-bring-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 10px;
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.co-bring-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  font-family: var(--font-body);
}

.co-bring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.co-bring-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 22px;
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
  border: 1px solid rgba(0, 113, 227, 0.1);
  border-radius: var(--radius-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.co-bring-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 113, 227, 0.28);
  box-shadow: 0 6px 20px rgba(0, 60, 130, 0.08);
}

.co-bring-icon {
  width: 34px;
  height: 34px;
  color: var(--primary-color);
}

.co-bring-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.co-bring-card-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  font-family: var(--font-body);
}

/* ── Admission: per-course track wrappers ──────────── */

.co-admission-track {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(0, 113, 227, 0.14);
}

.co-admission-track--architect {
  border-top-color: rgba(189, 50, 214, 0.16);
}

.co-admission-track-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 24px;
}

.co-admission-track-logo {
  height: 36px;
}

/* ── Requirements ────────────────────────────────── */

.co-requirements {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.co-req-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

.co-req-item:last-child {
  border-bottom: none;
}

.co-req-check {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 0.7rem;
  margin-top: 2px;
}

.co-req-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ── Exclusions (standalone section: "what the course does NOT teach") ── */

.co-not-included-section {
  background: linear-gradient(180deg, #FFF7F6 0%, #FFFBFB 100%);
  position: relative;
  overflow: hidden;
}

.co-not-included-section .co-section-title::before {
  background: linear-gradient(90deg, #DC2626 0%, #F97316 100%);
}

/* "10x" watermark for the not-included section - sparse grid content
   leaves plenty of room for it to show through. Warm tinted to harmonise
   with the red-tinged section bg. */
.co-not-included-section::before {
  content: '10x';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-family: 'Noto Sans Hebrew', 'Helvetica Neue', 'Open Sans', -apple-system, sans-serif;
  font-size: 52vw;
  font-weight: 900;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.06) 0%, rgba(249, 115, 22, 0.035) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0.85;
  white-space: nowrap;
}

.co-not-included-section > .co-section-inner {
  position: relative;
  z-index: 1;
}

.co-exclusions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0 20px;
}

.co-exclusion-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.co-exclusion-card:hover {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08);
}

.co-exclusion-card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  margin-top: 2px;
}

.co-exclusion-card:hover .co-exclusion-card-mark {
  background: rgba(220, 38, 38, 0.14);
}

.co-exclusion-card-body {
  flex: 1;
  min-width: 0;
}

.co-exclusion-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 4px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.co-exclusion-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-body);
}

/* ── Tablet (768px – 1024px) ─────────────────────── */

@media (max-width: 1024px) {
  .co-header {
    padding: 48px 24px 36px;
  }

  .co-title {
    font-size: 2rem;
  }

  .co-section {
    padding: 60px 24px;
  }

  .co-section-title {
    font-size: 1.75rem;
  }

  .co-outcomes-grid {
    grid-template-columns: 1fr;
  }

  .co-audience-grid {
    grid-template-columns: 1fr;
  }

  .co-bring-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .co-bring-block {
    padding: 32px 28px;
  }

  .co-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .co-tool-section {
    padding: 64px 24px;
  }

  .co-tool-headline {
    font-size: 26px;
  }

  .co-tool-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Phone (< 768px) ────────────────────────────── */

@media (max-width: 767px) {
  .co-quick-nav {
    top: 48px;
  }

  .co-header {
    padding: 36px 20px 28px;
  }

  .co-header::before {
    font-size: 60vw;
  }

  /* Width-driven on phone: the multiline-header logo is ~2.4:1, so a fixed
     height forces a width far wider than the viewport and gets clipped by
     .co-header's overflow:hidden. Scale to the content box instead; the SVG
     viewBox keeps the aspect ratio. */
  .co-logo {
    height: auto;
    width: 100%;
    max-width: 360px;
  }

  .co-logo svg {
    height: auto;
    width: 100%;
  }

  .co-title {
    font-size: 1.75rem;
  }

  .co-quick-nav {
    padding: 0 16px;
  }

  .co-quick-nav-inner {
    justify-content: flex-start;
  }

  .co-nav-pill {
    padding: 10px 16px;
    font-size: 0.82rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .co-section {
    padding: 48px 20px;
  }

  .co-section-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .co-section-title::before {
    inset-inline-start: 50%;
    transform: translateX(50%);
  }

  .co-section-subtitle {
    font-size: 17px;
    text-align: center;
    margin-inline: auto;
  }

  /* Audience */
  .co-audience-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 22px 0 24px;
  }

  .co-audience-card {
    padding: 22px 22px;
  }

  .co-audience-index {
    inset-block-start: 18px;
    inset-inline-end: 22px;
  }

  .co-audience-title {
    font-size: 1.1rem;
  }

  .co-audience-desc {
    font-size: 1rem;
  }

  .co-audience-card--featured {
    padding: 26px 22px;
  }

  .co-audience-card--featured .co-audience-title {
    font-size: 1.3rem;
  }

  .co-audience-card--featured .co-audience-icon {
    width: 38px;
    height: 38px;
  }

  /* Outcomes */
  .co-outcomes-grid {
    grid-template-columns: 1fr;
  }

  .co-outcome-text {
    font-size: 17px;
  }

  /* Modules */
  .co-modules-grid {
    grid-template-columns: 1fr;
  }

  .co-module-card {
    padding: 16px;
    min-height: 44px;
  }

  .co-module-info h4 {
    font-size: 17px;
  }

  .co-module-meta {
    font-size: 0.85rem;
  }

  /* Admission: bring-with-you */
  .co-bring-block {
    padding: 28px 20px;
    margin: 24px 0 32px;
  }

  .co-bring-header {
    margin-bottom: 24px;
  }

  .co-bring-title {
    font-size: 1.25rem;
  }

  .co-bring-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .co-bring-card {
    padding: 20px 18px;
    gap: 12px;
  }

  .co-bring-card-title {
    font-size: 1.05rem;
  }

  .co-bring-card-desc {
    font-size: 15px;
  }

  .co-admission-track {
    margin-top: 28px;
    padding-top: 28px;
  }

  .co-admission-track-logo {
    height: 28px;
  }

  /* Requirements */
  .co-req-item {
    padding: 14px 0;
  }

  .co-req-item strong {
    font-size: 17px;
  }

  /* Exclusions */
  .co-exclusions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .co-exclusion-card {
    padding: 18px 18px;
  }

  .co-exclusion-card-title {
    font-size: 17px;
  }

  .co-exclusion-card-desc {
    font-size: 15px;
  }

  /* Read more */
  .co-read-more {
    font-size: 17px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Tool section */
  .co-tool-section {
    padding: 48px 20px;
  }

  .co-tool-section::before {
    width: 100%;
    height: 400px;
  }

  .co-tool-badge {
    font-size: 11px;
    padding: 6px 16px;
    margin-bottom: 20px;
  }

  .co-tool-logos {
    gap: 10px;
    margin-bottom: 24px;
  }

  .co-tool-logo-10x {
    height: 36px;
  }

  .co-tool-divider {
    font-size: 15px;
  }

  .co-tool-cc-logo {
    max-height: 48px;
  }

  .co-tool-headline {
    font-size: 22px;
  }

  .co-tool-desc {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .co-tool-features {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }

  .co-tool-feature {
    padding: 18px 16px;
  }

  .co-tool-feature-title {
    font-size: 17px;
  }

  .co-tool-feature-desc {
    font-size: 14px;
  }

  .co-tool-cta-link {
    font-size: 17px;
    min-height: 44px;
  }

  /* Sub-headings */
  .co-sub-heading {
    flex-direction: column;
    gap: 4px;
    font-size: 1.15rem;
  }
}

/* ═══ What-Is section (mirrors home .course-intro pattern) ═══ */

.co-whatis {
  background: linear-gradient(160deg, #EEF4FF 0%, #F6F0FF 35%, #FFF5F0 65%, #F0FAFF 100%);
  position: relative;
  overflow: hidden;
}

.co-whatis::before {
  content: '';
  position: absolute;
  top: -120px;
  inset-inline-start: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.co-whatis::after {
  content: '';
  position: absolute;
  bottom: -100px;
  inset-inline-end: -60px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.co-whatis-inner {
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 1060px;
}

.co-whatis .course-intro-desc {
  margin-bottom: 56px;
  padding-top: 18px;
}

.co-whatis .course-pillars {
  margin-bottom: 40px;
}

.co-whatis .co-read-more {
  display: inline-flex;
  justify-content: center;
}

/* ═══ Why-Architecture - Bright editorial (the thesis) ═════════════════
   Warm cream → cool sky gradient backdrop; the only warm-leaning section
   on a mostly cool page. Full 5-stop brand gradient fills the headline.
   Limitations grid gets a warm-amber accent stripe (the "problem" color);
   responsibilities list gets a brand-blue accent (the "role" color).
   Dark treatment is now exclusive to Claude Code. */

.co-whyarch-section {
  background:
    linear-gradient(175deg,
      #FFF2E0 0%,
      #FFF8EC 22%,
      #FBFDFF 55%,
      #E9F2FF 92%,
      #DCEAFF 100%);
  padding: 96px 24px 80px;
  position: relative;
  overflow: hidden;
}

/* Warm amber glow, top-start */
.co-whyarch-section::before {
  content: '';
  position: absolute;
  top: -24%;
  inset-inline-start: -12%;
  width: 960px;
  height: 720px;
  background:
    radial-gradient(ellipse at center,
      rgba(255, 163, 4, 0.22) 0%,
      rgba(255, 163, 4, 0.08) 35%,
      transparent 68%);
  pointer-events: none;
}

/* Cool cyan/magenta glow, bottom-end */
.co-whyarch-section::after {
  content: '';
  position: absolute;
  bottom: -28%;
  inset-inline-end: -14%;
  width: 900px;
  height: 760px;
  background:
    radial-gradient(ellipse at center,
      rgba(8, 148, 255, 0.14) 0%,
      rgba(189, 50, 214, 0.08) 45%,
      transparent 72%);
  pointer-events: none;
}

.co-whyarch-inner {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.co-whyarch-headline {
  position: relative;
  padding-block-start: 22px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  font-family: var(--font-display);
  max-width: 840px;
  color: #8b3c11;
}

.co-whyarch-headline::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 999px;
}

.co-whyarch-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: var(--font-body);
  margin-bottom: 56px;
  max-width: 720px;
  font-weight: 500;
}

.co-whyarch-block {
  margin-bottom: 48px;
}

.co-whyarch-block:last-of-type {
  margin-bottom: 40px;
}

.co-whyarch-block-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 24px;
  font-family: var(--font-display);
}

.co-whyarch-block-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #C4551A;
}

/* Responsibilities block uses the cool accent */
.co-whyarch-block + .co-whyarch-block .co-whyarch-block-label {
  color: var(--primary-color);
}

.co-whyarch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.co-whyarch-card {
  position: relative;
  padding: 22px 26px 22px 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196, 85, 26, 0.12);
  border-inline-start: 3px solid #FFA304;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(196, 85, 26, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.co-whyarch-card:hover {
  border-color: rgba(196, 85, 26, 0.28);
  border-inline-start-color: #C4551A;
  box-shadow: 0 6px 16px rgba(196, 85, 26, 0.08);
  transform: translateY(-2px);
}

.co-whyarch-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.co-whyarch-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
  font-family: var(--font-body);
  margin: 0;
}

.co-whyarch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 4px;
}

.co-whyarch-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 16px 12px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid rgba(0, 113, 227, 0.25);
  border-block-end: 1px solid rgba(0, 60, 130, 0.08);
  transition: border-inline-start-color 0.25s ease;
}

.co-whyarch-list-item:hover {
  border-inline-start-color: var(--primary-color);
}

.co-whyarch-list-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-color);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.co-whyarch-list-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: var(--font-body);
}

.co-whyarch-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  background: linear-gradient(135deg, rgba(255, 163, 4, 0.14) 0%, rgba(196, 85, 26, 0.08) 100%);
  border: 1px solid rgba(196, 85, 26, 0.32);
  border-radius: var(--radius-full);
  color: #A3430F;
  font-size: 0.94rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.co-whyarch-link:hover {
  background: linear-gradient(135deg, rgba(255, 163, 4, 0.22) 0%, rgba(196, 85, 26, 0.14) 100%);
  border-color: rgba(196, 85, 26, 0.55);
  transform: translateY(-1px);
}

.co-whyarch-link svg {
  transition: transform 0.2s ease;
}

.co-whyarch-link:hover svg {
  transform: translateX(-3px);
}

/* Tablet */
@media (max-width: 1024px) {
  .co-whyarch-section {
    padding: 72px 24px 60px;
  }

  .co-whyarch-headline {
    font-size: 1.75rem;
  }

  .co-whyarch-list {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
}

/* Phone */
@media (max-width: 767px) {
  .co-whyarch-section {
    padding: 56px 20px 48px;
  }

  .co-whyarch-headline {
    font-size: 1.5rem;
  }

  .co-whyarch-subtitle {
    font-size: 17px;
    margin-bottom: 40px;
  }

  .co-whyarch-block-title {
    font-size: 1.18rem;
  }

  .co-whyarch-grid {
    grid-template-columns: 1fr;
  }

  .co-whyarch-card-title {
    font-size: 17px;
  }

  .co-whyarch-card-desc {
    font-size: 15px;
  }

  .co-whyarch-list-title {
    font-size: 17px;
  }

  .co-whyarch-list-desc {
    font-size: 15px;
  }

  .co-whyarch-link {
    font-size: 17px;
    min-height: 44px;
  }
}

/* ═══ "Not No-Code" block — same bright/amber treatment as whyarch ═══
   Uses the shared .co-whyarch-* skin via a compound class on the <section>.
   Only modifier-level tweaks live here. */

.co-notnocode-section .co-whyarch-headline {
  /* Slightly shorter display stack so the blunt headline lands harder */
  max-width: 680px;
}

.co-notnocode-closer {
  margin-top: 20px;
  padding: 18px 22px;
  background: rgba(255, 163, 4, 0.10);
  border: 1px solid rgba(196, 85, 26, 0.22);
  border-inline-start: 3px solid #FFA304;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  color: #8b3c11;
  font-family: var(--font-display);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .co-notnocode-closer {
    font-size: 0.95rem;
    padding: 14px 16px;
  }
}

/* ═══ Punchlines — numbered accent cards between "Unique" and "Why Arch" ═══
   Stands out visually: each card has a gradient edge bar, a mono-pill number,
   title + short desc. Per-card accent color cycles through the brand palette.
   Matches the editorial rhythm of .co-audience-card and .co-outcome-card
   without repeating either — slightly bolder and more graphic. */

.co-punchlines {
  padding: 56px 24px 64px;
  background: linear-gradient(170deg, #F8FBFF 0%, #FFFFFF 60%, #F6F0FF 100%);
  position: relative;
  overflow: hidden;
}

.co-punchlines::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(8, 148, 255, 0.25) 25%, rgba(189, 50, 214, 0.25) 50%, rgba(255, 163, 4, 0.25) 75%, transparent 100%);
  pointer-events: none;
}

.co-punchlines-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 920px;
  margin-inline: auto;
}

.co-punchline-card {
  position: relative;
  padding: 26px 26px 22px 30px;
  background: #ffffff;
  border: 1px solid rgba(0, 60, 130, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}

/* Gradient edge bar on the inline-start side (right edge in RTL). */
.co-punchline-card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--punchline-accent, var(--primary-color));
}

/* Soft accent glow in the top-end corner. */
.co-punchline-card::after {
  content: '';
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, var(--punchline-glow, rgba(8, 148, 255, 0.08)) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.co-punchline-card[data-accent="blue"]   { --punchline-accent: #0894FF; --punchline-glow: rgba(8, 148, 255, 0.10); }
.co-punchline-card[data-accent="purple"] { --punchline-accent: #BD32D6; --punchline-glow: rgba(189, 50, 214, 0.09); }
.co-punchline-card[data-accent="amber"]  { --punchline-accent: #FFA304; --punchline-glow: rgba(255, 163, 4, 0.10); }
.co-punchline-card[data-accent="teal"]   { --punchline-accent: #0EA5A4; --punchline-glow: rgba(14, 165, 164, 0.09); }

.co-punchline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 60, 130, 0.10);
  border-color: rgba(0, 60, 130, 0.18);
}

.co-punchline-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--punchline-accent, var(--primary-color));
  padding: 4px 10px;
  background: color-mix(in srgb, var(--punchline-accent, var(--primary-color)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--punchline-accent, var(--primary-color)) 20%, transparent);
  border-radius: 999px;
  margin-bottom: 14px;
}

.co-punchline-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-color);
  margin: 0 0 8px;
}

.co-punchline-desc {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-body);
}

@media (max-width: 1024px) {
  .co-punchlines {
    padding: 48px 24px 56px;
  }

  .co-punchlines-grid {
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .co-punchlines {
    padding: 40px 20px 48px;
  }

  .co-punchlines-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .co-punchline-card {
    padding: 22px 22px 20px 26px;
  }

  .co-punchline-title {
    font-size: 1.05rem;
  }

  .co-punchline-desc {
    font-size: 0.95rem;
  }
}

/* ═══ Argument section ("Why AI alone isn't enough") — cool editorial ═══
   Sits on the standard .co-section-alt light-blue backdrop. No warm/amber
   accents — those now belong exclusively to .co-unique-section. Reuses the
   .co-section-title gradient underline. */

.co-argument-section {
  padding-block: 96px 80px;
  position: relative;
  overflow: hidden;
}

.co-argument-section .co-section-inner {
  max-width: 1040px;
  position: relative;
  z-index: 1;
}

/* "10x" watermark - the editorial thesis is narrow-column text, so there
   is wide lateral whitespace for the watermark to live in. */
.co-argument-section::before {
  content: '10x';
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Sans Hebrew', 'Helvetica Neue', 'Open Sans', -apple-system, sans-serif;
  font-size: 48vw;
  font-weight: 900;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, rgba(8, 148, 255, 0.08) 0%, rgba(100, 98, 234, 0.035) 50%, rgba(189, 50, 214, 0.03) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0.85;
  white-space: nowrap;
}

/* ── Editorial lede: eyebrow + large title + italic dek ──────────── */

.co-argument-lede {
  max-width: 780px;
  margin: 0 auto 40px;
}

.co-argument-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a5b6a;
  margin-bottom: 22px;
}

.co-argument-title {
  position: relative;
  padding-block-start: 22px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-color);
  margin: 0 0 18px;
  max-width: 18ch;
}

.co-argument-title::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 999px;
}

.co-argument-dek {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text-secondary);
  margin: 0;
  max-width: 32ch;
}

/* ── Thesis block: NYT-feature rhythm ───────────────────────────── */

.co-argument-thesis {
  max-width: 680px;
  margin: 0 auto 56px;
  font-family: var(--font-body);
}

.co-argument-thesis p {
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.co-argument-thesis p:last-child {
  margin-bottom: 0;
}

.co-argument-thesis-opener {
  font-family: var(--font-display) !important;
  font-size: 1.32rem !important;
  line-height: 1.55 !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-color) !important;
  border-inline-start: 2px solid var(--primary-color);
  padding-inline-start: 22px;
  margin-bottom: 28px !important;
}

/* Single canonical brand-gradient mark between thesis and supporting blocks. */
.co-argument-rule {
  display: block;
  width: 72px;
  height: 2px;
  margin: 0 auto 64px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.co-argument-block {
  margin-top: 36px;
}

.co-argument-block:first-of-type {
  margin-top: 28px;
}

.co-argument-block-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 20px;
  font-family: var(--font-display);
}

.co-argument-block-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary-color);
  opacity: 0.8;
}

.co-argument-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.co-argument-card {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 113, 227, 0.12);
  border-inline-start: 3px solid var(--primary-color);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.co-argument-card:hover {
  border-color: rgba(0, 113, 227, 0.28);
  box-shadow: 0 6px 16px rgba(0, 60, 130, 0.08);
  transform: translateY(-2px);
}

.co-argument-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.co-argument-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
  font-family: var(--font-body);
  margin: 0;
}

.co-argument-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 4px;
}

.co-argument-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px 16px 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid rgba(0, 113, 227, 0.25);
  border-block-end: 1px solid rgba(0, 60, 130, 0.08);
  transition: border-inline-start-color 0.25s ease;
}

.co-argument-list-item:hover {
  border-inline-start-color: var(--primary-color);
}

.co-argument-list-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-color);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.co-argument-list-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: var(--font-body);
}

@media (max-width: 1024px) {
  .co-argument-list {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
}

@media (max-width: 1024px) {
  .co-argument-section {
    padding-block: 72px 60px;
  }

  .co-argument-title {
    font-size: 1.75rem;
  }

  .co-argument-dek {
    font-size: 1.2rem;
  }

  .co-argument-thesis p {
    font-size: 1.06rem;
    line-height: 1.8;
  }

  .co-argument-thesis-opener {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 767px) {
  .co-argument-section {
    padding-block: 56px 48px;
  }

  .co-argument-lede {
    margin-bottom: 32px;
  }

  .co-argument-title {
    font-size: 1.5rem;
    max-width: 100%;
  }

  .co-argument-dek {
    font-size: 1.08rem;
    max-width: 100%;
  }

  .co-argument-thesis {
    margin-bottom: 40px;
  }

  .co-argument-thesis p {
    font-size: 1.02rem;
    line-height: 1.75;
  }

  .co-argument-thesis-opener {
    font-size: 1.1rem !important;
    padding-inline-start: 16px;
    margin-bottom: 22px !important;
  }

  .co-argument-rule {
    margin-bottom: 44px;
  }

  .co-argument-block-title {
    font-size: 1.15rem;
  }

  .co-argument-grid {
    grid-template-columns: 1fr;
  }

  .co-argument-card-title {
    font-size: 17px;
  }

  .co-argument-card-desc {
    font-size: 15px;
  }

  .co-argument-list-title {
    font-size: 17px;
  }

  .co-argument-list-desc {
    font-size: 15px;
  }
}

/* AI-question / answer pair: the `.ai-question` variant recolors the
   warm "closer" card into the brand blue so the question reads as the
   visitor's voice and the next `.co-notnocode-closer` (without this
   modifier) remains the warm, authored answer. */
.co-notnocode-closer.ai-question {
  /* width: 50%; */
  min-width: 300px;
  /* max-width: 640px; */
  margin-inline: auto;
  text-align: center;
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.22);
  border-inline-start: 3px solid var(--primary-color);
  color: #0A4C9E;
}

.co-notnocode-closer.ai-question::before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-inline-end: 0.5em;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 60, 130, 0.18);
}

@media (max-width: 767px) {
  .co-notnocode-closer.ai-question {
    width: 100%;
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO BLOCKS (live inside .co-header)
   Order top-to-bottom inside the hero:
     1. Logo + title (above this block, in the base hero rules)
     2. Expanded vertical flow: Developer card → connector → Architect card
   The bundle pills (.co-hero-bundle*) styles below are now consumed by the
   "מסלול הלימוד המלא" section that lives below the hero - same pill design,
   different surrounding container.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bundle pills (shared) ──────────────────────────────────────────────── */

.co-hero-bundle-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full, 980px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(8, 148, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-height: 44px;
}

.co-hero-bundle-pill--bonus {
  border-color: rgba(255, 163, 4, 0.20);
  background: rgba(255, 250, 242, 0.78);
}

.co-hero-bundle-pill-eyebrow {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8E8F9E);
}

.co-hero-bundle-pill-text {
  font-size: 0.85rem;
  color: var(--text-secondary, #5A5B6A);
  white-space: nowrap;
}

.co-hero-bundle-plus {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-tertiary, #8E8F9E);
  display: inline-block;
}

/* ── Expanded flow: full Developer + Architect cards with weighty connector ── */

.co-hero-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 2.5rem auto 0;
  max-width: 820px;
  padding: 2.25rem 1.75rem;
  border-radius: var(--radius-xl, 20px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(0, 60, 130, 0.06);
  position: relative;
  z-index: 1;
}

.co-hero-flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.25rem 1.75rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 254, 0.96) 100%);
  border: 1px solid rgba(8, 148, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 60, 130, 0.05);
  /* text-align: center; */
  align-items: center;
}

.co-hero-flow-card--architect {
  border-color: rgba(189, 50, 214, 0.14);
}

.co-hero-flow-step {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.5rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--text-tertiary, #8E8F9E);
}

.co-hero-flow-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  padding: 0;
  margin-bottom: 0.25rem;
}

.co-hero-flow-card-logo {
  height: 38px;
}

.co-hero-flow-card-eyebrow {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary, #5A5B6A);
}

.co-hero-flow-card-positioning {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-primary, #191A23);
  margin: 0;
}

.co-hero-flow-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}

.co-hero-flow-card-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary, #5A5B6A);
}

.co-hero-flow-card-bullet::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: linear-gradient(135deg, #0894FF, #6462EA);
}

.co-hero-flow-card--architect .co-hero-flow-card-bullet::before {
  background: linear-gradient(135deg, #BD32D6, #6462EA);
}

.co-hero-flow-card-prereq {
  align-self: stretch;
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(189, 50, 214, 0.06);
  border-inline-start: 3px solid rgba(189, 50, 214, 0.4);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary, #5A5B6A);
}

.co-hero-flow-card-prereq strong {
  color: var(--text-primary, #191A23);
  margin-inline-end: 0.35rem;
}

.co-hero-flow-card-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  color: var(--brand-primary, #0071E3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.co-hero-flow-card-link:hover {
  border-bottom-color: var(--brand-primary, #0071E3);
}

.co-hero-flow-card-link svg {
  transition: transform 0.2s ease;
}

.co-hero-flow-card-link:hover svg {
  transform: translateX(-3px);
}

/* ── Connector: node dot → brand-gradient line → chevron tip.
   `--xl` variant scales the same vocabulary up to carry full cards. */

.co-hero-flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1.25rem 0;
}

.co-hero-flow-connector-node {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0894FF;
  box-shadow: 0 0 0 4px rgba(8, 148, 255, 0.12);
}

.co-hero-flow-connector-line {
  width: 2px;
  height: 44px;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 1px;
}

.co-hero-flow-connector-tip {
  width: 18px;
  height: 11px;
  display: block;
  color: #FFA304;
  margin-top: -2px;
}

.co-hero-flow-connector--xl {
  gap: 8px;
  padding: 1.75rem 0;
}

.co-hero-flow-connector--xl .co-hero-flow-connector-node {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 6px rgba(8, 148, 255, 0.14);
}

.co-hero-flow-connector--xl .co-hero-flow-connector-line {
  width: 3px;
  height: 48px;
}

.co-hero-flow-connector--xl .co-hero-flow-connector-tip {
  width: 28px;
  height: 16px;
}

@media (max-width: 1024px) {
  .co-hero-flow {
    max-width: 720px;
    padding: 1.75rem 1.25rem;
    margin-top: 2rem;
  }

  .co-hero-flow-card {
    padding: 1.75rem 1.5rem;
  }

  .co-hero-flow-card-logo {
    height: 32px;
  }

  .co-hero-flow-card-eyebrow {
    font-size: 0.82rem;
  }

  .co-hero-flow-connector--xl .co-hero-flow-connector-line {
    height: 108px;
  }
}

@media (max-width: 767px) {
  .co-hero-bundle-pill {
    padding: 0.45rem 0.75rem;
  }

  .co-hero-bundle-plus {
    width: 0.8rem;
    height: 0.8rem;
  }

  .co-hero-flow {
    padding: 1.25rem 0.85rem;
    margin-top: 1.5rem;
  }

  .co-hero-flow-card {
    padding: 1.75rem 1.25rem;
  }

  .co-hero-flow-card-logo {
    height: 28px;
  }

  .co-hero-flow-card-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .co-hero-flow-card-positioning {
    font-size: 0.95rem;
  }

  .co-hero-flow-card-bullet {
    font-size: 0.9rem;
  }

  .co-hero-flow-connector--xl {
    padding: 1.25rem 0;
  }

  .co-hero-flow-connector--xl .co-hero-flow-connector-line {
    height: 88px;
  }

  .co-hero-flow-connector--xl .co-hero-flow-connector-tip {
    width: 22px;
    height: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FULL STUDY PATH (Section directly below the hero)
   CTA-styled card: brand-gradient top accent stripe, soft warm-cool
   backdrop, brand-gradient text fill on the title, pills laid out as a
   2×2 grid (Dev + Arch on top, two bonuses below) with a prominent +
   divider between rows. Designed to stand out vs the white course cards
   above it.
   ══════════════════════════════════════════════════════════════════════════ */

.co-full-path {
  background: linear-gradient(180deg, #FFF6E8 0%, #F4F9FF 60%, #FFFFFF 100%);
  padding: var(--space-3xl, 96px) 24px;
}

.co-full-path .co-section-inner {
  max-width: 760px;
}

.co-full-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 3rem 2.25rem 2.5rem;
  border-radius: var(--radius-xl, 20px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 2px rgba(0, 60, 130, 0.06),
    0 20px 60px rgba(0, 60, 130, 0.10);
  overflow: hidden;
}

/* Brand-gradient top accent stripe - the single brand-gradient moment in this section. */
.co-full-path-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.co-full-path-title {
  margin: 0;
  font-family: var(--font-display, 'Helvetica Neue', sans-serif);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-color, #2d2d2d);
  text-align: center;
}

/* ── 2×2 bundle grid: course-row + big-plus + bonus-row ──────────────────
   Pills and plus-signs are deliberately ~2× the size used elsewhere - this
   is the centrepiece CTA, so the bundle reads at a glance. */

.co-full-path-bundle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.co-full-path-bundle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

/* Scope the pill scale-up to this bundle only - keeps the shared
   `.co-hero-bundle-pill` rule reusable elsewhere if we re-introduce it. */

.co-full-path-bundle .co-hero-bundle-pill {
  gap: 0.32rem;
  padding: 0.95rem 1.85rem;
  min-height: 88px;
  font-size: 1.5rem;
}

.co-full-path-bundle .co-hero-bundle-pill-eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.22em;
}

.co-full-path-bundle .co-hero-bundle-pill-text {
  font-size: 1.5rem;
  font-weight: 500;
}

.co-full-path-bundle .co-hero-bundle-plus {
  width: 1.7rem;
  height: 1.7rem;
}

.co-full-path-bundle-divider {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--text-tertiary, #8E8F9E);
  display: inline-block;
  user-select: none;
}

/* ── Body copy ─────────────────────────────────────────────────────────── */

.co-full-path-body {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.co-full-path-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-primary, #191A23);
  text-align: start;
}

.co-full-path-paragraph {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary, #5A5B6A);
  text-align: start;
}

.co-full-path-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.co-full-path-bullet {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary, #5A5B6A);
  text-align: start;
}

.co-full-path-bullet::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0894FF, #BD32D6);
}

@media (max-width: 1024px) {
  .co-full-path {
    padding: var(--space-2xl, 64px) 24px;
  }

  .co-full-path-card {
    padding: 2.5rem 1.75rem 2rem;
    gap: 1.5rem;
  }

  .co-full-path-title {
    font-size: 1.95rem;
  }
}

@media (max-width: 767px) {
  .co-full-path {
    padding: 48px 20px;
  }

  .co-full-path-card {
    padding: 2rem 1.25rem 1.75rem;
    gap: 1.25rem;
  }

  .co-full-path-title {
    font-size: 1.65rem;
  }

  .co-full-path-bundle {
    gap: 1rem;
  }

  /* On mobile, stack each pill on its own line and center the
     in-row "+" SVG so it sits between pills (matching the divider
     "+" between the course row and the bonus row). */
  .co-full-path-bundle-row {
    flex-direction: column;
    gap: 0.7rem;
  }

  .co-full-path-bundle-row .co-hero-bundle-plus {
    align-self: center;
  }

  .co-full-path-bundle .co-hero-bundle-pill {
    padding: 0.7rem 1.1rem;
    min-height: 64px;
    font-size: 1.15rem;
  }

  .co-full-path-bundle .co-hero-bundle-pill-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }

  .co-full-path-bundle .co-hero-bundle-pill-text {
    font-size: 1.1rem;
  }

  .co-full-path-bundle .co-hero-bundle-plus {
    width: 1.2rem;
    height: 1.2rem;
  }

  .co-full-path-bundle-divider {
    width: 2rem;
    height: 2rem;
  }

  .co-full-path-lead,
  .co-full-path-paragraph,
  .co-full-path-bullet {
    font-size: 0.92rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   COURSE GOALS (Section 8): per-course cards above shared outcomes
   ══════════════════════════════════════════════════════════════════════════ */

.co-goals-courses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.co-goals-course-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 254, 0.95) 100%);
  border: 1px solid rgba(8, 148, 255, 0.10);
}

.co-goals-course-card--architect {
  border-color: rgba(189, 50, 214, 0.12);
}

.co-goals-course-logo {
  height: 30px;
  align-self: flex-start;
}

.co-goals-course-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary, #5A5B6A);
  margin: 0;
}

@media (max-width: 767px) {
  .co-goals-courses {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .co-goals-course-logo {
    height: 26px;
  }

  .co-goals-course-text {
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CURRICULUM (Section 9): two per-course tracks with per-module anchors
   ══════════════════════════════════════════════════════════════════════════ */

.co-curriculum-track {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  scroll-margin-top: 100px;
}

.co-curriculum-track:last-of-type {
  margin-bottom: 1rem;
}

.co-curriculum-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(8, 148, 255, 0.14);
}

.co-curriculum-track--architect .co-curriculum-track-header {
  border-bottom-color: rgba(189, 50, 214, 0.16);
}

.co-curriculum-track-logo {
  height: 28px;
}

.co-curriculum-track-counts {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #8E8F9E);
}

/* per-module anchor offset (linked from nav as /course#module-X) */
.co-module-card {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  .co-curriculum-track-logo {
    height: 24px;
  }

  .co-curriculum-track-counts {
    font-size: 0.72rem;
  }

  .co-curriculum-track-header {
    padding-bottom: 0.75rem;
  }
}