/* ---------- Design tokens ---------- */
    :root {
      --pink: #E31C79;
      --amber: #FFA300;
      --purple: #84329B;
      --bg: #fef4f6;
      --ink: #333;
      --muted: #414042;
      --card: #ffffff;

      --pink-tint: #fde3ee;
      --amber-tint: #fff0d1;
      --purple-tint: #f0e0f5;

      --max-width: 1250px;
      color-scheme: light;
    }

    /* ---------- Base ---------- */
    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px);
    }

    body {
      margin: 0;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: var(--bg);
      color: var(--ink);
      font: 400 16px/1.65 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

    h2, h3 { margin: 0; line-height: 1.2; }

    *, :focus, :focus-visible {
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    button {
      -webkit-appearance: none;
      appearance: none;
      border: 0;
      box-shadow: none;
    }

    .wrap {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 24px 24px 0;
    }

    /* ---------- Tabs ---------- */
    .tabs-bar {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 10;
      padding: 14px 0;
      background: linear-gradient(var(--bg) 70%, transparent);
    }

    .tabs {
      display: flex;
      gap: 6px;
      width: max-content;
      max-width: 100%;
      margin: 0 auto;
      padding: 6px;
      background: #fff;
      border-radius: 999px;
    }

    .tabs button {
      flex: none;
      padding: 11px 24px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font: 600 0.95rem 'Poppins', sans-serif;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .tabs button:hover { color: var(--pink); }

    .tabs button[aria-selected="true"] {
      background: var(--pink);
      color: #fff;
    }

    /* ---------- Panels ---------- */
    .panel { padding: 32px 0 72px; }
    .panel[hidden] { display: none; }

    .intro {
      max-width: 800px;
      margin: 0 auto 40px;
      text-align: center;
    }

    .intro h2 {
      color: var(--purple);
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      font-weight: 500;
    }

    .intro p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 1.05rem;
    }

    /* ---------- Learner journey ---------- */
    .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 0 0 40px;
        padding: 0;
        list-style: none;
        counter-reset: step;
    }

    .steps li {
        position: relative;
        padding: 18px 18px 18px 64px;
        border-radius: 18px;
        background: none;
        color: var(--pink);
        font-weight: 600;
        counter-increment: step;
    }

    .steps li::before {
        content: counter(step);
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--pink);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 600;
    }

    /* ---------- Feature cards ---------- */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
      gap: 22px;
    }

    .interview-coach-card {
      padding: 26px;
      border-radius: 22px;
      background: var(--card);
    }

    .interview-coach-card.wide { grid-column: span 2; }

    .interview-coach-card .icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: 16px;
      border-radius: 14px;
      background: var(--pink-tint);
      font-size: 1.3rem;
    }

    .interview-coach-card:nth-child(3n + 2) .icon { background: var(--amber-tint); }
    .interview-coach-card:nth-child(3n)     .icon { background: var(--purple-tint); }

    .interview-coach-card h3 {
      margin-bottom: 8px;
      font-size: 1.15rem;
      font-weight: 600;
    }

    .interview-coach-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.97rem;
    }

    /* ---------- No borders or outlines (wins over host-site styles) ---------- */
    .wrap, .tabs-bar, .tabs, .tabs button, .panel, .interview-coach-card, .steps, .steps li {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .tabs button:focus,
    .tabs button:focus-visible,
    .tabs button:active {
      outline: 0 !important;
      box-shadow: none !important;
    }

    /* 16:9 images (swap the src with your own pictures) */
    .interview-coach-media {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        margin-bottom: 18px;
        border-radius: 14px;
        background: var(--purple-tint);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 960px) {
      .steps { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
      .wrap { padding: 16px 16px 0; }

      /* Tabs share the full width; "For" is dropped to save space */
      .tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        width: 100%;
        padding: 5px;
        border-radius: 20px;
      }

      .tabs button {
        min-width: 0;
        padding: 11px 2px;
        border-radius: 15px;
        font-size: 0.78rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }

      .tabs .pre { display: none; }

      .steps { grid-template-columns: 1fr; }
      .interview-coach-card.wide { grid-column: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; }
    }