/* NASCAR Brand Portal — styles.css */
:root{
  --nascar-blue:#005eb8;
  --nascar-blue-dark:#004a9f; /* hover */
  --panel-bg:#ffffff;
  --panel-radius:10px;
  --panel-shadow:0 12px 30px rgba(2,6,23,0.35);
  --muted:#666666;
  --muted-2:#757575;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Helvetica, Arial, sans-serif;background:#0a0a0a}

/* Background */
.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #000;
}
.bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  z-index: 1;
  pointer-events: none;
}

/* Centered panel */
.panel-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px;position:relative;z-index:2}
.panel{width:420px;background:var(--panel-bg);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);padding:40px 36px;display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;z-index:3}
.logo img{height: 34px; width: 200px;}

h1{font-size:24px;margin:8px 0 0;text-align:center}
.lead{font-size:14px;color:var(--muted-2);text-align:center;margin:6px 0 14px}

/* CTA buttons */
.cta{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.btn{display:flex;align-items:center;gap:16px;padding:17px;border-radius:10px;text-decoration:none;transition:all 180ms ease;border:0}
.btn-icon{width:32px;height:32px;flex-shrink:0}
.btn-text strong{display:block;font-size:16px}
.btn-text span{display:block;font-size:13px;color:var(--muted-2);margin-top:5px}
.btn-adobe .btn-text span{color:rgba(255, 255, 255, 0.75)}

/* Adobe button: blue background; on hover, darken */
.btn-adobe{background:var(--nascar-blue);color:white;transition:all 200ms ease}
.btn-adobe:hover, .btn-adobe:focus{background:var(--nascar-blue-dark);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}

/* Internal button: white with border; on hover -> light grey background */
.btn-internal{background:transparent;border:1px solid #cccccc;color:#111;transition:all 200ms ease}
.btn-internal:hover, .btn-internal:focus{background:#f3f4f6;border-color:#bfc4c9;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.05)}

/* Links and help */
.links{width:100%;margin-top:6px;display:flex;flex-direction:column;gap:12px;align-items:center}
.request{font-size:14px;color:var(--muted);text-align:center}
.request a, .help a{color:var(--nascar-blue);text-decoration:underline;font-weight:700}
.help{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--muted)}
.help-icon{width:28px;height:28px;border:1px solid #cfcfcf;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:3px}
.help-icon img{width:14px;height:14px}

/* Responsive */
@media (max-width:520px){
  /* Mobile adjustments (match Figma mobile layout) */
  .panel{
    width:100%;
    max-width:100%;
    padding:40px 16px;
    border-radius:8px;
    margin: 8px;
  }

  /* Make the background cover but keep panel readable */
  .bg img{object-position:center top}

  /* Logo and heading adjustments */
  .logo img{height: 25.61px; width: 150px; display:block;}
  h1{font-size:20px;margin:6px 0 0}
  .lead{font-size:13px;margin:6px 0 12px}

  /* CTAs stack and become more compact on mobile */
  .cta{gap:12px;margin-top:6px}
  .btn{gap:12px;padding:12px;border-radius:8px}
  .btn-icon{width:24px;height:24px}
  .btn-text strong{font-size:14px}
  .btn-text span{font-size:12px}

  /* Links and help - compact and centered */
  .links{align-items:center;gap:10px;margin-top:8px}
  .request{font-size:14px;text-align:center}
  .help{justify-content:center}
  .help-icon{width:26px;height:26px}
}