/*
 * Jurisio Request Demo / Contact — desktop production layer.
 * Source truth: the supplied contact.jsx and contact-demo.jsx styles.
 * The only responsive adaptation is the approved 540px desktop boundary.
 */

@media (min-width: 540px) {
.ct-page .ct-input { line-height: 1.5; }

        .ct-page { background: var(--bg); }

        /* ── Hero now carries the form: grow to fit, never crop it ── */
        .ct-page .grd--contact { min-height: 100vh; height: auto; }

        .ct-page .ct-hero-inner {
          position: relative; z-index: 10;
          max-width: 1280px; margin: 0 auto; width: 100%;
          min-height: 100vh;
          box-sizing: border-box;
          padding: 148px 40px 88px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
          gap: 64px; align-items: center; align-content: center;
        }

        /* Left copy — reuse the garden voice, but in normal flow */
        .ct-page .ct-hero-copy { max-width: 560px; }
        .ct-page .ct-hero-copy .grd-eyebrow { margin-bottom: 18px; }
        .ct-page .ct-hero-copy h1 {
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(46px, 5.2vw, 78px); line-height: 0.98; letter-spacing: -0.03em;
          color: #fff; margin: 0 0 22px; text-shadow: 0 2px 34px rgba(20,8,4,.55);
        }
        .ct-page .ct-hero-copy h1 em { font-style: italic; color: var(--cream, #fff); }
        .ct-page .ct-hero-copy p {
          font-size: 18px; font-weight: 500; line-height: 1.5; color: rgba(255,246,235,.95);
          max-width: 42ch; margin: 0 0 30px; text-shadow: 0 1px 18px rgba(20,8,4,.55);
        }

        /* Compact directory under the copy */
        .ct-page .ct-hero-dir {
          display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px;
          max-width: 460px;
        }
        .ct-page .ct-hero-dir .row {
          display: flex; flex-direction: column; gap: 3px;
          padding: 13px 0; border-top: 1px solid rgba(255,246,235,.22);
        }
        .ct-page .ct-hero-dir .k {
          font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em;
          text-transform: uppercase; color: rgba(255,246,235,.72); font-weight: 600;
        }
        .ct-page .ct-hero-dir .v {
          font-family: var(--font-sans); font-size: 14px; color: #fff; letter-spacing: -0.005em; font-weight: 500;
        }

        /* Directory rows inside the form card */
        .ct-page .ct-card-dir {
          display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px;
          margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--border);
        }
        .ct-page .ct-card-dir .row {
          display: flex; flex-direction: column; gap: 3px; padding: 13px 0;
        }
        .ct-page .ct-card-dir .k {
          font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em;
          text-transform: uppercase; color: var(--muted); font-weight: 600;
        }
        .ct-page .ct-card-dir .v {
          font-family: var(--font-sans); font-size: 14px; color: var(--ink); letter-spacing: -0.005em; font-weight: 500;
        }

        /* Neutralize the mono eyebrows on this page */
        .ct-page .grd-eyebrow, .ct-page .eyebrow {
          font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; font-weight: 600;
        }

        /* ── Floating form card ── */
        .ct-page .ct-card {
          background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
          padding: 32px 32px 30px; box-shadow: 0 30px 80px -30px rgba(20,8,4,.6), var(--shadow-md);
          opacity: 0; transform: translateY(16px);
          transition: opacity 700ms ease 120ms, transform 700ms cubic-bezier(.2,.7,.3,1) 120ms;
        }
        .ct-page .grd--contact.ready .ct-card { opacity: 1; transform: none; }

        .ct-page .ct-card-head { margin-bottom: 22px; }
        .ct-page .ct-card-head .eyebrow { justify-content: flex-start; margin-bottom: 10px; }
        .ct-page .ct-card-head .eyebrow .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--accent); }
        .ct-page .ct-card-head h2 {
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(26px, 2.6vw, 32px); line-height: 1.04;
          letter-spacing: -0.025em; color: var(--ink); margin: 0;
        }
        .ct-page .ct-card-head h2 em { font-style: italic; color: var(--accent-ink); }
        .ct-page .ct-card-title {
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(26px, 2.6vw, 32px); line-height: 1.04;
          letter-spacing: -0.025em; color: var(--ink); margin: 0 0 22px;
        }

        .ct-page .ct-form { display: flex; flex-direction: column; gap: 22px; }
        .ct-page .ct-fieldset-lbl {
          font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 11px;
        }
        .ct-page .ct-dept-grid {
          display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
        }
        .ct-page .ct-dept {
          text-align: left; padding: 12px 13px; border-radius: 13px;
          border: 1px solid var(--border); background: var(--surface); cursor: pointer;
          transition: border-color 160ms, box-shadow 160ms, transform 160ms, background 160ms;
          display: flex; flex-direction: column; gap: 3px;
        }
        .ct-page .ct-dept:hover { border-color: var(--border-strong); transform: translateY(-1px); }
        .ct-page .ct-dept.is-on {
          border-color: var(--accent); background: var(--surface);
          box-shadow: var(--shadow-md);
        }
        .ct-page .ct-dept .d-label {
          font-family: var(--font-display); font-size: 16px; font-weight: 500;
          letter-spacing: -0.01em; color: var(--ink); line-height: 1.1;
        }
        .ct-page .ct-dept.is-on .d-label { color: var(--accent-ink); }
        .ct-page .ct-dept .d-hint { font-size: 12px; color: var(--muted); line-height: 1.3; }

        .ct-page .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .ct-page .ct-field { display: flex; flex-direction: column; gap: 7px; }
        .ct-page .ct-label {
          font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0;
          text-transform: none; color: var(--ink-2); font-weight: 600;
        }
        .ct-page .ct-input, .ct-page .ct-textarea {
          background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
          color: var(--ink); font-family: var(--font-sans); font-size: 15px;
          padding: 11px 13px; outline: none; width: 100%; box-sizing: border-box;
          transition: border-color 180ms, box-shadow 180ms;
        }
        .ct-page .ct-input::placeholder, .ct-page .ct-textarea::placeholder { color: var(--muted-2); }
        .ct-page .ct-input:focus, .ct-page .ct-textarea:focus {
          border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
        }
        .ct-page .ct-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

        .ct-page .ct-actions { display: flex; align-items: center; gap: 18px; padding-top: 2px; flex-wrap: wrap; }
        .ct-page .ct-submit {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 13px 24px; border-radius: 11px;
          background: var(--ink); color: var(--bg);
          font-family: var(--font-sans); font-size: 15px; font-weight: 500;
          border: none; cursor: pointer; transition: gap 180ms ease, opacity 160ms;
        }
        .ct-page .ct-submit:hover { gap: 14px; }
        .ct-page .ct-submit:disabled { opacity: 0.55; cursor: progress; }
        .ct-page .ct-fineprint {
          font-family: var(--font-sans); font-size: 12px; letter-spacing: 0;
          text-transform: none; color: var(--muted); line-height: 1.5; margin: 0;
        }

        /* Sent state (inside the card) */
        .ct-page .ct-sent { animation: ct-in 360ms ease; }
        @keyframes ct-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
        .ct-page .ct-sent-title {
          font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1;
          letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; font-weight: 500;
        }
        .ct-page .ct-sent-sub {
          font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px;
          text-wrap: pretty;
        }
        .ct-page .ct-sent-ref {
          font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--muted);
          padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 22px;
        }
        .ct-page .ct-sent-ref b { color: var(--ink); font-weight: 600; }
        .ct-page .ct-link-btn {
          display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
          background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 500;
          border: 1px solid var(--border-strong); cursor: pointer; transition: border-color 160ms, background 160ms;
        }
        .ct-page .ct-link-btn:hover { border-color: var(--ink); background: var(--surface-2); }

        @media (max-width: 1040px) {
          .ct-page .ct-hero-inner {
            grid-template-columns: 1fr; gap: 40px;
            padding: 128px 28px 72px;
          }
          .ct-page .ct-card { max-width: 560px; }
        }
        @media (max-width: 560px) {
          .ct-page .ct-card-dir { grid-template-columns: 1fr; }
          .ct-page .ct-dept-grid { grid-template-columns: 1fr; }
          .ct-page .ct-row { grid-template-columns: 1fr; gap: 18px; }
          .ct-page .ct-card { padding: 26px 22px; }
        }


