/* ==========================================================
           1. Tokens
           ========================================================== */
        :root {
          --bg: #ffffff;
          --text: #151515;
          --muted: #6f7480;
          --line: #d9d9d9;
          --surface: #f5f5f5;
          --max: 1180px;
        }

        /* ==========================================================
           2. Reset & base
           ========================================================== */
        * {
          box-sizing: border-box;
        }

        html {
          scroll-behavior: smooth;
        }

        body {
          margin: 0;
          background: var(--bg);
          color: var(--text);
          font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
          -webkit-font-smoothing: antialiased;
        }

        /* ==========================================================
           3. Layout shell
           ========================================================== */
        .shell {
          width: min(calc(100% - 48px), var(--max));
          margin: 0 auto;
        }

        /* ==========================================================
           4. Top bar
           ========================================================== */
        .topbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          padding: 24px 0;
          font-size: 14px;
        }

        .brand {
          color: var(--text);
          font-weight: 800;
          text-decoration: none;
        }

        .back-link {
          color: var(--muted);
          text-decoration: none;
        }

        /* ==========================================================
           5. Shared micro-labels
           ========================================================== */
        .eyebrow,
        .model-label,
        .comparison-label {
          margin-bottom: 10px;
          color: var(--muted);
          font-size: 14px;
        }

        /* ==========================================================
           6. Intro section
           ========================================================== */
        .intro {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          min-height: 100vh;
          padding-top: 24px;
          border-bottom: 1px solid var(--line);
        }

        .intro > .shell {
          position: relative;
          padding-bottom: 88px;
        }

        .intro .eyebrow {
          margin-bottom: 10px;
        }

        .intro-copy {
          max-width: 920px;
          margin-top: 48px;
        }

        .intro-copy p {
          margin: 0 0 20px;
          color: var(--muted);
          font-size: 19px;
          line-height: 1.75;
          text-align: justify;
        }

        .intro-copy p:last-child {
          margin-bottom: 0;
        }

        /* ==========================================================
           6.1 Contents navigation
           ========================================================== */

        .contents {
          position: fixed;
          top: 26px;
          left: 40px;

          width: 250px;
          max-height: calc(100vh - 52px);

          overflow-y: auto;

          z-index: 10;

          padding-right: 16px;
        }


        /* Title */

        .contents-title {
          margin-bottom: 34px;

          color: var(--text);

          font-size: 14px;
          font-weight: 800;
        }


        /* ==========================================================
           Main chapter links
           ========================================================== */

        .contents-main {
          display: grid;
          grid-template-columns: 32px 1fr;
          gap: 14px;

          margin-bottom: 26px;

          color: var(--text);

          font-size: 14px;
          line-height: 1.35;

          text-decoration: none;
        }

        .contents-main > span:first-child {
          color: var(--muted);
          font-weight: 700;
        }

        .contents-main:hover > span:last-child {
          text-decoration: underline;
        }


        /* ==========================================================
           Chapter group
           ========================================================== */

        .contents-group {
          margin-bottom: 28px;
        }

        .contents-group > .contents-main {
          margin-bottom: 15px;
        }


        /* ==========================================================
           First nested level
           SDLC / Test Analyst involvement
           ========================================================== */

        .contents-sub {
          position: relative;

          margin-left: 46px;
          padding-left: 14px;
        }


        /* vertical navigation line */

        .contents-sub::before {
          content: "";

          position: absolute;
          top: 4px;
          bottom: 4px;
          left: 0;

          width: 1px;

          background: var(--line);
        }


        .contents-sub > a {
          display: block;

          margin-bottom: 11px;

          color: var(--muted);

          font-size: 13px;
          line-height: 1.4;

          text-decoration: none;

          transition: color 0.15s ease;
        }

        .contents-sub > a:hover {
          color: var(--text);
        }


        /* ==========================================================
           Second nested level
           Analysis / Design / Implementation / Execution
           ========================================================== */

        .contents-sub-level {
          margin: 4px 0 16px 12px;
        }

        .contents-sub-level a {
          position: relative;

          display: block;

          margin-bottom: 8px;
          padding-left: 13px;

          color: var(--muted);

          font-size: 12px;
          line-height: 1.4;

          text-decoration: none;

          transition: color 0.15s ease;
        }

        .contents-sub-level a::before {
          content: "";

          position: absolute;
          top: 0.65em;
          left: 0;

          width: 5px;
          height: 1px;

          background: var(--line);
        }

        .contents-sub-level a:hover {
          color: var(--text);
        }


        /* ==========================================================
           Scrollbar
           ========================================================== */

        .contents {
          scrollbar-width: thin;
          scrollbar-color: var(--line) transparent;
        }

        .contents::-webkit-scrollbar {
          width: 4px;
        }

        .contents::-webkit-scrollbar-track {
          background: transparent;
        }

        .contents::-webkit-scrollbar-thumb {
          background: var(--line);
          border-radius: 10px;
        }

        /* ==========================================================
           7. Hero section
           ========================================================== */
        .hero {
          padding: 72px 0 88px;
        }

        h1 {
          max-width: 900px;
          margin: 0;
          font-size: clamp(54px, 8vw, 104px);
          line-height: 0.96;
          letter-spacing: -0.055em;
        }

        .hero-copy {
          max-width: 760px;
          margin: 24px 0 0;
          color: var(--muted);
          font-size: 20px;
          line-height: 1.55;
        }

        /* ==========================================================
           8. Model cards
           ========================================================== */
        .model {
          position: relative;
          padding: 32px 0 46px;
          border-top: none;
        }

        .model::before {
          content: "";
          position: absolute;
          top: 0;
          left: max(24px, calc((100% - var(--max)) / 2));
          right: 0;
          height: 1px;
          background: var(--line);
        }

        .model h2 {
          margin: 0;
          font-size: clamp(34px, 4vw, 52px);
          line-height: 1;
          letter-spacing: -0.035em;
        }

        .tagline {
          margin: 14px 0 0;
          font-size: 18px;
          line-height: 1.5;
        }

        .flow {
          margin: 34px 0 26px;
          padding: 18px 20px;
          border-radius: 12px;
          background: var(--surface);
          overflow-x: auto;
          white-space: nowrap;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
          font-size: 14px;
          line-height: 1.6;
        }

        .model-copy {
          max-width: 1060px;
        }

        .model-copy p {
          margin: 0 0 14px;
          font-size: 17px;
          line-height: 1.55;
        }

        .model-copy strong {
          font-weight: 800;
        }

        /* ==========================================================
           9. Comparison table
           ========================================================== */
        .comparison {
          position: relative;
          padding: 34px 0 80px;
          border-top: none;
        }

        .comparison::before {
          content: "";
          position: absolute;
          top: 0;
          left: max(24px, calc((100% - var(--max)) / 2));
          right: 0;
          height: 1px;
          background: var(--line);
        }

        .comparison h2 {
          margin: 0 0 24px;
          font-size: clamp(34px, 4vw, 52px);
          letter-spacing: -0.035em;
        }

        .table-wrap {
          overflow-x: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          font-size: 15px;
          line-height: 1.45;
        }

        th,
        td {
          padding: 13px 14px;
          text-align: left;
          vertical-align: top;
          border-bottom: 1px solid var(--line);
        }

        th {
          font-weight: 800;
        }

        td:first-child {
          font-weight: 700;
          white-space: nowrap;
        }

        /* ==========================================================
           10. Footer
           ========================================================== */
        footer {
          display: flex;
          justify-content: space-between;
          gap: 24px;
          padding: 28px 0 38px;
          border-top: 1px solid var(--line);
          color: var(--muted);
          font-size: 14px;
        }

        /* ==========================================================
           11. Responsive
           ========================================================== */
        @media (max-width: 1280px) {
          .contents {
            position: static;
            width: 100%;
            margin-bottom: 48px;
          }

          .contents-title {
            margin-bottom: 20px;
          }

          .contents a {
            margin-bottom: 16px;
          }
        }

        @media (max-width: 720px) {
          .shell {
            width: min(calc(100% - 28px), var(--max));
          }

          .topbar {
            flex-direction: column;
            align-items: flex-start;
          }

          .intro {
            min-height: auto;
            padding-top: 48px;
          }

          .intro > .shell {
            padding-bottom: 64px;
          }

          .intro-copy p {
            font-size: 17px;
            line-height: 1.65;
          }

          .contents {
            margin-bottom: 40px;
          }

          .contents a {
            grid-template-columns: 28px 1fr;
            gap: 12px;
            font-size: 14px;
          }

          .hero {
            padding: 48px 0 64px;
          }

          .model {
            padding: 28px 0 38px;
          }

          .flow {
            margin-top: 26px;
            font-size: 13px;
          }

          .model-copy p {
            font-size: 16px;
          }

          footer {
            flex-direction: column;
          }
        }

                /* ==========================================================
           12. Test Analyst involvement in test activities
           ========================================================== */

        .test-activities-intro {
          position: relative;
          padding: 72px 0 64px;
        }

        .test-activities-intro::before {
          content: "";
          position: absolute;
          top: 0;
          left: max(24px, calc((100% - var(--max)) / 2));
          right: 0;
          height: 1px;
          background: var(--line);
        }

        .test-activities-intro h2 {
          max-width: 980px;
          margin: 0;

          font-size: clamp(48px, 7vw, 88px);
          line-height: 0.96;
          letter-spacing: -0.055em;
        }

        .test-activities-copy {
          max-width: 780px;
          margin: 26px 0 0;

          color: var(--muted);
          font-size: 20px;
          line-height: 1.6;
        }


        /* ==========================================================
           Activity overview
           ========================================================== */

        .activities-overview {
          margin-top: 42px;
          padding: 24px;

          border-radius: 12px;
          background: var(--surface);

          overflow-x: auto;
        }

        .activities-overview-label {
          margin-bottom: 18px;

          color: var(--muted);
          font-size: 13px;
          font-weight: 700;
        }

        .activities-flow {
          display: flex;
          align-items: center;
          gap: 16px;

          min-width: 850px;
        }

        .activities-flow-item {
          flex: 1;
        }

        .activities-flow-item strong {
          display: block;
          margin-bottom: 6px;

          font-size: 15px;
        }

        .activities-flow-item span {
          color: var(--muted);
          font-size: 13px;
          line-height: 1.45;
        }

        .activities-flow-arrow {
          color: var(--muted);
          font-size: 19px;
        }


        /* ==========================================================
           Individual activity
           ========================================================== */

        .test-activity {
          position: relative;
          padding: 42px 0 54px;
        }

        .test-activity::before {
          content: "";
          position: absolute;
          top: 0;
          left: max(24px, calc((100% - var(--max)) / 2));
          right: 0;
          height: 1px;
          background: var(--line);
        }

        .activity-label {
          margin-bottom: 10px;

          color: var(--muted);
          font-size: 14px;
        }

        .test-activity h2 {
          margin: 0;

          font-size: clamp(34px, 4vw, 52px);
          line-height: 1;
          letter-spacing: -0.035em;
        }

        .activity-tagline {
          margin: 14px 0 0;

          font-size: 18px;
          line-height: 1.5;
        }

        .activity-copy {
          max-width: 1060px;
          margin-top: 32px;
        }

        .activity-copy > p {
          margin: 0 0 16px;

          font-size: 17px;
          line-height: 1.6;
        }

        .activity-copy strong {
          font-weight: 800;
        }


        /* ==========================================================
           Key point
           ========================================================== */

        .activity-key {
          margin: 28px 0;
          padding: 20px 22px;

          border-left: 3px solid var(--text);
          background: var(--surface);
        }

        .activity-key-label {
          display: block;
          margin-bottom: 8px;

          color: var(--muted);
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }

        .activity-key p {
          margin: 0;

          font-size: 16px;
          line-height: 1.6;
        }


        /* ==========================================================
           Flow
           ========================================================== */

        .activity-flow {
          margin: 28px 0;
          padding: 18px 20px;

          border-radius: 12px;
          background: var(--surface);

          overflow-x: auto;
          white-space: nowrap;

          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
            Consolas, "Liberation Mono", monospace;

          font-size: 14px;
          line-height: 1.6;
        }


        /* ==========================================================
           Activity list
           ========================================================== */

        .activity-list {
          margin: 24px 0 28px;
          padding: 0;

          list-style: none;
        }

        .activity-list li {
          position: relative;

          margin-bottom: 12px;
          padding-left: 22px;

          font-size: 16px;
          line-height: 1.55;
        }

        .activity-list li::before {
          content: "—";

          position: absolute;
          left: 0;

          color: var(--muted);
        }


        /* ==========================================================
           Test design factors
           ========================================================== */

        .design-factors {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;

          margin: 28px 0;
        }

        .design-factor {
          padding: 16px 18px;

          border: 1px solid var(--line);
          border-radius: 10px;

          font-size: 14px;
          line-height: 1.4;
        }


        /* ==========================================================
           High-level vs low-level test cases
           ========================================================== */

        .test-case-types {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 18px;

          margin: 30px 0;
        }

        .test-case-type {
          padding: 22px;

          border: 1px solid var(--line);
          border-radius: 12px;
        }

        .test-case-type h3 {
          margin: 0 0 10px;

          font-size: 20px;
          letter-spacing: -0.02em;
        }

        .test-case-type > p {
          margin: 0 0 20px;

          color: var(--muted);
          font-size: 15px;
          line-height: 1.55;
        }

        .test-case-example {
          padding-top: 16px;
          border-top: 1px solid var(--line);
        }

        .test-case-example-label {
          display: block;
          margin-bottom: 7px;

          color: var(--muted);
          font-size: 12px;
          font-weight: 700;
          text-transform: uppercase;
        }

        .test-case-example p {
          margin: 0;

          font-size: 14px;
          line-height: 1.55;
        }


        /* ==========================================================
           Iterative process note
           ========================================================== */

        .activity-feedback {
          position: relative;
          padding: 42px 0 80px;
        }

        .activity-feedback::before {
          content: "";
          position: absolute;
          top: 0;
          left: max(24px, calc((100% - var(--max)) / 2));
          right: 0;
          height: 1px;
          background: var(--line);
        }

        .activity-feedback-box {
          padding: 28px;

          border-radius: 12px;
          background: var(--surface);
        }

        .activity-feedback-box h2 {
          margin: 0 0 16px;

          font-size: clamp(28px, 4vw, 40px);
          letter-spacing: -0.035em;
        }

        .activity-feedback-box p {
          max-width: 900px;
          margin: 0;

          color: var(--muted);
          font-size: 16px;
          line-height: 1.65;
        }

        .activity-feedback-flow {
          margin-top: 22px;

          overflow-x: auto;
          white-space: nowrap;

          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
            Consolas, "Liberation Mono", monospace;

          font-size: 14px;
          line-height: 1.6;
        }


        /* ==========================================================
           Test activities responsive
           ========================================================== */

        @media (max-width: 720px) {

          .test-activities-intro {
            padding: 48px 0 54px;
          }

          .test-activities-copy {
            font-size: 17px;
          }

          .test-activity {
            padding: 34px 0 44px;
          }

          .activity-copy > p {
            font-size: 16px;
          }

          .design-factors {
            grid-template-columns: 1fr;
          }

          .test-case-types {
            grid-template-columns: 1fr;
          }

          .activity-flow {
            font-size: 13px;
          }

          .activity-feedback {
            padding-bottom: 60px;
          }

        }