/*  Lock background scroll when any modal is open */
  .code{
    color: black !important;
}
    body:has(.modal:target){
      overflow: hidden;
      touch-action: none; /* prevents iOS rubber-banding while modal open */
    }

    /* Demo page content (safe spacing so CTA doesn't cover it) */
    .demo{
      padding: 24px;
      max-width: 960px;
      margin: 0 auto 120px; /* leave room for fixed CTA */
    }
    .demo h1{ margin: 0 0 8px; }
    .demo p{ color: var(--muted); }

    /* Bottom centered CTA bar */
    .cta-bar{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 24px;
      display: flex;
      gap: 16px;
      justify-content: center;
      padding: 8px;
      z-index: 20; /* lower than modal (which uses 50) */
      pointer-events: auto;
    }
    .btn{
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 28px;
      border-radius: 999px;
      background:red;
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(255,122,60,.35), 0 1px 2px rgba(0,0,0,.08);
      transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
      white-space: nowrap;
      min-width: 220px;
    }
    .btn:hover{ background: var(--brand-dark); transform: translateY(-1px); }
    .btn:active{ transform: translateY(0); }
    .btn:focus-visible{ outline: 0; box-shadow: 0 0 0 3px var(--ring); }

    /* Modal base (CSS-only using :target) */
    .modal{
      position: fixed;
      inset: 0;
      display: none;           /* hidden by default */
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 50;
    }
    .modal:target{ display: flex; }
    .overlay{
      position: absolute;
      inset: 0;
      background: var(--overlay);
    }

    .dialog{
      position: relative;
      background: var(--bg);
      width: min(100%, 1000px);
      max-height: 92dvh;       /*  dvh for mobile browser UI */
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;        /* keep corners clean */
      display: flex;
      isolation: isolate;      /* ensure z-index layering inside */
    }

    /* Left image panel */
    .image-panel{
      flex: 1 1 44%;
      min-width: 280px;
      max-width: 48%;
      position: relative;
      background: #f4f4f5;
    }
    .image-panel img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Right form panel */
    .form-panel{
      flex: 1 1 56%;
      min-width: 320px;
      display: flex;
      flex-direction: column;
      padding: 20px 20px 0; /* bottom space handled by sticky actions */
      gap: 12px;

      /*  Allow inner flex children to shrink so scrolling works */
      min-height: 0;
      overflow: hidden; /* prevent creating a competing scroll container */
    }
    .form-header{
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      flex: 0 0 auto;
    }
    .form-header h2{
      font-size: clamp(20px, 2.5vw, 28px);
      line-height: 1.25;
      margin: 0;
      letter-spacing: -0.01em;
    }
    .close{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #111827;
      text-decoration: none;
      font-size: 20px;
      line-height: 1;
      flex: 0 0 auto;
    }
    .close:hover{ background:#e5e7eb; }
    .close:focus-visible{ outline: 0; box-shadow: 0 0 0 3px var(--ring); }

    /*  Make only the field12s area scrollable; keep submit visible */
    .form-field12s{
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      padding-right: 4px; /* breathing room for scrollbar */
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      min-height: 0; /* allow to shrink on small screens */
    }
    .field12{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .field12 label{
      font-size: 14px;
      font-weight: 600;
    }
    .field12 input, .field12 select, .field12 textarea{
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #e5e7eb;
      background: #fff;
      font: inherit;
    }
    .field12 textarea{ min-height: 96px; resize: vertical; }
    .field12 input:focus-visible,
    .field12 select:focus-visible,
    .field12 textarea:focus-visible{
      outline: 0;
      border-color: var(--ring);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
    }

    .form-actions{
      position: sticky;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 40%, #fff 100%);
      padding: 14px 0 18px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      border-top: 1px solid #f1f5f9;
      flex: 0 0 auto;
    }
    .btn-secondary{
      background: #f3f4f6;
      color: #111827;
      box-shadow: none;
      min-width: 140px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-secondary:hover{ background:#e5e7eb; }
    .btn-secondary:focus-visible{ outline: 0; box-shadow: 0 0 0 3px var(--ring); }

    .btn-primary{
      background: var(--brand);
      color: #fff;
      min-width: 160px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 800;
      text-decoration: none;
      border: 0;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(255,122,60,.35), 0 1px 2px rgba(0,0,0,.08);
    }
    .btn-primary:hover{ background: var(--brand-dark); }
    .btn-primary:focus-visible{ outline: 0; box-shadow: 0 0 0 3px var(--ring); }

    /* Responsive tweaks */
    @media (max-width: 920px){
      .form-field12s{ grid-template-columns: 1fr; }
      .image-panel{ min-width: 40%; }
    }
    @media (max-width: 760px){
      .dialog{
        width: 100%;
        height: 100dvh;     /*  fill the viewport on mobile */
        max-height: none;
        border-radius: 0;
        flex-direction: column; /* image on top, form below */
      }
      .image-panel{
        width: 100%;
        max-width: none;
        min-height: 38dvh;
      }
      .form-panel{
        min-width: 100%;
        padding: 16px 16px 0;
      }
      .cta-bar{
        bottom: 16px;
        gap: 10px;
      }
      .btn{ min-width: 44vw; padding: 12px 18px; }
    }