/* SlotCuts marketing site — matches the Studio app's "classic
   barber" palette: champagne cream background with black ink and
   a bronze accent. Sober, warm, easy to read. Same single-file
   no-build CSS as before; only the colour tokens (and a few
   shadows tuned for a light theme) changed.

   Layout: mobile-first; tablet/desktop kicks in at 720px.
*/

:root {
  /* "Botanical apothecary" palette — warm ivory canvas, deep
     forest brand colour, coral accent for the moments that matter
     (eyebrows, link hovers, badges). Sober enough to feel premium,
     saturated enough to feel alive. Tested for AA contrast on
     every text/background pair below.

     Page-level surfaces — three steps of ivory so cards lift
     off the page without needing shadows. */
  --bg:        #f7f3e7;          /* warm ivory — page background */
  --bg-elev:   #fdfbf2;           /* almost-white — card surface */
  --bg-soft:   #ece6d2;           /* slightly deeper — input fields */
  --border:    #d8d0b5;           /* soft warm border */
  --border-2:  #bcb088;           /* stronger border on hover */

  /* Type ramp — deep forest headlines to muted sage captions.
     ``--text`` doubles as the primary brand colour: headlines,
     primary buttons, brand mark. Coral stays scarce on purpose. */
  --text:      #1f3a32;          /* deep forest (brand) */
  --muted:     #5a6b5e;          /* muted sage — body / captions */
  --dim:       #9aa39b;          /* very faded — hints */

  /* Coral accent — used for the eyebrow line, link hovers, the
     stepper numbers, focus rings. Kept scarce on purpose so it
     reads as punctuation, not as the brand colour itself. */
  --primary:   #e07856;          /* warm coral */
  --primary-2: #c96850;          /* deeper coral on hover */
  --primary-3: #2d4a3f;          /* deepest forest — button hover */

  /* Status colours retuned for the ivory canvas. */
  --success:   #2e7d32;
  --danger:    #b73a31;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ============== Nav ============== */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  /* Champagne-with-alpha so content scrolling underneath tints
     through, keeping the soft warm feel. */
  background: rgba(247, 243, 231, 0.94);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--text); font-size: 22px; }
.brand-name {
  font-weight: 700; letter-spacing: 0.8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: var(--text);
}
.nav-links { display: none; gap: 24px; }
.nav-links a { color: var(--muted); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: none; }

@media (min-width: 720px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
}

/* ============== Buttons ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700; letter-spacing: 0.3px;
  font-size: 14px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease,
              border-color .15s ease, color .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-primary {
  /* Black-on-champagne primary, with a bronze underline on hover.
     Reads as a confident "main action" without shouting. */
  background: var(--text); color: var(--bg);
}
.btn-primary:hover {
  background: var(--primary-3);
}
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ============== Hero — full-bleed video ==============
   The hero is now a poster-style banner: the demo video stretches
   edge-to-edge, a dark gradient scrim sits over it for type
   legibility, and the headline + CTAs are layered on top. We do
   NOT bound the hero to the 1100px content rail — that would leave
   champagne stripes either side and undo the "less whitespace"
   goal. Inner content does respect the 1100px rail. */
