:root{
      --ink:#111;
      --muted:#666;
      --accent:#000;           /* strong black like the keylines in the artwork */
      --brand:#111;            /* for headings */
      --panel:#f2f2f2;         /* soft grey panel behind copy */
    }

    body {
      background-color: #f8f9fa;
    }

    /* Logo */
    .logo img {
      max-width: 220px;
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }

    /* Banner */
    .banner img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      margin-bottom: 30px;
    }

    /* Form */
    .form-container {
      max-width: 500px;
      width: 100%;
      background: #fff;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      margin: 0 auto 50px auto; /* center horizontally, add bottom spacing */
    }

    .upload-box {
      border: 2px dashed #ccc;
      border-radius: 8px;
      text-align: center;
      padding: 30px;
      cursor: pointer;
      color: #666;
      transition: border-color 0.3s;
    }

    .upload-box:hover {
      border-color: #000;
    }

    /* Checkbox center */
    .form-check {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .form-check-label {
      margin-left: 8px;
    }



 

    /* Tagline */
    .tagline{
      font-size:1.05rem;
     
      text-align:center;
    }

    /* COPY PANEL */
    .copy{
      background: var(--panel);
      padding: 48px 28px;
      text-align: center;
      border-radius: 12px;
    }
    .eyebrow{
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight:600;
      color:var(--muted);
      margin-bottom: 10px;
    }
    h1,h2,h3{ color: var(--brand); }
    .lead-strong{
      font-weight:800;
      font-size:1.15rem;
      text-transform:uppercase;
    }
    .lead-muted{
      color:var(--muted);
      font-weight:600;
      margin: 8px 0 18px;
    }
    .amount{ font-weight:800; }

   

    /* Logo */
    .logo {
      background-color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
    
   
    }
    .logo img {
      max-width: 220px;
      width: 100%;
      height: auto;
    }

    /* Banner */
    .banner img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      
    }

    /* Upload (kept if needed later) */
    .upload-box {
      border: 2px dashed #ccc;
      border-radius: 8px;
      text-align: center;
      padding: 30px;
      cursor: pointer;
      color: #666;
      transition: border-color 0.3s;
    }
    .upload-box:hover { border-color: #000; }

    /* Checkbox center */
    .form-check {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .form-check-label { margin-left: 8px; }

    /* Voucher block */
    .redeem{
      margin: 28px auto 12px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .code-wrap{
      display:inline-block;
      background:#111;
      color:#fff;
      padding: 12px 22px;
      border-radius: 8px;
      font-weight:800;
      letter-spacing:.08em;
      margin-top:8px;
    }

    /* Looks Salon wordmark size (MADE SMALLER) */
    .looks-logo{
      max-width: 180px;   /* desktop size */
      width: 100%;
      height: auto;
      margin: 8px auto 0;
      display: block;
    }
    @media (max-width: 576px){
      .looks-logo{ max-width: 140px; } /* mobile size */
    }

    /* Footer strip image fit */
    .footer img{
      width: 100%;
      height: auto;
      display: block;
      margin-top: 16px;
     
    }