/* Hilt — marketing landing page
   leather-bound shop journal x analog_digital_bridge */

:root {
  --paper: #F4EDE0;
  --paper-deep: #E8DCC4;
  --ink: #1A1614;
  --ink-soft: #4A413B;
  --ink-mute: #76695F;
  --oxblood: #8B2E1F;
  --oxblood-dark: #6B1F12;
  --iron: #3A3A3A;
  --ember: #E89C3C;
  --ember-glow: #F4B860;
  --rule: #C4B89E;
  --serif: 'Iowan Old Style', 'Palatino', 'Georgia', serif;
  --display: 'Playfair Display', 'Iowan Old Style', 'Georgia', serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background:
    radial-gradient(ellipse at top, rgba(232,156,60,.07), transparent 50%),
    linear-gradient(180deg, #F4EDE0 0%, #EBDFC6 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(150,110,60,.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(140,90,40,.05) 0, transparent 35%);
  pointer-events: none;
  z-index: 0;
}

main { position: relative; z-index: 1; }

a { color: var(--oxblood); }

/* Header */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: rgba(244, 237, 224, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-logo { width: 32px; height: 32px; }

.lp-header nav {
  display: flex; gap: 22px; align-items: center;
}

.lp-header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.lp-header nav a:hover { color: var(--oxblood); }

.cta-link {
  background: var(--oxblood);
  color: var(--paper) !important;
  padding: 8px 16px;
  border-radius: 3px;
  font-weight: 500;
}
.cta-link:hover { background: #A03825; color: var(--paper) !important; }

/* Hero */
.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 72px 28px 64px;
  text-align: center;
  position: relative;
}

.hero-stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--oxblood);
  border: 1px solid var(--oxblood);
  padding: 5px 14px;
  margin-bottom: 32px;
  transform: rotate(-1.2deg);
  border-radius: 2px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero h1 em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 400;
}

.hero-lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  white-space: nowrap;
}

.btn.primary {
  background: var(--oxblood);
  color: var(--paper);
  box-shadow: 0 4px 0 var(--oxblood-dark), 0 10px 24px -8px rgba(139,46,31,.55);
}

.btn.primary:hover { background: #A03825; transform: translateY(-1px); box-shadow: 0 5px 0 var(--oxblood-dark), 0 14px 28px -10px rgba(139,46,31,.6); }

.btn.primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--oxblood-dark);
}

.btn.large { padding: 16px 32px; font-size: 19px; }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-soft);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.hero-note {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}

.hero-anvil {
  margin: 40px auto 0;
  max-width: 240px;
  opacity: 0.7;
}

/* Strip dividers */
.strip-divider {
  display: flex; align-items: center; gap: 16px;
  max-width: 1100px;
  margin: 16px auto;
  padding: 0 28px;
  color: var(--ink-mute);
}

.strip-divider::before,
.strip-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rule);
}

.strip-divider span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Problem section */
.problem {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 28px;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.prob-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--oxblood);
  padding: 26px 24px;
  border-radius: 2px;
}

.prob-card h3 {
  font-family: var(--display);
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.25;
}

.prob-card p {
  color: var(--ink-soft);
  font-size: 16px;
}

/* How section */
.how {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 28px;
  text-align: center;
}

.how > h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 40px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  text-align: left;
  margin-bottom: 44px;
}

.how-card {
  background: var(--paper);
  padding: 28px 24px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  position: relative;
  box-shadow: 0 2px 8px -4px rgba(60,40,20,.15);
}

.how-num {
  font-family: var(--display);
  font-size: 38px;
  color: var(--oxblood);
  opacity: 0.5;
  line-height: 1;
  margin-bottom: 12px;
  font-style: italic;
}

.how-card h3 {
  font-family: var(--display);
  font-size: 21px;
  margin-bottom: 10px;
  color: var(--ink);
}

.how-card p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

.how-cta { margin-top: 16px; }

/* Who section */
.who {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px;
  text-align: center;
}

.who h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 28px;
  color: var(--ink);
}

.who-list {
  list-style: none;
  text-align: left;
  display: inline-block;
  font-size: 17px;
}

.who-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px dashed var(--rule);
  color: var(--ink-soft);
}

.who-list li:last-child { border-bottom: none; }

.who-list li::before {
  content: '⚒';
  position: absolute;
  left: 0;
  color: var(--oxblood);
  font-size: 18px;
}

/* Pricing */
.pricing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 28px;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.tier {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px 28px;
  border-radius: 3px;
  display: flex; flex-direction: column;
  position: relative;
}

.tier h3 {
  font-family: var(--display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
}

.tier-price {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  color: var(--oxblood);
  margin-bottom: 4px;
}

.tier-price span {
  font-size: 18px;
  color: var(--ink-mute);
  font-weight: 400;
}

.tier-line {
  color: var(--ink-mute);
  font-style: italic;
  font-size: 14.5px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--rule);
}

.tier ul {
  list-style: none;
  flex: 1;
}

.tier ul li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.tier ul li::before {
  content: '·';
  position: absolute;
  left: 8px;
  color: var(--oxblood);
  font-size: 22px;
  font-weight: 700;
}

.tier.featured {
  background: linear-gradient(180deg, var(--paper) 0%, #F8F1DF 100%);
  border: 2px solid var(--oxblood);
  transform: translateY(-6px);
  box-shadow: 0 14px 32px -12px rgba(139,46,31,.35);
}

.tier-flag {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--oxblood);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 4px 12px;
  text-transform: uppercase;
  border-radius: 2px;
}

/* Waitlist */
.waitlist {
  max-width: 800px;
  margin: 32px auto 60px;
  padding: 0 28px;
}

.waitlist-card {
  background:
    linear-gradient(135deg, var(--iron) 0%, #2A2A2A 100%);
  color: var(--paper);
  padding: 44px 40px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 22px 48px -16px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}

.waitlist-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, var(--ember) 0%, transparent 40%);
  opacity: 0.12;
  pointer-events: none;
}

.waitlist-card h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 34px);
  color: var(--ember-glow);
  margin-bottom: 12px;
  position: relative;
}

.waitlist-card p {
  color: #D8C9A8;
  margin-bottom: 24px;
  font-size: 17px;
  position: relative;
}

.waitlist-card form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.waitlist-card input[type="email"] {
  flex: 1; min-width: 240px;
  max-width: 340px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  padding: 14px 16px;
  color: var(--paper);
  font-size: 16px;
  font-family: var(--serif);
}

.waitlist-card input[type="email"]::placeholder { color: #B8A98A; }

.waitlist-card input[type="email"]:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(255,255,255,.15);
}

#subscribe-status {
  margin-top: 14px;
  color: var(--ember-glow);
  font-size: 14px;
  position: relative;
}

#subscribe-status.error { color: #FF8472; }

/* Footer */
.lp-footer {
  border-top: 1px solid var(--rule);
  padding: 24px 28px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.lp-footer a { color: var(--oxblood); text-decoration: none; }
.lp-footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .lp-header { padding: 14px 18px; }
  .lp-header nav { gap: 14px; }
  .lp-header nav a:not(.cta-link) { display: none; }
  .tier.featured { transform: none; }
  .hero { padding: 48px 22px 48px; }
}