/* ============================================
     USE CASES LANDING — page-specific styles
     Type rules: Titillium Web only, 16px+ on all text,
     white or lime only — no gray.
  ============================================ */

  /* ── HERO ──
     Uses the shared .uc-hero-wrap + .uc-bp-pxbg + .uc-bp-vignette pattern
     from use-case.css/use-case.js (the alert triage page's animated
     pixel cascade auto-binds to .uc-hero-wrap > .uc-bp-pxbg). */
  .ucl-hero{
    position:relative;
    padding:160px clamp(32px,5vw,96px) 96px;
    border-bottom:1px solid var(--color-line);
    background:transparent;
    z-index:3;
  }
  .ucl-hero-inner{
    position:relative; z-index:2;
    max-width:1280px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .uc-crumbs{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--color-ink);
    margin-bottom:clamp(28px,3.5vw,48px);
  }
  .uc-crumbs a{ color:var(--color-ink); text-decoration:none; transition:color .2s; }
  .uc-crumbs a:hover{ color:var(--color-acc); }
  .uc-crumbs .sep{ margin:0 12px; color:var(--color-ink); }
  .ucl-eyebrow{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--color-acc);
    margin-bottom:clamp(20px,2.5vw,32px);
    display:inline-flex; align-items:center; gap:12px;
  }
  .ucl-eyebrow::before, .ucl-eyebrow::after{
    content:""; width:28px; height:1px; background:var(--color-acc); opacity:.6;
  }
  .ucl-h1{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(40px,6vw,84px);
    line-height:1.05; letter-spacing:-0.02em;
    color:var(--color-ink);
    margin:0 0 clamp(40px,5vw,64px);
    max-width:18ch;
  }
  .ucl-h1 em{ font-style:normal; color:var(--color-acc); }

  .ucl-lifecycle-frame{
    position:relative;
    width:100%; max-width:1100px;
    margin:0 auto clamp(40px,5vw,64px);
    padding:clamp(16px,2vw,28px);
    border:1px solid var(--color-line);
    background:rgba(13,20,23,0.55);
  }
  .ucl-lifecycle-frame::before, .ucl-lifecycle-frame::after{
    content:""; position:absolute; width:14px; height:14px;
    border:1px solid var(--color-acc);
  }
  .ucl-lifecycle-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .ucl-lifecycle-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
  .ucl-lifecycle-frame img{ display:block; width:100%; height:auto; }

  .ucl-hero-sub{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(18px,1.5vw,22px);
    line-height:1.5; color:var(--color-ink);
    max-width:62ch; margin:0 auto clamp(24px,3vw,32px);
  }
  .ucl-hero-tag{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--color-ink);
    margin-bottom:clamp(28px,3.5vw,40px);
  }
  .ucl-hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

  /* ── PROBLEM (2-col with image) ── */
  .ucl-section{
    position:relative;
    padding:clamp(80px,10vw,160px) clamp(32px,5vw,96px);
    border-bottom:1px solid var(--color-line);
    z-index:2;
  }
  .ucl-section-inner{ max-width:1280px; margin:0 auto; }
  .ucl-section-eyebrow{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--color-acc);
    margin-bottom:clamp(28px,3vw,40px);
    display:flex; align-items:center; gap:14px;
  }
  .ucl-section-eyebrow::before{ content:""; width:32px; height:1px; background:var(--color-acc); }
  .ucl-problem-twocol{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px); align-items:center;
  }
  .ucl-problem-text h2{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(32px,4vw,52px); line-height:1.12; letter-spacing:-0.015em;
    color:var(--color-ink); margin:0 0 24px;
  }
  .ucl-problem-text h2 em{ font-style:normal; color:var(--color-acc); }
  .ucl-problem-text p{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(16px,1.25vw,18px); line-height:1.6;
    color:var(--color-ink); margin:0 0 16px;
    max-width:48ch;
  }
  .ucl-problem-image{
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .ucl-problem-image img{
    width:100%; height:auto; display:block;
    max-width:100%;
  }

  /* ── "Bricklayer AI fixes that." marquee — BRIGHT LIME bg, BLACK marks ── */
  .ucl-fix-section{
    position:relative;
    background:var(--color-acc);
    color:var(--site-bg-dark, #060b0d);
    overflow:hidden;
    border-bottom:1px solid rgba(0,0,0,0.12);
    border-top:1px solid rgba(0,0,0,0.12);
    z-index:2;
  }
  .ucl-fix-marquee{
    padding:clamp(40px,5vw,72px) 0;
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .ucl-fix-marquee-track{
    display:flex; align-items:center; gap:56px; width:max-content;
    animation:ucl-fix-scroll 38s linear infinite;
  }
  @keyframes ucl-fix-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .ucl-fix-item{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(28px,3.5vw,52px);
    line-height:1; letter-spacing:-0.015em;
    color:var(--site-bg-dark, #060b0d);
    white-space:nowrap;
  }
  .ucl-fix-item em{ font-style:italic; color:var(--site-bg-dark, #060b0d); font-weight:600; }
  .ucl-bl-mark{
    width:auto;
    height:clamp(32px,3.4vw,46px);
    flex:none;
    display:block;
    object-fit:contain;
  }
  .ucl-fix-support{
    padding:0 clamp(32px,5vw,96px) clamp(40px,5vw,72px);
    text-align:center;
  }
  .ucl-fix-support p{
    max-width:62ch; margin:0 auto;
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(16px,1.1vw,17px);
    line-height:1.6;
    color:var(--site-bg-dark, #060b0d);
  }

  /* ── USE CASES — TRUE pinned (stacked sticky rows) ── */
  .ucl-pinned-section{
    position:relative;
    background:var(--color-bg);
    border-bottom:1px solid var(--color-line);
    z-index:2;
  }
  .ucl-pinned-head{
    padding:clamp(112px,12vw,180px) clamp(32px,5vw,96px);
    border-bottom:1px solid var(--color-line);
    max-width:1100px; margin:0 auto;
    background:var(--color-bg);
    position:relative; z-index:5;
    text-align:center;
  }
  .ucl-pinned-head h2{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(36px,4.5vw,64px); line-height:1.05; letter-spacing:-0.02em;
    color:var(--color-ink); margin:0 0 clamp(24px,2.8vw,36px);
  }
  .ucl-pinned-head p{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(16px,1.2vw,18px); line-height:1.55;
    color:var(--color-ink); margin:0 auto;
    max-width:62ch;
  }

  .ucl-pinned-wrap{ position:relative; }
  .ucl-pinned-row{
    position:sticky;
    top:0;
    height:100vh;
    display:grid;
    grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
    background:var(--color-bg);
    border-bottom:1px solid var(--color-line);
    overflow:hidden;
    cursor:pointer;
  }
  /* Whole-card click overlay — user can click anywhere on the row */
  .ucl-pinned-card-link{
    position:absolute; inset:0; z-index:1;
    text-indent:-9999px; /* hide aria-label text visually */
    overflow:hidden;
  }
  .ucl-pinned-card-link:focus-visible{
    outline:2px solid var(--color-acc);
    outline-offset:-4px;
  }
  /* Keep text panel content above the overlay so existing CTA stays clickable */
  .ucl-pinned-text, .ucl-pinned-visual{ position:relative; z-index:2; pointer-events:none; }
  .ucl-pinned-text *, .ucl-pinned-visual *{ pointer-events:auto; }
  /* Subtle hover affordance on the whole row */
  .ucl-pinned-row:hover .ucl-pinned-cta{
    background:var(--color-acc);
    color:var(--site-tertiary, #273e47);
    gap:18px;
  }
  /* TEAL left text panel */
  .ucl-pinned-text{
    padding:clamp(56px,5vw,88px) clamp(32px,4vw,72px);
    display:flex; flex-direction:column; justify-content:space-between;
    border-right:1px solid var(--color-line);
    background:var(--site-tertiary, #273e47);
  }
  .ucl-pinned-eyebrow{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--color-acc);
    display:flex; align-items:center; gap:14px;
    padding-top:8px;
  }
  .ucl-pinned-eyebrow::before{ content:""; width:32px; height:1px; background:var(--color-acc); }
  .ucl-pinned-content{ max-width:42ch; }
  .ucl-pinned-content h3{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(36px,4vw,56px); line-height:1.08; letter-spacing:-0.02em;
    color:var(--color-ink); margin:0 0 20px;
  }
  .ucl-pinned-content p{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(16px,1.1vw,18px); line-height:1.55;
    color:var(--color-ink); margin:0 0 28px;
    max-width:42ch;
  }
  .ucl-pinned-cta{
    position:relative; z-index:3;
    font-family:'Titillium Web', sans-serif;
    font-weight:600; font-size:15px;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--color-acc);
    text-decoration:none;
    background:transparent;
    border:1px solid var(--color-acc);
    padding:16px 26px;
    display:inline-flex; align-items:center; gap:12px;
    align-self:flex-start;
    transition:gap .2s ease, background .2s ease, color .2s ease;
  }
  .ucl-pinned-cta:hover{
    gap:18px;
    background:var(--color-acc);
    color:var(--site-tertiary, #273e47);
  }
  .ucl-pinned-cta .arrow{ font-size:18px; }

  .ucl-pinned-visual{
    position:relative;
    height:100vh;
    padding:clamp(32px,4vw,64px);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 80% at 50% 40%, rgba(213,255,28,0.04), transparent 70%),
      var(--color-bg);
  }
  .ucl-pinned-visual img{
    width:100%; height:100%;
    max-width:100%; max-height:100%;
    object-fit:contain; object-position:center;
    display:block;
  }
  .ucl-pinned-num{
    position:absolute; top:32px; right:32px; z-index:3;
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:clamp(18px,1.5vw,24px);
    color:var(--color-acc);
    letter-spacing:.08em;
  }
  .ucl-pinned-num .total{ color:var(--color-ink); }
  .ucl-pinned-row.is-coming-soon .ucl-pinned-visual img{
    filter:grayscale(0.7) saturate(0.4) brightness(0.6);
  }

  /* ── GET STARTED — 3-up principle grid ── */
  .ucl-start-section{
    padding:clamp(80px,10vw,160px) clamp(32px,5vw,96px);
    border-bottom:1px solid var(--color-line);
    background:var(--color-bg);
    position:relative; z-index:5;
  }
  .ucl-start-cols{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px); align-items:start;
    margin-bottom:clamp(48px,6vw,80px);
  }
  .ucl-start-cols h2{
    font-family:'Titillium Web', sans-serif; font-weight:300;
    font-size:clamp(36px,4.5vw,64px); line-height:1.05; letter-spacing:-0.02em;
    color:var(--color-ink); margin:0;
  }
  .ucl-start-cols h2 em{ font-style:normal; color:var(--color-acc); }
  .ucl-start-cols p{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(16px,1.2vw,18px); line-height:1.55;
    color:var(--color-ink); margin:0;
    max-width:46ch;
  }
  .ucl-start-cols--centered{
    grid-template-columns:1fr;
    text-align:center;
    max-width:860px;
    gap:clamp(20px,3vw,32px);
  }
  .ucl-start-cols--centered p{ max-width:56ch; margin:0 auto; }
  .ucl-principles-grid{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    border:1px solid var(--color-line);
    background:rgba(13,20,23,0.4);
  }
  .ucl-principle{
    padding:clamp(36px,4vw,56px);
    border-right:1px solid var(--color-line);
    display:flex; flex-direction:column; justify-content:space-between;
    min-height:280px;
    position:relative;
  }
  .ucl-principle:last-child{ border-right:none; }
  .ucl-principle .num{
    font-family:'Titillium Web', sans-serif; font-weight:600;
    font-size:16px; letter-spacing:.22em;
    color:var(--color-acc); margin-bottom:32px;
  }
  .ucl-principle h4{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:clamp(22px,1.8vw,28px); line-height:1.2; letter-spacing:-0.01em;
    color:var(--color-ink); margin:0 0 16px;
  }
  .ucl-principle p{
    font-family:'Titillium Web', sans-serif; font-weight:400;
    font-size:16px; line-height:1.55;
    color:var(--color-ink); margin:0;
  }

  /* ── Responsive ── */
  @media (max-width:900px){
    .ucl-problem-twocol{ grid-template-columns:1fr; }
    .ucl-pinned-head{ grid-template-columns:1fr; }
    .ucl-pinned-row{
      grid-template-columns:1fr;
      position:static;
      height:auto;
      min-height:auto;
    }
    .ucl-pinned-text, .ucl-pinned-visual{ height:auto; border-right:none; }
    .ucl-pinned-text{ border-bottom:1px solid var(--color-line); padding:48px 24px; gap:48px; }
    .ucl-pinned-visual{ aspect-ratio:4/3; padding:32px; }
    .ucl-principles-grid{ grid-template-columns:1fr; }
    .ucl-principle{ border-right:none; border-bottom:1px solid var(--color-line); }
    .ucl-principle:last-child{ border-bottom:none; }
    .ucl-start-cols{ grid-template-columns:1fr; }
  }