:root {
  color-scheme: light;
  --ink:       #0e0b0b;
  --ivory:     #f5f0e8;
  --ivory-mid: #ede8df;
  --mist:      #e8e4dc;
  --gold:      #c9a84c;
  --gold-logo: #a8842c;
  --gold-lt:   #e8d4a0;
  --rose:      #b05060;
  --rose-lt:   #d4828f;
  --deep:      #1a1210;
  --deep2:     #2e1e18;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
img { max-width: 100%; display: block; }
section { padding: 5.5rem 8rem; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; }
em { font-style: italic; }
/* Numerals are set in Outfit site-wide (it avoids the serif 1/I ambiguity). */
.num { font-family: 'Outfit', sans-serif; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── NAV ── */
nav {
  position: fixed; top: var(--rd-dev-banner-h); left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 3.2rem;
  background: rgba(245,240,232,0.94);
  border-bottom: 1px solid rgba(201,168,76,0.18);
}
@supports (backdrop-filter: blur(1px)) {
  nav { background: rgba(245,240,232,0.86); backdrop-filter: blur(14px); }
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
}
.logo span { color: var(--gold-logo); }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 1.7rem; }
.nav-menu a {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(14,11,11,0.65); text-decoration: none; transition: color 0.2s;
  white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit;
}
.nav-menu a:hover { color: var(--ink); }
.nav-cta-btn {
  background: var(--ink) !important; color: var(--ivory) !important;
  padding: 0.65rem 1.5rem; border-radius: 999px;
  font-weight: 400 !important;
}
.nav-cta-btn:hover { background: var(--rose) !important; color: var(--ivory) !important; }
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 6px;
}
.hamburger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO (centered, no photo — brevity over spectacle) ── */
.hero {
  min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 9rem 2rem 4rem; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: 8%; left: 50%; width: 44rem; height: 44rem;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0) 68%);
}
.hero > * { position: relative; z-index: 1; }
/* Section eyebrows: one consistent style everywhere -- a single gold line on
   the left, no pulse dot. Centered by default; left-aligned in the dark
   How It Works and closing-CTA sections, matching their left headers. */
.eyebrow, .stack-label, .how-label, .pricing-label, .privacy-label {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-logo); margin-bottom: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.eyebrow::before, .stack-label::before, .how-label::before,
.pricing-label::before, .privacy-label::before {
  content: ''; width: 1.8rem; height: 1px; background: var(--gold); flex-shrink: 0;
}
.how-label, .final-cta .eyebrow { color: var(--gold); justify-content: flex-start; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

h1 {
  font-size: clamp(2.7rem, 5.4vw, 4.6rem); font-weight: 300; line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.1rem; max-width: 18ch;
  animation: fadeUp 0.8s ease 0.05s both;
}
h1 em { color: var(--rose); }
.hero-sub {
  font-size: 1.05rem; line-height: 1.6; color: rgba(14,11,11,0.68);
  max-width: 36ch; margin-bottom: 2.4rem; animation: fadeUp 0.8s ease 0.18s both;
}

/* ── CLAIM FIELD ── */
.claim { max-width: 27rem; width: 100%; animation: fadeUp 0.8s ease 0.32s both; }
.claim-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14,11,11,0.65); margin-bottom: 0.8rem; }
.hero .claim-label { text-align: left; }
/* The reveal is a distinct utility face (Outfit) from the serif headline —
   it is being read as a literal URL, not a display line. */
