/* Global */
body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Roboto", sans-serif;
  color: var(--brand-dark);
  background: #fff;
}

/* Form */
.text-login{
  width:25%
}

/* Buttons */
.btn-primary{
  background-color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #111;
}

.btn-login{
  background-color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: #111;
  width:20%
}
.btn-primary:hover, .btn-primary:focus{
  filter: brightness(0.95);
}

/* Features list */
.features{
  list-style: none;
  padding-left: 0;
}
.features li{
  margin-bottom: 0.5rem;
  padding-left: 0.9rem;
  position: relative;
}
.features li::before{
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--brand-yellow);
  font-weight: 700;
}

/* Demo card */
.demo-card{
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: none;
}

/* Spec photos: ensure fixed visual size */
.spec-photo{
  width: 100%;
  height: auto;
  max-width: 256px;
  max-height: 256px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Plans table */
.table thead th{
  background: rgba(0,0,0,0.03);
}

/* Footer */
footer{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}

/* Responsive tweaks */
/* On very small screens, stack header elements vertically and make login inputs full width */
@media (max-width: 767.98px){
  .login-form .form-control{
    width: 50%;
  }
  .login-form .btn{
    width: 50%;
    background-color: var(--brand-cyan);
    border-color: var(--brand-cyan);
    color: #111;
  }
  .site-header .d-flex.flex-column.flex-md-row{
    gap: 12px;
  }
  .brand { font-size: 1.1rem; }
  .display-6 { font-size: 1.5rem; }
}

/* Accessibility: focus states */
a:focus, button:focus, input:focus{
  outline: 3px solid rgba(255,211,23,0.25);
  outline-offset: 2px;
}