*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy:  #1A1A2E;
    --gold:  #C9A84C;
    --ivory: #FDFAF4;
    --teal:  #0f9c8f;
    --accordion: #d0721f;
    --muted: #8A8A9A;
    --card:  #212138;
    --gold-lt: rgba(201,168,76,.12);
  }
  html { scroll-behavior: smooth; }
  body { background: var(--navy); color: var(--ivory); font-family: 'Inter', sans-serif; line-height: 1.6; min-height: 100vh; }
  a { color: var(--gold); }

  .topbar { background: var(--gold); color: var(--navy); text-align: center; font-size: .78rem; font-weight: 600; padding: 8px 16px; letter-spacing: .02em; }
  .mini-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; border-bottom: 1px solid rgba(201,168,76,.15); }
  .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .logo-icon { width: 36px; height: 36px; background: var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--navy); }
  .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .logo-name { font-size: .85rem; font-weight: 600; color: var(--ivory); }
  .logo-sub  { font-size: .65rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
  .nav-back { font-size: .8rem; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color .2s; }
  .nav-back:hover { color: var(--ivory); }

  .hero { max-width: 680px; margin: 0 auto; padding: 60px 24px 40px; text-align: center; }
  .tag { display: inline-block; background: var(--gold-lt); border: 1px solid rgba(201,168,76,.3); color: var(--gold); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 22px; }
  .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 600; line-height: 1.15; color: var(--ivory); margin-bottom: 18px; }
  .hero h1 em { font-style: italic; color: var(--gold); }
  .hero-sub { font-size: 1.05rem; color: rgba(253,250,244,.75); max-width: 560px; margin: 0 auto 36px; }

  .kit-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 620px; margin: 0 auto 40px; padding: 0 24px; text-align: left; }
  @media (max-width: 480px) { .kit-items { grid-template-columns: 1fr; } }
  .kit-item { background: var(--card); border: 1px solid rgba(201,168,76,.18); border-radius: 12px; padding: 16px; display: flex; align-items: flex-start; gap: 10px; }
  .kit-item-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
  .kit-item-title { font-size: .82rem; font-weight: 600; color: var(--ivory); margin-bottom: 2px; }
  .kit-item-desc { font-size: .72rem; color: var(--muted); line-height: 1.4; }
  .kit-item.highlight { border-color: rgba(201,168,76,.4); background: rgba(201,168,76,.07); }

  .form-card { background: var(--card); border: 1px solid rgba(201,168,76,.25); border-radius: 18px; padding: 36px 32px; max-width: 480px; margin: 0 auto 32px; text-align: center; }
  @media (max-width: 540px) { .form-card { padding: 28px 20px; } }
  .form-card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; margin-bottom: 6px; }
  .form-card p { font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
  .signup-form { display: flex; flex-direction: column; gap: 12px; }
  .signup-form input[type="email"] { width: 100%; padding: 14px 18px; background: rgba(253,250,244,.06); border: 1.5px solid rgba(201,168,76,.3); border-radius: 10px; color: var(--ivory); font-family: 'Inter', sans-serif; font-size: .95rem; outline: none; transition: border-color .2s; }
  .signup-form input[type="email"]::placeholder { color: var(--muted); }
  .signup-form input[type="email"]:focus { border-color: var(--gold); }
  .btn-submit { width: 100%; padding: 15px 24px; background: var(--gold); color: var(--navy); font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: opacity .2s, transform .15s; letter-spacing: .02em; }
  .btn-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
  .btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
  .fine-print { font-size: .7rem; color: var(--muted); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }

  .social-proof { max-width: 620px; margin: 0 auto 48px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 0 24px; }
  .proof-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: rgba(253,250,244,.65); }
  .proof-icon { color: var(--gold); font-size: .9rem; }

  .info-section { max-width: 640px; margin: 0 auto 48px; padding: 0 24px; }
  .info-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; margin-bottom: 16px; }
  .info-section p { font-size: .92rem; color: rgba(253,250,244,.8); margin-bottom: 14px; }
  .info-section li { font-size: .88rem; color: rgba(253,250,244,.8); margin-bottom: 8px; margin-left: 18px; }

  .author-strip { max-width: 600px; margin: 0 auto 60px; background: var(--card); border: 1px solid rgba(201,168,76,.15); border-radius: 14px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; }
  @media (max-width: 480px) { .author-strip { flex-direction: column; text-align: center; } }
  .author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex-shrink: 0; background: var(--navy); }
  .author-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 3px; }
  .author-bio { font-size: .75rem; color: var(--muted); line-height: 1.5; }

  footer { border-top: 1px solid rgba(201,168,76,.12); text-align: center; padding: 24px 16px; font-size: .72rem; color: var(--muted); }
  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--ivory); }