.claim-reveal { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; margin-bottom: 0.9rem; text-align: left; }
.claim-reveal-dim { color: rgba(14,11,11,0.32); }
.claim-reveal-fill { color: var(--rose); }
.claim-row {
  display: flex; align-items: stretch; border: 1.5px solid rgba(14,11,11,0.15);
  border-radius: 16px; background: #fffdf9; transition: border-color 0.2s, box-shadow 0.2s;
}
.claim-row.pulse-hl { animation: rowPulse 1.1s ease; }
@keyframes rowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); } 30% { box-shadow: 0 0 0 6px rgba(201,168,76,0.22); } }
.claim-row:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,76,0.16); }
.claim-prefix { display: flex; align-items: center; padding: 0 0 0 1.2rem; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.05rem; color: rgba(14,11,11,0.3); user-select: none; }
.claim-row input { flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; padding: 1.1rem 0.5rem; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.claim-row input::placeholder { color: rgba(14,11,11,0.28); }
.claim-btn { flex: 0 0 auto; border: none; cursor: pointer; background: var(--gold); color: var(--deep); padding: 0 1.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.3rem; transition: background 0.15s; }
.claim-btn:hover:not(:disabled) { background: var(--rose); color: var(--ivory); }
.claim-btn:disabled { background: rgba(14,11,11,0.3); color: var(--ivory); cursor: default; }
.claim-msg { min-height: 1.2rem; margin-top: 0.55rem; font-size: 0.79rem; color: rgba(14,11,11,0.6); text-align: left; }
.claim-msg.ok { color: #4a7a5c; }
.claim-msg.taken { color: var(--rose); }
.claim-note { margin-top: 0.85rem; font-size: 0.78rem; line-height: 1.5; color: rgba(14,11,11,0.6); text-align: left; }
.claim--dark .claim-label { color: rgba(245,240,232,0.72); }
.claim--dark .claim-reveal-dim { color: rgba(245,240,232,0.35); }
.claim--dark .claim-reveal-fill { color: var(--rose-lt); }
.claim--dark .claim-row { background: rgba(245,240,232,0.07); border-color: rgba(245,240,232,0.18); }
.claim--dark .claim-prefix { color: rgba(245,240,232,0.45); }
.claim--dark .claim-row input { color: var(--ivory); }
.claim--dark .claim-row input::placeholder { color: rgba(245,240,232,0.4); }
.claim--dark .claim-btn { background: var(--gold); color: var(--deep); }
.claim--dark .claim-btn:hover:not(:disabled) { background: var(--rose-lt); color: var(--ivory); }
.claim--dark .claim-msg { color: rgba(245,240,232,0.6); }
.claim--dark .claim-msg.ok { color: #9ccbaa; }
.claim--dark .claim-msg.taken { color: #f0a0a8; }
.claim--dark .claim-note { color: rgba(245,240,232,0.62); }

/* Signed-in visitors get a link to their dashboard instead of a field they
   have already used. */
.claim-signedin {
  display: inline-block;
  background: var(--ink); color: var(--ivory);
  padding: 1rem 2rem; border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: background 0.2s;
}
.claim-signedin:hover { background: var(--rose); }
.claim--dark .claim-signedin { background: var(--gold); color: var(--deep); }
.claim--dark .claim-signedin:hover { background: var(--rose-lt); color: var(--ivory); }

/* ── PRICING (directly under the hero CTA) ── */
.pricing { background: var(--ivory-mid); }
.pricing h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; margin-bottom: 2.6rem; text-align: center; }
.pricing h2 em { color: var(--rose); }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 46rem; margin: 0 auto; }
.plan-card { border: 1px solid rgba(14,11,11,0.14); border-radius: 20px; padding: 1.9rem 1.8rem; background: var(--ivory); display: flex; flex-direction: column; }
.plan-card.pro { border-color: var(--gold); background: linear-gradient(165deg, #fffdf7, var(--ivory)); box-shadow: 0 20px 44px rgba(201,168,76,0.14); }
.plan-name { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; margin-bottom: 0.9rem; }
.plan-price { font-family: 'Outfit', sans-serif; font-size: 1.9rem; font-weight: 500; margin-bottom: 0.15rem; }
.plan-price span { font-size: 0.85rem; font-weight: 400; color: rgba(14,11,11,0.55); }
.plan-billed { font-size: 0.76rem; color: rgba(14,11,11,0.5); margin-bottom: 1.3rem; }
.plan-more { flex: 1 1 auto; margin-bottom: 1.3rem; }
.plan-more summary {
  list-style: none; cursor: pointer;
  font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more[open] summary { margin-bottom: 0.9rem; }
.plan-feats { list-style: none; }
.plan-feats li { font-size: 0.83rem; line-height: 1.65; color: rgba(14,11,11,0.72); padding-left: 1.3rem; position: relative; }
.plan-feats li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold-logo); font-size: 0.78rem; }
.plan-feats li.key { color: var(--ink); font-weight: 500; }
.plan-cta { display: inline-block; text-align: center; text-decoration: none; border-radius: 999px; padding: 0.8rem 1.4rem; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border: none; font-family: inherit; }
.plan-card:not(.pro) .plan-cta { background: rgba(14,11,11,0.06); color: var(--ink); }
.plan-card:not(.pro) .plan-cta:hover { background: rgba(14,11,11,0.1); }
.plan-card.pro .plan-cta { background: var(--ink); color: var(--ivory); }
.plan-card.pro .plan-cta:hover { background: var(--rose); }
.pricing-trust { text-align: center; margin-top: 2.2rem; font-size: 0.8rem; color: rgba(14,11,11,0.55); }

/* ── PORTFOLIO BOXES (what a link holds) ── */
.stack-section { background: var(--ivory); }
.stack-head { max-width: 34rem; margin: 0 auto 2.8rem; text-align: center; }
.stack-head h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.15; }
.stack-head h2 em { color: var(--rose); }

.stack { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.85rem; }
.stack-card {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--ivory-mid); border: 1px solid rgba(14,11,11,0.1);
  border-radius: 999px; padding: 0.95rem 1.6rem;
  opacity: 0; transform: translateY(14px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.stack-card.in { animation: cardIn 0.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.stack-card:hover { border-color: var(--rose); box-shadow: 0 14px 28px rgba(14,11,11,0.09); background: #fff; }
.stack-num { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.72rem; color: var(--gold-logo); flex-shrink: 0; width: 1.6rem; }
.stack-body { flex: 1 1 auto; min-width: 0; }
.stack-body h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.stack-body p { font-size: 0.8rem; line-height: 1.4; color: rgba(14,11,11,0.55); }

/* Proof card: the "See Allison's Portfolio" label and her photo travel
   together as one unit, the label bold and above the image. */
.examples-section { background: var(--ivory-mid); }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; max-width: 52rem; margin: 0 auto; align-items: start; }
.proof-card {
  display: block; text-decoration: none;
  background: var(--ink); border-radius: 20px; padding: 1.3rem 1.3rem 0.85rem; overflow: hidden;
  opacity: 0; transform: translateY(14px);
}
.proof-card.in { animation: cardIn 0.6s cubic-bezier(.2,.8,.3,1) forwards; }
.proof-card:hover .proof-photo img { transform: scale(1.03); }
.proof-label { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.1rem; }
.proof-label b { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; color: var(--ivory); }
.proof-label span { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: var(--deep); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.proof-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; }
.proof-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 0.4s ease; }
.proof-badge {
  display: block; text-align: right;
  color: rgba(245,240,232,0.5); font-family: 'Outfit', sans-serif; font-size: 0.72rem;
  padding: 0.55rem 0 0; white-space: nowrap;
}
/* Marquee clones (added by JS on mobile) are hidden everywhere except the
   mobile auto-scroll loop, so the desktop 3-up grid still shows only 3. */
.proof-card--clone { display: none; }

/* ── HOW IT WORKS (dark, directly below the portfolio boxes) ── */
.how { background: var(--deep); }
.how h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 400; color: #fff; line-height: 1.15; margin-bottom: 3rem; max-width: 24ch; }
.how h2 em { color: var(--rose-lt); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 1.5rem; left: 16.66%; right: 16.66%; height: 1px; background: rgba(201,168,76,0.2); }
.step { padding-right: 2.5rem; text-align: center; }
.step:last-child { padding-right: 0; }
.step-dot { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(201,168,76,0.3); background: var(--deep); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--gold); font-size: 0.85rem; margin: 0 auto 1rem; position: relative; z-index: 1; }
.step h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: var(--ivory); margin-bottom: 0.4rem; }
.step p { font-size: 0.85rem; line-height: 1.55; color: rgba(245,240,232,0.72); }
.how-note { text-align: center; margin-top: 2.8rem; font-size: 0.95rem; line-height: 1.6; color: rgba(245,240,232,0.72); max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ── PRIVACY (collapsed by default) ── */
.privacy { background: var(--ivory-mid); text-align: center; }
.privacy h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; margin-bottom: 0.9rem; }
.privacy h2 em { color: var(--rose); }
.privacy-brief { font-size: 0.98rem; line-height: 1.6; color: rgba(14,11,11,0.68); max-width: 40ch; margin: 0 auto; }
.privacy-more { margin-top: 1.6rem; text-align: left; max-width: 42rem; margin-left: auto; margin-right: auto; }
.privacy-more summary {
  list-style: none; cursor: pointer; text-align: center;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.privacy-more summary::-webkit-details-marker { display: none; }
.privacy-more[open] summary { margin-bottom: 1.6rem; }
.privacy-grid { list-style: none; }
.privacy-grid li { padding: 0.9rem 0 0.9rem 1.7rem; border-bottom: 1px solid rgba(14,11,11,0.1); font-size: 0.9rem; line-height: 1.55; color: rgba(14,11,11,0.75); position: relative; }
.privacy-grid li:last-child { border-bottom: none; }
.privacy-grid li::before { content: '\2713'; position: absolute; left: 0; top: 0.9rem; color: var(--gold-logo); font-size: 0.8rem; }
.privacy-grid strong { color: var(--ink); font-weight: 500; }

/* ── CLOSING CTA ── */
.final-cta { background: var(--deep); text-align: left; }
.final-cta h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); font-weight: 300; color: var(--ivory); line-height: 1.1; margin-bottom: 1.1rem; max-width: 20ch; }
.final-cta h2 em { color: var(--rose-lt); }
.final-cta .sub { font-size: 0.95rem; line-height: 1.6; color: rgba(245,240,232,0.65); max-width: 36ch; margin-bottom: 2.2rem; }