.hero-video {
  position: relative;
  width: 100%;
  /* min-height tuned so the headline + CTAs always fit without
     forcing a scroll on a typical laptop, but we don't pin 100vh
     because that screams "landing-page template" — 540px keeps
     it tasteful. */
  min-height: 540px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* Dark fallback colour so if the video 404s the type stays
     readable on the scrim. */
  background: #0a0a0a;
}
.hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Slight de-saturation lets the bronze/cream type pop without
     fighting the video's own colour palette. */
  filter: saturate(0.92) brightness(0.85);
}
/* Scrim — diagonal-darker-left gradient on desktop so the text
   side stays moody, the action side stays bright. On mobile the
   text stacks vertically so we use a top-down gradient instead. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.55) 38%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.15) 100%
  );
}
@media (max-width: 880px) {
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.65) 70%,
      rgba(0,0,0,0.8) 100%
    );
  }
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: 88px 24px 96px;
  color: #fff;
  /* Constrain the text column so the long lines on wide screens
     don't read like a billboard. */
}
@media (min-width: 880px) {
  .hero-content { padding: 120px 32px 130px; max-width: 1100px; }
}
.hero-video .eyebrow {
  /* Coral on the dark scrim — pops against the 60%-black overlay
     and ties straight into the body palette's accent colour, so
     the eye links the hero to the rest of the page. */
  color: var(--primary);
  font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; font-size: 11px; margin-bottom: 14px;
}
.hero-video h1 {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px; line-height: 1.12; margin: 0 0 16px;
  font-weight: 700;
  /* Drop-shadow keeps the type readable when the video's brighter
     frames roll through (the dancing barbers, the close-up cuts). */
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  max-width: 720px;
}
@media (min-width: 880px) { .hero-video h1 { font-size: 60px; } }
.hero-video .lede {
  color: rgba(255,255,255,0.92); font-size: 17px; max-width: 560px;
  margin: 0 0 28px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* The ghost CTA needs a tweak so it reads on the dark hero —
   white-bordered + white text instead of the page's dark version. */
.btn-on-video {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-on-video:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
  color: #fff;
}

/* Sound toggle — small floating pill in the corner of the hero
   video. Champagne-tinted so it reads as a deliberate brand
   element rather than a system control. */
.video-sound {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(247, 243, 231, 0.94);
  color: var(--text); border: 1px solid rgba(255,255,255,0.4);
  font: 700 12px/1 inherit;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.video-sound:hover { background: #fff; }
.video-sound:active { transform: scale(0.95); }

/* ============== Sections ============== */
.section {
  max-width: 1100px; margin: 0 auto;
  /* Tighter vertical rhythm than the original 64px — the hero
     now carries the visual weight, so the body can breathe less. */
  padding: 48px 24px;
}
@media (min-width: 880px) { .section { padding: 64px 24px; } }
/* The first section after the hero needs a smaller top padding
   because the hero already ends with generous breathing room. */
.hero-video + .section { padding-top: 52px; }
@media (min-width: 880px) { .hero-video + .section { padding-top: 64px; } }
/* The "For salons" band breaks the page into chapters with a
   subtle deeper champagne. Stays light so the whole site reads as
   one continuous mood. */
.section-dark {
  background: var(--bg-soft);
  max-width: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-dark .section-sub { color: var(--muted); }
.section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px; margin: 0 0 12px;
}
.section-sub {
  color: var(--muted); font-size: 16px; max-width: 720px;
  margin: 0 0 32px;
}

/* ============== Feature grid ============== */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  /* Subtle shadow so cards lift cleanly off the page. */
  box-shadow: 0 1px 2px rgba(31, 58, 50, 0.06);
}
.feature:hover { border-color: var(--border-2); }
.feature h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 700; }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
.feature-icon { font-size: 26px; margin-bottom: 4px; }

/* ============== Steps (For salons) ============== */
.steps {
  counter-reset: step; list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 14px; max-width: 720px;
}
.steps li {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px 16px 56px;
  position: relative; color: var(--muted);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px; border-radius: 14px;
  background: var(--text); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.steps li strong { color: var(--text); }

/* ============== Form ============== */
.form {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  max-width: 880px;
  box-shadow: 0 2px 8px rgba(31, 58, 50, 0.08);
}
.form-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: span 2; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
}
/* Inline "(optional)" tag — quieter than the *  on required
   fields, lowercase so it reads as a hint not a heading. */
.muted-inline {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--dim); font-size: 11px; margin-left: 4px;
}
.field input,
.field textarea {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px; font-size: 15px;
  color: var(--text); font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:focus,
.field textarea:focus {
  outline: none; border-color: var(--primary);
  background: #f3eed8;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input[type="file"] {
  background: transparent; border: none; padding: 0; color: var(--muted);
  font-size: 13px;
}
.field-hint { font-size: 11px; color: var(--dim); }

.form button[type="submit"] { margin-top: 22px; }
.form-msg {
  margin-top: 14px; font-size: 14px; min-height: 20px;
}
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--danger); }

/* ============== Footer ============== */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px; margin-top: 40px;
  color: var(--muted); font-size: 13px;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.footer .brand-mark { font-size: 24px; color: var(--text); }
.footer-line { letter-spacing: 0.5px; }
.footer-links a { margin: 0 6px; }
.footer-links a:hover { color: var(--primary); }