/* ── AI chatbot development in Singapore: the build path —
   fully scoped to .n3l-chatbot-development-path ──
   Sibling of the transformation-order and adoption-path infographics: same
   ink/paper system, same mast rhythm, same numbered step rail. Differences are
   deliberate — each stage carries a right-hand DELIVERABLE pill (this build is
   about what each stage must produce), and the closing band is a 4-up failure
   grid rather than a rule list. Accents stay narrow: indigo carries the
   sequence, teal marks stage 4 (verification on real conversations), green
   lands stage 5, crimson is reserved for what the demo does not prove and for
   the failure modes. Every custom property is declared on the wrapper itself,
   so nothing leaks into the surrounding page. */

  .n3l-chatbot-development-path{
    --ink:        #0B1020;   /* deep navy, near-black */
    --ink-2:      #141B33;   /* panel navy */
    --ink-3:      #232C4A;   /* hairlines on dark */
    --paper:      #FFFFFF;
    --paper-2:    #F4F5F8;   /* page ground */
    --rule:       #E1E4EC;
    --muted:      #5B6480;
    --muted-dark: #9AA3BF;   /* muted on navy */
    --accent:     #3F3FB3;   /* NEXT3LABS indigo */
    --accent-hi:  #6B6BE8;   /* lifted indigo for dark ground */
    --step-bg:    #EEEEFA;   /* deliverable pill ground */
    --step-ring:  #CFCFF2;
    --gate:       #0E7C86;   /* stage 4 — verification (teal) */
    --gate-bg:    #E8F5F6;
    --gate-ring:  #BCE0E3;
    --done:       #17936B;   /* stage 5 lands */
    --done-bg:    #EAF7F1;
    --done-ring:  #BFE5D6;
    --stop:       #C0324B;   /* what the demo does not prove (crimson) */
    --stop-bg:    #FBEBEE;
    --stop-ring:  #F0C8D0;
    --r:          6px;
    --shadow-lg:  0 4px 10px rgba(11,16,32,.10), 0 22px 48px -14px rgba(11,16,32,.34);

    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    margin:32px 0;
  }

  .n3l-chatbot-development-path,
  .n3l-chatbot-development-path *,
  .n3l-chatbot-development-path *::before,
  .n3l-chatbot-development-path *::after{ box-sizing:border-box; }

  .n3l-chatbot-development-path .fig{
    max-width:720px;
    margin:0 auto;
    background:var(--paper);
    border:1px solid var(--rule);
    border-radius:8px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    container-type:inline-size;
  }

  /* ── shared type ────────────────────────────────────────── */
  .n3l-chatbot-development-path .num{
    font-family:Archivo,Inter,sans-serif;
    font-weight:600;
    letter-spacing:-.05em;
    line-height:.86;
    font-variant-numeric:lining-nums tabular-nums;
    font-feature-settings:"tnum" 1;
  }

  .n3l-chatbot-development-path .eyebrow{
    font-size:10px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  /* ── masthead ───────────────────────────────────────────── */
  .n3l-chatbot-development-path .mast{
    background:var(--ink);
    color:var(--paper);
    padding:34px 36px 32px;
    position:relative;
    overflow:hidden;
  }
  .n3l-chatbot-development-path .mast::after{ /* faint diagonal ruling */
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(115deg,
      rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
    pointer-events:none;
  }
  .n3l-chatbot-development-path .mast > *{ position:relative; z-index:1; }

  .n3l-chatbot-development-path .brand-eyebrow{
    display:block;
    color:var(--muted-dark);
    margin-bottom:24px;
  }

  /* the title is a styled div, not a heading — the post owns the h1 */
  .n3l-chatbot-development-path .title{
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(28px,5.4cqi,40px);
    line-height:1.06;
    letter-spacing:-.038em;
    margin:0 0 12px;
    max-width:18ch;
    text-wrap:balance;
    color:var(--paper);
  }
  .n3l-chatbot-development-path .title .hi{ color:var(--accent-hi); }

  .n3l-chatbot-development-path .sub{
    font-size:15px;
    line-height:1.5;
    color:#C3C9DE;
    margin:0;
    max-width:46ch;
  }
  .n3l-chatbot-development-path .sub strong{ color:var(--paper); font-weight:600; }

  .n3l-chatbot-development-path .mast-rule{
    margin-top:26px;
    height:3px;
    width:76px;
    background:var(--accent-hi);
    border-radius:2px;
  }

  /* ── demo vs. reality, two halves ───────────────────────── */
  .n3l-chatbot-development-path .split{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-bottom:1px solid var(--rule);
  }
  .n3l-chatbot-development-path .half{
    min-width:0;
    padding:16px 24px 17px;
  }
  .n3l-chatbot-development-path .half--demo{
    background:var(--paper-2);
    border-right:1px solid var(--rule);
  }
  .n3l-chatbot-development-path .half--real{ background:var(--stop-bg); }
  .n3l-chatbot-development-path .half--demo .half-label{ color:var(--muted); }
  .n3l-chatbot-development-path .half--real .half-label{ color:var(--stop); }
  .n3l-chatbot-development-path .half-label{
    display:block;
    margin-bottom:8px;
  }
  .n3l-chatbot-development-path .half-line{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--ink);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .n3l-chatbot-development-path .half-line b{ font-weight:600; }
  .n3l-chatbot-development-path .half-line .stop-em{ color:var(--stop); }

  /* ── steps header strip ─────────────────────────────────── */
  .n3l-chatbot-development-path .steps-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 36px 14px;
    background:var(--paper-2);
    border-bottom:1px solid var(--rule);
  }
  .n3l-chatbot-development-path .steps-head .eyebrow{ color:var(--accent); }
  .n3l-chatbot-development-path .steps-head .legend{
    flex:none;
    font-size:11px;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--muted);
    text-transform:uppercase;
  }
  .n3l-chatbot-development-path .steps-head .legend i{
    font-style:italic;
    text-transform:none;
  }

  /* ── the five step rows ─────────────────────────────────── */
  .n3l-chatbot-development-path .steps{
    list-style:none;
    margin:0;
    padding:0;
  }
  .n3l-chatbot-development-path .step{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) minmax(0,168px);
    align-items:center;
    column-gap:16px;
    padding:17px 36px;
    border-bottom:1px solid var(--rule);
    position:relative;
  }
  .n3l-chatbot-development-path .step:last-child{ border-bottom:0; }

  /* the thread running down the numbers — the order made visible */
  .n3l-chatbot-development-path .step::before{
    content:"";
    position:absolute;
    left:47px;
    top:50%;
    bottom:-1px;
    width:1px;
    background:var(--rule);
  }
  .n3l-chatbot-development-path .step--last::before{ display:none; }

  .n3l-chatbot-development-path .idx{
    font-size:26px;
    color:var(--accent);
    position:relative;
    z-index:1;
  }
  .n3l-chatbot-development-path .step--gate{ background:var(--gate-bg); }
  .n3l-chatbot-development-path .step--gate .idx{ color:var(--gate); }
  .n3l-chatbot-development-path .step--last .idx{ color:var(--done); }

  .n3l-chatbot-development-path .body{ min-width:0; }
  .n3l-chatbot-development-path .body h3{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 3px;
    color:var(--ink);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .n3l-chatbot-development-path .body p{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .n3l-chatbot-development-path .body .gate-em{
    font-weight:600;
    color:var(--gate);
  }

  /* deliverable pill — what the stage must hand over before the next starts */
  .n3l-chatbot-development-path .out{
    min-width:0;
    justify-self:end;
    text-align:right;
    padding:8px 11px;
    background:var(--step-bg);
    border:1px solid var(--step-ring);
    border-radius:var(--r);
    font-size:11px;
    font-weight:500;
    line-height:1.35;
    color:var(--accent);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .n3l-chatbot-development-path .out b{ font-weight:600; }
  .n3l-chatbot-development-path .out--gate{
    background:var(--paper);
    border-color:var(--gate-ring);
    color:var(--gate);
  }
  .n3l-chatbot-development-path .out--done{
    background:var(--done-bg);
    border-color:var(--done-ring);
    color:var(--done);
  }

  /* ── the four failure modes ─────────────────────────────── */
  .n3l-chatbot-development-path .fails{
    padding:16px 36px 18px;
    background:var(--paper-2);
    border-top:1px solid var(--rule);
  }
  .n3l-chatbot-development-path .fails-label{
    display:block;
    color:var(--stop);
    margin-bottom:10px;
  }
  .n3l-chatbot-development-path .fail-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .n3l-chatbot-development-path .fail-item{
    min-width:0;
    padding:10px 12px;
    background:var(--paper);
    border:1px solid var(--rule);
    border-left:3px solid var(--stop);
    border-radius:var(--r);
    font-size:12px;
    line-height:1.35;
    color:var(--muted);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .n3l-chatbot-development-path .fail-item .x{
    display:inline-block;
    margin-right:6px;
    font-weight:700;
    color:var(--stop);
  }
  .n3l-chatbot-development-path .fail-item b{
    font-weight:600;
    color:var(--ink);
  }
  .n3l-chatbot-development-path .fail-item span:not(.x){
    display:block;
    margin-top:2px;
  }

  /* ── footer brand line ──────────────────────────────────── */
  .n3l-chatbot-development-path .foot{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding:16px 36px;
    margin:0;
    background:var(--ink-2);
    border-top:1px solid var(--ink-3);
    font-size:11px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted-dark);
  }
  .n3l-chatbot-development-path .foot .mark-word{
    font-family:Archivo,Inter,sans-serif;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--paper);
  }

  /* ── narrow: container query + width fallback ───────────── */
  @container (max-width: 560px){
    .n3l-chatbot-development-path .mast{ padding:28px 22px 26px; }
    .n3l-chatbot-development-path .title{ font-size:clamp(25px,7.6cqi,34px); max-width:none; }
    .n3l-chatbot-development-path .split{ grid-template-columns:minmax(0,1fr); }
    .n3l-chatbot-development-path .half{ padding:14px 22px 15px; }
    .n3l-chatbot-development-path .half--demo{
      border-right:0;
      border-bottom:1px solid var(--rule);
    }
    .n3l-chatbot-development-path .steps-head{
      padding:14px 22px 12px;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .n3l-chatbot-development-path .steps-head .legend{ letter-spacing:.02em; }
    .n3l-chatbot-development-path .step{
      grid-template-columns:36px minmax(0,1fr);
      column-gap:12px;
      row-gap:10px;
      padding:15px 22px;
    }
    .n3l-chatbot-development-path .step::before{ left:33px; }
    .n3l-chatbot-development-path .idx{ font-size:21px; }
    .n3l-chatbot-development-path .out{
      grid-column:2;
      justify-self:start;
      text-align:left;
    }
    .n3l-chatbot-development-path .fails{ padding:14px 22px 16px; }
    .n3l-chatbot-development-path .fail-list{ grid-template-columns:minmax(0,1fr); gap:6px; }
    .n3l-chatbot-development-path .foot{
      padding:14px 22px;
      font-size:10px;
      justify-content:flex-start;
      row-gap:4px;
    }
  }

  @media (max-width: 600px){
    .n3l-chatbot-development-path{ margin:20px 0; }
    .n3l-chatbot-development-path .mast{ padding:28px 22px 26px; }
    .n3l-chatbot-development-path .title{ font-size:clamp(25px,7vw,34px); max-width:none; }
    .n3l-chatbot-development-path .split{ grid-template-columns:minmax(0,1fr); }
    .n3l-chatbot-development-path .half{ padding:14px 22px 15px; }
    .n3l-chatbot-development-path .half--demo{
      border-right:0;
      border-bottom:1px solid var(--rule);
    }
    .n3l-chatbot-development-path .steps-head{
      padding:14px 22px 12px;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .n3l-chatbot-development-path .steps-head .legend{ letter-spacing:.02em; }
    .n3l-chatbot-development-path .step{
      grid-template-columns:36px minmax(0,1fr);
      column-gap:12px;
      row-gap:10px;
      padding:15px 22px;
    }
    .n3l-chatbot-development-path .step::before{ left:33px; }
    .n3l-chatbot-development-path .idx{ font-size:21px; }
    .n3l-chatbot-development-path .out{
      grid-column:2;
      justify-self:start;
      text-align:left;
    }
    .n3l-chatbot-development-path .fails{ padding:14px 22px 16px; }
    .n3l-chatbot-development-path .fail-list{ grid-template-columns:minmax(0,1fr); gap:6px; }
    .n3l-chatbot-development-path .foot{
      padding:14px 22px;
      font-size:10px;
      justify-content:flex-start;
      row-gap:4px;
    }
  }