/* Brand-leaning swim palette (teal accent for Slipstream / water) */
    :root {
      --sf-teal: var(--ys-teal, #00B3A4);
      --sf-deep: #0e5f5a;
      --sf-pool: #d9f0ee;
    }

    /* Co-brand pill in the hero */
    .sf-cobrand {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(0,179,164,0.10);
      color: var(--sf-deep);
      padding: 5px 12px;
      border-radius: 999px;
      font-family: var(--ys-font-display);
      letter-spacing: 0.1em; text-transform: uppercase;
      font-size: 0.72rem; font-weight: 600;
      margin-bottom: 14px;
    }
    .sf-cobrand .sf-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--sf-teal); display: inline-block;
    }

    /* Reusable callout style (similar family to ucla-callout) */
    .sf-callout {
      padding: 18px 22px;
      border-left: 4px solid var(--wf-coral);
      background: var(--ys-bg-soft);
      border-radius: 0 10px 10px 0;
      margin: 14px 0;
    }
    .sf-callout.teal { border-left-color: var(--sf-teal); background: rgba(0,179,164,0.06); }
    .sf-callout.warn { border-left-color: #c69b1a; background: #fdf6e0; }
    .sf-callout-tag {
      font-family: var(--ys-font-display);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.72rem;
      color: var(--wf-coral);
      margin-bottom: 6px;
    }
    .sf-callout.teal .sf-callout-tag { color: var(--sf-deep); }
    .sf-callout.warn .sf-callout-tag { color: #a07712; }

    /* Curriculum stage rows */
    .sf-stage {
      background: white;
      border: 1px solid var(--ys-line);
      border-radius: 14px;
      padding: 24px 26px;
      margin-bottom: 18px;
      box-shadow: 0 1px 3px rgba(47,45,86,0.06);
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 22px;
      align-items: start;
    }
    @media (max-width: 600px) {
      .sf-stage { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
    }
    .sf-stage-num {
      font-family: var(--ys-font-display);
      font-weight: 800;
      font-size: 3rem;
      color: var(--sf-teal);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .sf-stage h3 {
      margin: 0 0 6px;
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      font-size: 1.28rem;
    }
    .sf-stage .sf-stage-goal {
      font-family: var(--ys-font-display);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.72rem;
      color: var(--sf-deep);
      margin-bottom: 8px;
    }
    .sf-stage p { margin: 0 0 8px; }
    .sf-stage-meta {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 10px;
    }
    .sf-stage-tag {
      font-size: 0.78rem;
      background: rgba(47,45,86,0.06);
      padding: 4px 10px;
      border-radius: 999px;
      color: var(--ys-navy);
    }
    .sf-stage-tag.drill { background: rgba(250,119,60,0.10); color: #b04a17; }
    .sf-stage-tag.tool  { background: rgba(0,179,164,0.10); color: var(--sf-deep); }

    /* Tools mini-grid */
    .sf-tool {
      background: white;
      border: 1px solid var(--ys-line);
      border-radius: 12px;
      padding: 16px 18px;
    }
    .sf-tool h4 {
      margin: 0 0 4px;
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      font-size: 1.04rem;
    }
    .sf-tool .sf-tool-meta {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--wf-coral);
      margin-bottom: 6px;
      font-family: var(--ys-font-display);
    }
    .sf-tool p { margin: 0; font-size: 0.92rem; color: var(--ys-muted); }

    /* Common-mistake cards */
    .sf-mistakes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
    }
    .sf-mistake {
      background: white;
      border-left: 4px solid #c69b1a;
      border-radius: 0 10px 10px 0;
      padding: 14px 18px;
      box-shadow: 0 1px 2px rgba(47,45,86,0.05);
    }
    .sf-mistake h4 {
      margin: 0 0 4px;
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      font-size: 1.02rem;
    }
    .sf-mistake p { margin: 0; font-size: 0.9rem; color: var(--ys-muted); }

    /* Weekly template box */
    .sf-week {
      background: white;
      border: 1px solid var(--ys-line);
      border-radius: 14px;
      padding: 22px 24px;
      box-shadow: 0 1px 3px rgba(47,45,86,0.06);
    }
    .sf-week h4 {
      margin: 0 0 8px;
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
    }
    .sf-week-row {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px dashed rgba(47,45,86,0.10);
      align-items: start;
    }
    .sf-week-row:last-child { border-bottom: 0; }
    .sf-week-row .sf-week-when {
      font-family: var(--ys-font-display);
      font-weight: 700;
      color: var(--sf-deep);
      font-size: 0.94rem;
    }
    @media (max-width: 500px) {
      .sf-week-row { grid-template-columns: 1fr; gap: 4px; }
    }

    /* CTA tiles at the bottom */
    .sf-cta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 8px;
    }
    @media (max-width: 700px) {
      .sf-cta-grid { grid-template-columns: 1fr; }
    }
    .sf-cta-card {
      background: white;
      border-radius: 14px;
      padding: 26px 28px;
      box-shadow: 0 4px 14px rgba(47,45,86,0.08);
      border: 1px solid var(--ys-line);
    }
    .sf-cta-card.featured {
      background: linear-gradient(135deg, var(--sf-deep) 0%, var(--sf-teal) 100%);
      color: white;
      border: 0;
    }
    .sf-cta-card.featured h3,
    .sf-cta-card.featured p { color: white; }
    .sf-cta-card .sf-cta-meta {
      font-family: var(--ys-font-display);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: var(--wf-coral);
      margin-bottom: 8px;
    }
    .sf-cta-card.featured .sf-cta-meta { color: rgba(255,255,255,0.85); }
    .sf-cta-card h3 {
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      margin: 0 0 6px;
      font-size: 1.24rem;
    }
    .sf-cta-card p { margin: 0 0 14px; }