/* ── FOOTER ── */
footer {
  background: var(--deep);
  border-top: 1px solid rgba(245,240,232,0.12);
  padding: 2.3rem 3.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.foot-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--ivory); text-decoration: none; letter-spacing: 0.02em;
}
.foot-logo span { color: rgba(201,168,76,0.85); }
footer p { font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(245,240,232,0.45); }
footer nav { position: static; padding: 0; background: none; border: none; backdrop-filter: none; display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; }
footer nav a {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,240,232,0.45); text-decoration: none; transition: color 0.2s;
}
footer nav a:hover { color: rgba(245,240,232,0.6); }

/* Visually hidden but read by screen readers. The claim inputs carry a
   visible prefix rather than a label, so the label has to live here. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  section { padding: 4rem 1.6rem; }
  nav { padding: 1.1rem 1.6rem; }
  .hero { padding: 8.5rem 1.6rem 3.5rem; min-height: auto; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(245,240,232,0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201,168,76,0.18);
    box-shadow: 0 20px 40px rgba(14,11,11,0.1);
    max-height: 0; height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    gap: 0;
  }
  .nav-menu.open { max-height: 400px; height: auto; }
  .nav-menu:not(.open) { pointer-events: none; height: 0; }
  .nav-menu li { width: 100%; }
  .nav-menu li a {
    display: block; padding: 1rem 1.8rem;
    border-bottom: 1px solid rgba(201,168,76,0.1);
    font-size: 0.8rem !important;
    color: var(--ink) !important;
    background: none !important; border-radius: 0 !important;
    letter-spacing: 0.1em;
  }
  .nav-menu li:last-child a { border-bottom: none; }
  .hamburger { display: flex; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .steps::before { display: none; }
  .step { padding-right: 0; }
  .plan-cards { grid-template-columns: 1fr; }
  footer { padding: 2rem 2rem; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
@media (max-width: 600px) {
  h1 { font-size: 2.4rem; }
  .hero { padding: 9rem 1.5rem 3.5rem; }
  .stack-card { padding: 0.85rem 1.2rem; border-radius: 20px; }
  /* Fallback (no JS / reduced-motion): swipeable carousel with a peek of the
     next card. JS upgrades this to the marquee below by adding .is-marquee. */
  .proof-row {
    display: flex; gap: 0.7rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .proof-row::-webkit-scrollbar { display: none; }
  .proof-card { flex: 0 0 85%; scroll-snap-align: center; scroll-snap-stop: always; opacity: 1; transform: none; }

  /* Auto-scrolling marquee that is also swipeable. The row stays a native
     horizontal scroller (inherits overflow-x/-webkit-overflow-scrolling from
     the fallback above) so a finger drags or flings it like a normal
     carousel; the marquee JS nudges scrollLeft each frame for the idle drift
     and wraps within the x3 cloned set. Snap is off so the drift is smooth,
     and each card owns its trailing gap via margin-right (not flex gap) so
     the copies are exactly equal width and the wrap is seamless. */
  .proof-viewport.is-marquee .proof-row { gap: 0; scroll-snap-type: none; scroll-behavior: auto; }
  .proof-viewport.is-marquee .proof-card {
    flex: 0 0 auto; width: 78vw; margin-right: 0.7rem; scroll-snap-align: none;
  }
  .proof-viewport.is-marquee .proof-card--clone { display: block; }
}