/* Contact Us is the source's centered-card variant. */
.contact-kind-contact .ct-page .ct-hero-inner {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  justify-items: center;
}
.contact-kind-contact .ct-page .ct-card {
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}



        .ct-demo { --d-accent: #a9d0ec; --d-line: rgba(255,255,255,.14); max-width: 440px;
          transition: max-width 500ms cubic-bezier(.2,.7,.3,1); }
        .ct-demo.wide { max-width: 620px; }
        .ct-demo-eyebrow {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
          letter-spacing: 0.04em; text-transform: uppercase;
          color: rgba(255,246,235,.82); margin-bottom: 14px;
          text-shadow: 0 1px 12px rgba(10,20,30,.5);
        }
        .ct-demo-eyebrow .live {
          width: 6px; height: 6px; border-radius: 999px; background: var(--d-accent);
          box-shadow: 0 0 0 0 var(--d-accent); animation: ctd-pulse 2s ease-out infinite;
        }
        @keyframes ctd-pulse {
          0% { box-shadow: 0 0 0 0 rgba(169,208,236,.55); }
          70% { box-shadow: 0 0 0 7px rgba(169,208,236,0); }
          100% { box-shadow: 0 0 0 0 rgba(169,208,236,0); }
        }

        .ct-glass {
          border-radius: 16px; border: 1px solid var(--d-line);
          background: linear-gradient(180deg, rgba(18,34,50,.62), rgba(12,24,38,.68));
          backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
          box-shadow: 0 22px 54px -24px rgba(6,14,24,.7); overflow: hidden;
          opacity: 0; transform: translateY(16px);
          transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1);
        }
        .ct-demo.ready .ct-glass { opacity: 1; transform: none; }
        .ct-demo.ready .ct-console { transition-delay: 90ms; }

        .g-bar {
          display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255,255,255,.03);
        }
        .g-bar .b-ed {
          display: inline-flex; align-items: center; gap: 5px;
          font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: #fff;
          padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid var(--d-line); background: rgba(255,255,255,.05);
        }
        .g-bar .b-ed svg { color: var(--d-accent); }
        .g-bar .b-matter { font-family: var(--font-sans); font-size: 11.5px; color: rgba(255,255,255,.6);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .g-bar .b-state { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
          font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
          color: rgba(255,255,255,.6); white-space: nowrap; }
        .g-bar .b-state .d { width: 5px; height: 5px; border-radius: 999px; background: var(--d-accent); }
        .g-bar .b-state.busy .d { animation: ctd-pulse 1.4s ease-out infinite; }

        /* ── Upload card ── */
        .ct-upcard { margin-bottom: 12px; }
        .up-body { padding: 14px; }

        /* click phase */
        .up-click { position: relative; padding: 16px 12px 20px; text-align: center; }
        .up-btn {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 11px 20px; border-radius: 11px; cursor: pointer;
          background: var(--d-accent); color: #10202f; border: none;
          font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
          box-shadow: 0 8px 22px -10px rgba(169,208,236,.8); transition: transform 140ms;
        }
        .up-btn.pressed { transform: scale(.94); }
        .up-btn.pressed::after {
          content: ""; position: absolute; left: 50%; top: 38%; width: 18px; height: 18px;
          border-radius: 999px; border: 2px solid var(--d-accent); transform: translate(-50%,-50%);
          animation: up-ripple 500ms ease-out forwards;
        }
        @keyframes up-ripple { from { opacity: .7; width: 18px; height: 18px; } to { opacity: 0; width: 74px; height: 74px; } }
        .up-hint { margin-top: 12px; font-family: var(--font-sans); font-size: 11.5px; color: rgba(255,255,255,.5); }
        .up-cursor {
          position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; pointer-events: none;
          color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
          animation: up-cur 900ms cubic-bezier(.4,.1,.2,1) forwards;
        }
        @keyframes up-cur {
          from { transform: translate(34px, 30px); opacity: 0; }
          40%  { opacity: 1; }
          to   { transform: translate(6px, 6px); opacity: 1; }
        }

        /* select / confirm dialog */
        .up-dialog { animation: ctd-fade 360ms ease; }
        .ud-head { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 10px; letter-spacing: -0.01em; }
        .ud-list { display: flex; flex-direction: column; gap: 6px; }
        .ud-file {
          display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 9px;
          padding: 8px 11px; border-radius: 9px; border: 1px solid var(--d-line); background: rgba(255,255,255,.03);
          transition: border-color 180ms, background 180ms;
        }
        .ud-file.on { border-color: rgba(169,208,236,.5); background: rgba(169,208,236,.1); }
        .ud-file .box {
          width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.3);
          display: grid; place-items: center; color: #10202f; transition: background 160ms, border-color 160ms;
        }
        .ud-file.on .box { background: var(--d-accent); border-color: var(--d-accent); }
        .ud-file .box svg { opacity: 0; transition: opacity 140ms; }
        .ud-file.on .box svg { opacity: 1; }
        .ud-file .fi { color: var(--d-accent); display: grid; place-items: center; }
        .ud-file .fn { font-family: var(--font-sans); font-size: 12.5px; color: #fff; font-weight: 500; }
        .ud-file .fs { font-family: var(--font-sans); font-size: 10.5px; color: rgba(255,255,255,.5); }
        .ud-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
        .ud-count { font-family: var(--font-sans); font-size: 11.5px; color: rgba(255,255,255,.6); }
        .up-confirm {
          margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
          padding: 9px 16px; border-radius: 10px; cursor: pointer; border: none;
          background: var(--d-accent); color: #10202f;
          font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; transition: transform 140ms, opacity 140ms;
        }
        .up-confirm:disabled { opacity: .4; }
        .up-confirm.pressed { transform: scale(.95); }

        /* uploading */
        .up-progress { display: flex; flex-direction: column; gap: 7px; animation: ctd-fade 320ms ease; }
        .up-file {
          display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
          padding: 8px 11px; border-radius: 9px; border: 1px solid var(--d-line); background: rgba(255,255,255,.04);
        }
        .up-file .fi { color: var(--d-accent); display: grid; place-items: center; }
        .up-file .fn { font-family: var(--font-sans); font-size: 12.5px; color: #fff; font-weight: 500; }
        .up-file .fs { font-family: var(--font-sans); font-size: 10.5px; color: rgba(255,255,255,.5); }
        .up-file .bar { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
        .up-file .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--d-accent);
          animation: ctd-up 720ms cubic-bezier(.4,.1,.2,1) forwards; }
        @keyframes ctd-up { to { width: 100%; } }
        .up-note { font-family: var(--font-sans); font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 3px; }

        /* uploaded (collapsed) */
        .up-summary { display: flex; align-items: center; gap: 9px; padding: 12px 14px; }
        .up-summary .ck { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
          background: var(--d-accent); color: #10202f; flex-shrink: 0; }
        .up-summary .tx { font-family: var(--font-sans); font-size: 12.5px; color: #fff; font-weight: 500; }
        .up-summary .mt { margin-left: auto; font-family: var(--font-sans); font-size: 10.5px; color: rgba(255,255,255,.5); }

        /* ── Pipeline console ── */
        .ct-con-body { padding: 13px 14px; }
        .ct-waiting { display: flex; align-items: center; gap: 9px; padding: 8px 4px; font-family: var(--font-sans);
          font-size: 12px; color: rgba(255,255,255,.45); }
        .ct-waiting .dots { display: inline-flex; gap: 4px; }
        .ct-waiting .dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.4);
          animation: ct-wait 1.1s ease-in-out infinite; }
        .ct-waiting .dots i:nth-child(2) { animation-delay: .15s; }
        .ct-waiting .dots i:nth-child(3) { animation-delay: .3s; }
        @keyframes ct-wait { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

        .ct-ingested { display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
          padding: 8px 11px; border-radius: 9px; border: 1px solid var(--d-line);
          background: rgba(255,255,255,.04); animation: ctd-fade 380ms ease; }
        .ct-ingested .ck { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
          background: var(--d-accent); color: #10202f; flex-shrink: 0; }
        .ct-ingested .tx { font-family: var(--font-sans); font-size: 12.5px; color: #fff; font-weight: 500; }
        .ct-ingested .mt { margin-left: auto; font-family: var(--font-sans); font-size: 10.5px; color: rgba(255,255,255,.5); }

        .ct-run { display: grid; grid-template-columns: 190px 1fr; gap: 0; }
        .ct-run .ct-main { padding-right: 14px; }
        .ct-results { padding-left: 15px; border-left: 1px solid var(--d-line); min-height: 150px;
          opacity: 0; transform: translateX(10px); animation: ctd-slidein 460ms cubic-bezier(.2,.7,.3,1) 120ms forwards; }
        @keyframes ctd-slidein { to { opacity: 1; transform: none; } }

        .ct-art { animation: ctd-fade 420ms ease; }
        .art-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
        .art-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
        .art-tag { margin-left: auto; font-family: var(--font-sans); font-size: 10px; font-weight: 600;
          letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,.48); white-space: nowrap; }

        .art-chron { display: flex; flex-direction: column; }
        .art-chron .cr { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline;
          padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); opacity: 0; animation: ctd-fade 380ms ease forwards; }
        .art-chron .cr:first-child { border-top: none; }
        .art-chron .cd { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--d-accent); }
        .art-chron .ce { font-size: 12.5px; color: rgba(255,246,235,.88); line-height: 1.35; }
        .art-chron .cs { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.5); white-space: nowrap; }

        .art-find { display: flex; flex-direction: column; margin-bottom: 12px; }
        .art-find .fr { display: grid; grid-template-columns: 8px 74px 1fr; gap: 9px; align-items: baseline;
          padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); opacity: 0; animation: ctd-fade 380ms ease forwards; }
        .art-find .fr:first-child { border-top: none; }
        .art-find .sev { width: 7px; height: 7px; border-radius: 999px; align-self: center; }
        .art-find .sev.warn { background: #e8b06a; }
        .art-find .sev.ok { background: #86c58f; }
        .art-find .sev.key { background: var(--d-accent); }
        .art-find .fd { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: #fff; }
        .art-find .ff { font-size: 12px; color: rgba(255,246,235,.82); line-height: 1.38; }
        .art-risk { display: flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 11.5px; color: rgba(255,255,255,.62); }
        .art-risk b { color: #e8b06a; font-weight: 700; }
        .art-risk .rmeter { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
        .art-risk .rmeter i { display: block; height: 100%; border-radius: 999px;
          background: linear-gradient(90deg, #86c58f, #e8b06a); animation: ctd-grow 700ms cubic-bezier(.4,.1,.2,1) forwards; }
        @keyframes ctd-grow { from { width: 0 !important; } }

        .art-draft { border-radius: 10px; border: 1px solid var(--d-line); background: rgba(255,255,255,.03);
          padding: 11px 12px; margin-bottom: 11px; }
        .art-draft .dp { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: rgba(255,246,235,.86); }
        .art-draft .dp:last-child { margin-bottom: 0; }
        .art-draft b { color: #fff; font-weight: 600; }
        .art-draft .pin { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
          color: var(--d-accent); background: rgba(169,208,236,.16); border: 1px solid rgba(169,208,236,.4);
          border-radius: 4px; padding: 0 4px; }
        .art-draft .more { color: rgba(255,255,255,.42); font-style: italic; font-size: 11px; }

        /* stepper */
        .ct-steps { display: flex; flex-direction: column; }
        .ct-step { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
        .ct-step .rail { display: flex; flex-direction: column; align-items: center; }
        .ct-step .node { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
          display: grid; place-items: center; color: rgba(255,255,255,.4);
          border: 1px solid var(--d-line); background: rgba(255,255,255,.04);
          transition: color 200ms, background 200ms, border-color 200ms; }
        .ct-step .line { width: 1.5px; flex: 1; min-height: 8px; margin: 3px 0; background: var(--d-line); transition: background 300ms; }
        .ct-step.done .line, .ct-step.active .line { background: rgba(169,208,236,.5); }
        .ct-step.active .node { color: var(--d-accent); background: rgba(169,208,236,.16); border-color: rgba(169,208,236,.45); }
        .ct-step.done .node { color: #10202f; background: var(--d-accent); border-color: var(--d-accent); }
        .ct-step .spin { width: 13px; height: 13px; border-radius: 999px;
          border: 2px solid rgba(169,208,236,.3); border-top-color: var(--d-accent); animation: ctd-spin 700ms linear infinite; }
        @keyframes ctd-spin { to { transform: rotate(360deg); } }
        .ct-step .lbl { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
          color: rgba(255,255,255,.5); padding-top: 5px; transition: color 200ms; }
        .ct-step.active .lbl, .ct-step.done .lbl { color: #fff; }
        .ct-step.open { cursor: pointer; }
        .ct-step.open:hover .lbl { color: var(--d-accent); }
        .ct-step.viewing .lbl { color: var(--d-accent); }

        .ct-wf { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; animation: ctd-fade 400ms ease; }
        .ct-wf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
          border: 1px solid rgba(169,208,236,.4); background: rgba(169,208,236,.1);
          font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: #fff;
          transition: background 160ms, transform 160ms, border-color 160ms; }
        .ct-wf-chip:hover { transform: translateY(-1px); background: rgba(169,208,236,.2); }
        .ct-wf-chip svg { color: var(--d-accent); }
        .ct-wf-chip.on { background: rgba(134,197,143,.18); border-color: rgba(134,197,143,.55); }
        .ct-wf-chip.on svg { color: #86c58f; }

        @keyframes ctd-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

        @media (prefers-reduced-motion: reduce) {
          .ct-glass { opacity: 1 !important; transform: none !important; }
          .ct-demo-eyebrow .live, .g-bar .b-state.busy .d { animation: none; }
          .up-cursor { animation: none; opacity: 1; transform: translate(6px,6px); }
        }
        @media (max-width: 1040px) { .ct-demo, .ct-demo.wide { max-width: 560px; } }
        @media (max-width: 560px) {
          .ct-run { grid-template-columns: 1fr; }
          .ct-run .ct-main { padding-right: 0; padding-bottom: 12px; }
          .ct-results { padding-left: 0; border-left: none; border-top: 1px solid var(--d-line); padding-top: 13px; }
        }

}