/* =============================================================================
   THE COCOON CO. — plain HTML / CSS / JS build
   Converted 1:1 from the Tailwind v4 + React source. Colors, spacing, type,
   copy and animation are intended to match the original exactly.
============================================================================= */

/* ---------- Design tokens (from src/index.css :root) ---------- */
:root{
  --ivory: #FFF9F2;
  --blush: #FADADD;
  --soft-pink: #FCEFF1;
  --butter: #FFF2C2;
  --sage: #C7D8C1;
  --charcoal: #6B5148;
  --charcoal-soft: rgba(107, 81, 72, 0.75);
  --charcoal-faint: rgba(107, 81, 72, 0.5);
  --border: rgba(107, 81, 72, 0.14);
  --border-soft: rgba(107, 81, 72, 0.08);

  /* extra tints used across components (arbitrary Tailwind values in source) */
  --pink-swatch: #E8A7AF;
  --blue-swatch: #87A2B8;
  --blush-strong: #FADADD;
  --blue-pale: #CBD9E4;
  --blue-pale-2: #C7D8E8;
  --charcoal-hover: #58413a;
  --sage-2: #9CAF96;
  --sage-3: #C7D8C1;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background-color: var(--ivory);
  color: var(--charcoal);
  font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1; }
h1,h2,h3,h4,h5,h6,p,blockquote,figure{ margin: 0; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection{ background: var(--blush); color: var(--charcoal); }

.font-display{ font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }

/* grain background (unused visually but kept for parity) */
.bg-grain{
  background-image: radial-gradient(rgba(107,81,72,.04) 1px, transparent 0);
  background-size: 24px 24px;
}

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--ivory); }
::-webkit-scrollbar-thumb{ background: #E8D7D2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: #D8C3BD; }

.container{ max-width: 1152px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px){ .container{ padding-inline: 1.5rem; } }
@media (min-width: 1024px){ .container{ padding-inline: 2rem; } }

.icon{ display: inline-block; vertical-align: middle; flex-shrink: 0; }
.br-sm{ display: none; }
@media (min-width: 640px){ .br-sm{ display: inline; } }

/* =============================================================================
   HEADER
============================================================================= */
#site-header{
  position: relative;
  background: var(--ivory);
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px){ #site-header{ padding: 3rem 0 2rem; } }
.header-inner{ max-width: 896px; margin-inline: auto; padding-inline: 1rem; text-align: center; }
#header-logo-link{
  display: inline-block;
  border-radius: 1.5rem;
  padding: .25rem;
  transition: transform .3s;
}
#header-logo-link:hover{ transform: scale(1.02); }
#header-logo-link:focus-visible{ outline: 2px solid var(--charcoal); outline-offset: 2px; }
.header-logo-frame{ position: relative; margin-inline: auto; width: 16rem; }
@media (min-width: 640px){ .header-logo-frame{ width: 18rem; } }
@media (min-width: 768px){ .header-logo-frame{ width: 20rem; } }
@media (min-width: 1024px){ .header-logo-frame{ width: 24rem; } }
.header-logo-frame img{ width: 100%; height: auto; object-fit: contain; border-radius: 1.25rem; }

/* =============================================================================
   HERO
============================================================================= */
#hero{ position: relative; overflow: hidden; padding: 2rem 0 4rem; }
@media (min-width: 640px){ #hero{ padding: 3.5rem 0 6rem; } }
@media (min-width: 1024px){ #hero{ padding: 4rem 0 7rem; } }

.hero-glow-1{
  position: absolute; top: 0; right: -10%; width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,242,194,.4); filter: blur(64px); z-index: -1; pointer-events: none;
}
.hero-glow-2{
  position: absolute; bottom: -10%; left: -10%; width: 450px; height: 450px; border-radius: 50%;
  background: rgba(199,216,193,.3); filter: blur(64px); z-index: -1; pointer-events: none;
}

.hero-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px){ .hero-grid{ grid-template-columns: repeat(12, minmax(0,1fr)); gap: 3rem; } }
.hero-grid > *{ min-width: 0; }
.hero-copy{ text-align: center; }
@media (min-width: 1024px){ .hero-copy{ grid-column: span 7; text-align: left; } }
.hero-copy > * + *{ margin-top: 1.5rem; }

.pill{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem; border-radius: 999px;
  background: var(--soft-pink); border: 1px solid var(--border);
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--charcoal-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

h1.hero-title{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--charcoal); line-height: 1.08;
}
@media (min-width: 640px){ h1.hero-title{ font-size: 3rem; } }
@media (min-width: 1024px){ h1.hero-title{ font-size: 3.75rem; } }
h1.hero-title em{
  font-style: italic; font-weight: 400; color: rgba(107,81,72,.9);
}

.hero-subtitle{ font-size: 1rem; color: rgba(107,81,72,.8); max-width: 36rem; line-height: 1.6; margin-inline: auto; }
@media (min-width: 640px){ .hero-subtitle{ font-size: 1.125rem; } }
@media (min-width: 1024px){ .hero-subtitle{ margin-inline: 0; } }

.compat-note{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem; border-radius: .75rem;
  background: var(--ivory); border: 1px solid var(--border);
  font-size: .75rem; color: rgba(107,81,72,.75);
}
.dot{ width: .5rem; height: .5rem; border-radius: 50%; background: var(--sage-3); display: inline-block; flex-shrink: 0; }

.variant-switcher-label{
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(107,81,72,.7); margin: 0 0 .625rem;
}
.variant-pills{ display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
@media (min-width: 1024px){ .variant-pills{ justify-content: flex-start; } }
.variant-pill{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem; border-radius: 999px; font-size: .75rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--ivory); color: rgba(107,81,72,.7);
  transition: all .2s;
}
.variant-pill:hover{ background: var(--soft-pink); }
.variant-pill.active{ border-color: var(--charcoal); color: var(--charcoal); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.variant-pill.active.pink{ background: var(--blush); }
.variant-pill.active.blue{ background: var(--blue-pale); }
.swatch-dot{ width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); display: inline-block; flex-shrink: 0; }
.variant-pill .check-icon{ display: none; }
.variant-pill.active .check-icon{ display: inline-block; }

.hero-ctas{ display: flex; flex-direction: column; align-items: center; gap: .875rem; padding-top: .25rem; }
@media (min-width: 640px){ .hero-ctas{ flex-direction: row; justify-content: center; } }
@media (min-width: 1024px){ .hero-ctas{ justify-content: flex-start; } }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 500; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .875rem 1.75rem; border-radius: 999px; transition: all .15s; cursor: pointer;
  width: 100%;
}
@media (min-width: 640px){ .btn{ width: auto; } }
.btn:active{ transform: scale(.95); }
.btn-primary{
  background: var(--charcoal); color: var(--ivory);
  box-shadow: 0 10px 15px -3px rgba(107,81,72,.2);
}
.btn-primary:hover{ background: var(--charcoal-hover); }
.btn-ghost{
  background: var(--soft-pink); border: 1px solid var(--border); color: var(--charcoal);
  font-weight: 600; text-align: center;
}
.btn-ghost:hover{ background: var(--blush); }

/* Hero visual card */
.hero-visual{ position: relative; }
@media (min-width: 1024px){ .hero-visual{ grid-column: span 5; } }
.hero-visual-inner{ position: relative; max-width: 24rem; margin-inline: auto; }
@media (min-width: 1024px){ .hero-visual-inner{ max-width: none; } }

.hero-halo{
  position: absolute; inset: -12px; border-radius: 36px; z-index: -1; filter: blur(4px);
  background: linear-gradient(to bottom right, rgba(250,218,221,.5), var(--soft-pink), rgba(255,242,194,.4));
}
.hero-card{
  position: relative; border-radius: 32px; overflow: hidden; background: var(--ivory);
  padding: .875rem; border: 1px solid var(--border);
  box-shadow: 0 25px 50px -12px rgba(107,81,72,.15);
}
@media (min-width: 640px){ .hero-card{ padding: 1rem; } }

.hero-image-frame{ position: relative; aspect-ratio: 1/1; border-radius: 1rem; overflow: hidden; background: var(--soft-pink); }
.hero-image-frame img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05); transition: opacity .7s ease-in-out, transform .7s ease-in-out;
}
.hero-image-frame img.is-active{ opacity: 1; transform: scale(1); z-index: 1; }

.hero-edition-tag{
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  padding: .25rem .75rem; border-radius: 999px; background: rgba(255,249,242,.9);
  backdrop-filter: blur(4px); border: 1px solid var(--border);
  font-size: .75rem; font-weight: 600; color: var(--charcoal); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.zoom-btn{
  position: absolute; z-index: 2; width: 2rem; height: 2rem; border-radius: 999px;
  background: rgba(255,249,242,.9); backdrop-filter: blur(4px); border: 1px solid var(--border);
  color: var(--charcoal); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background-color .15s;
}
.zoom-btn:hover{ background: var(--blush); }
.hero-image-frame .zoom-btn{ bottom: .75rem; right: .75rem; }

.hero-caption{ margin-top: .875rem; padding: .5rem; text-align: center; }
@media (min-width: 1024px){ .hero-caption{ text-align: left; } }
.hero-caption-row{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hero-caption-row h3{
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: var(--charcoal); margin: 0;
}
@media (min-width: 640px){ .hero-caption-row h3{ font-size: 1.25rem; } }
.hero-edition-badge{
  font-size: .75rem; font-weight: 600; color: rgba(107,81,72,.6); background: var(--soft-pink);
  padding: .125rem .625rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap;
}
.hero-caption p{
  margin: .25rem 0 0; font-size: .75rem; color: rgba(107,81,72,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =============================================================================
   SECTION HEADER (shared pattern: pill + heading + subtitle)
============================================================================= */
.section-header{ text-align: center; max-width: 42rem; margin: 0 auto 3.5rem; }
@media (min-width: 640px){ .section-header{ margin-bottom: 4.5rem; } }
.section-header h2{
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 600; color: var(--charcoal); margin: 0;
}
@media (min-width: 640px){ .section-header h2{ font-size: 2.25rem; } }
@media (min-width: 1024px){ .section-header h2{ font-size: 3rem; } }
.section-header p{ margin-top: .875rem; font-size: 1rem; color: rgba(107,81,72,.75); }
@media (min-width: 640px){ .section-header p{ font-size: 1.125rem; } }

/* =============================================================================
   CORE IDEA
============================================================================= */
#idea{ padding: 5rem 0; position: relative; }
@media (min-width: 640px){ #idea{ padding: 7rem 0; } }
.idea-glow{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 100%; max-width: 48rem; height: 400px;
  background: radial-gradient(circle, rgba(252,239,241,.8), transparent 70%);
  filter: blur(40px); z-index: -1; pointer-events: none;
}
.idea-inner{ max-width: 896px; margin-inline: auto; padding-inline: 1rem; text-align: center; }
@media (min-width: 640px){ .idea-inner{ padding-inline: 1.5rem; } }
@media (min-width: 1024px){ .idea-inner{ padding-inline: 2rem; } }
.idea-inner .pill{ margin-bottom: 1.25rem; }
h2.idea-heading{
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--charcoal); line-height: 1.25; margin: 0;
}
@media (min-width: 640px){ h2.idea-heading{ font-size: 2.25rem; } }
@media (min-width: 1024px){ h2.idea-heading{ font-size: 3rem; } }
h2.idea-heading em{
  display: block; text-transform: lowercase; font-style: italic; font-weight: 400;
}
.idea-subtitle{ margin-top: 1.5rem; font-size: 1rem; color: rgba(107,81,72,.8); max-width: 36rem; margin-inline: auto; line-height: 1.6; }
@media (min-width: 640px){ .idea-subtitle{ font-size: 1.125rem; } }

.rhythm-pills{ margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.125rem; color: var(--charcoal); }
@media (min-width: 640px){ .rhythm-pills{ gap: 1rem; font-size: 1.25rem; } }
.rhythm-pill{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem; border-radius: 999px; background: var(--ivory);
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rhythm-dot{ width: .375rem; height: .375rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.idea-punch{ margin-top: 2rem; font-size: 1rem; font-weight: 600; color: var(--charcoal); }
@media (min-width: 640px){ .idea-punch{ font-size: 1.125rem; } }

.thesis-card{
  margin: 2rem auto 0; max-width: 36rem; padding: 1.5rem; border-radius: 1.5rem;
  background: var(--ivory); border: 1px solid var(--border);
  box-shadow: 0 20px 25px -5px rgba(107,81,72,.05); position: relative; overflow: hidden;
}
@media (min-width: 640px){ .thesis-card{ margin-top: 2.5rem; padding: 2rem; } }
.thesis-card p{
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; color: var(--charcoal);
  line-height: 1.6; font-style: italic; margin: 0; position: relative; z-index: 1;
}
@media (min-width: 640px){ .thesis-card p{ font-size: 1.5rem; } }

/* =============================================================================
   FEATURES
============================================================================= */
#features{ padding: 5rem 0; background: rgba(252,239,241,.6); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
@media (min-width: 640px){ #features{ padding: 7rem 0; } }

.features-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 640px){ .features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .features-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px){ .features-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
.features-grid > *{ min-width: 0; }

.feature-card{
  background: var(--ivory); border-radius: 1.5rem; padding: 1rem; border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .3s, border-color .3s, transform .3s;
  display: flex; flex-direction: column; justify-content: space-between;
}
.feature-card:hover{ box-shadow: 0 20px 25px -5px rgba(107,81,72,.15); border-color: rgba(107,81,72,.25); transform: translateY(-6px); }

.feature-img-frame{ position: relative; aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; background: var(--soft-pink); border: 1px solid var(--border); margin-bottom: 1rem; }
.feature-img-frame img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.feature-card:hover .feature-img-frame img{ transform: scale(1.05); }

.feature-num-badge{
  position: absolute; top: .625rem; left: .625rem; background: rgba(255,249,242,.95);
  backdrop-filter: blur(2px); padding: .125rem .625rem; border-radius: 999px; border: 1px solid var(--border);
  font-size: .6875rem; font-weight: 700; color: var(--charcoal); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.feature-img-frame .zoom-btn{
  bottom: .625rem; right: .625rem; width: 1.75rem; height: 1.75rem; opacity: 0; transition: opacity .2s, background-color .15s;
}
.feature-card:hover .feature-img-frame .zoom-btn{ opacity: 1; }

.feature-card h3{ font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .375rem; }
.feature-card p{ font-size: .875rem; color: rgba(107,81,72,.75); line-height: 1.6; margin: 0; }
.feature-tag-footer{
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(107,81,72,.08);
  display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: rgba(107,81,72,.6);
}
.feature-tag-footer .brand{ font-size: .625rem; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; color: rgba(107,81,72,.4); }
.feature-tag-footer .tag{ font-weight: 500; }

/* =============================================================================
   FIRST DROP
============================================================================= */
#first-drop{ padding: 5rem 0; position: relative; overflow: hidden; }
@media (min-width: 640px){ #first-drop{ padding: 7rem 0; } }

.drops-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; }
@media (min-width: 768px){ .drops-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; } }
.drops-grid > *{ min-width: 0; }

.drop-card{
  background: var(--ivory); border-radius: 1.5rem; padding: 1.5rem; border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: all .3s; display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 640px){ .drop-card{ padding: 2rem; } }
.drop-card:hover{ border-color: rgba(107,81,72,.4); box-shadow: 0 4px 6px -1px rgba(107,81,72,.1); }
.drop-card.selected{ border-color: var(--charcoal); box-shadow: 0 20px 25px -5px rgba(107,81,72,.1); outline: 2px solid rgba(107,81,72,.2); outline-offset: 2px; }

.drop-img-frame{ position: relative; aspect-ratio: 1/1; border-radius: 1rem; overflow: hidden; background: var(--soft-pink); border: 1px solid var(--border); margin-bottom: 1.5rem; }
.drop-img-frame img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.drop-card:hover .drop-img-frame img{ transform: scale(1.05); }
.drop-edition-badge{
  position: absolute; top: .875rem; left: .875rem; background: rgba(255,249,242,.95);
  backdrop-filter: blur(2px); padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--border);
  font-size: .75rem; font-weight: 600; color: var(--charcoal); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.drop-swatch{ position: absolute; top: .875rem; right: .875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.drop-img-frame .zoom-btn{ bottom: .875rem; right: .875rem; opacity: .9; }
.drop-img-frame .zoom-btn:hover{ opacity: 1; }

.drop-title-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.drop-card h3{ font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin: 0; }
@media (min-width: 640px){ .drop-card h3{ font-size: 1.875rem; } }
.drop-palette{ font-size: .75rem; color: rgba(107,81,72,.6); margin: .125rem 0 0; font-weight: 500; }
.drop-desc{ font-size: .875rem; color: rgba(107,81,72,.8); line-height: 1.6; margin: 0 0 1.5rem; }

.drop-highlights{ display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.drop-highlight{ display: flex; align-items: center; gap: .625rem; font-size: .75rem; color: rgba(107,81,72,.8); }
.drop-highlight .check-badge{
  width: 1rem; height: 1rem; border-radius: 50%; background: var(--soft-pink); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.drop-actions{ padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: .75rem; }
@media (min-width: 640px){ .drop-actions{ flex-direction: row; } }
.btn-drop-primary{
  width: 100%; padding: .75rem 1.25rem; border-radius: 999px; background: var(--charcoal); color: var(--ivory);
  font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; text-align: center;
  box-shadow: 0 10px 15px -3px rgba(107,81,72,.15); transition: all .15s;
}
@media (min-width: 640px){ .btn-drop-primary{ flex: 1; } }
.btn-drop-primary:hover{ background: var(--charcoal-hover); }
.btn-drop-primary:active{ transform: scale(.95); }
.btn-drop-secondary{
  width: 100%; padding: .75rem 1rem; border-radius: 999px; border: 1px solid rgba(107,81,72,.2);
  background: transparent; color: rgba(107,81,72,.7); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .05em; transition: all .15s;
}
@media (min-width: 640px){ .btn-drop-secondary{ width: auto; } }
.btn-drop-secondary:hover{ border-color: var(--charcoal); }
.btn-drop-secondary.selected{ border-color: var(--charcoal); background: var(--soft-pink); color: var(--charcoal); }

.drop-disclaimer{ margin-top: 3rem; text-align: center; }
.drop-disclaimer p{ font-size: .75rem; color: rgba(107,81,72,.6); max-width: 36rem; margin-inline: auto; line-height: 1.6; }

/* =============================================================================
   WHY SECTION
============================================================================= */
#why{ padding: 5rem 0; background: rgba(252,239,241,.4); position: relative; overflow: hidden; }
@media (min-width: 640px){ #why{ padding: 7rem 0; } }
.why-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px){ .why-grid{ grid-template-columns: repeat(12, minmax(0,1fr)); gap: 3.5rem; } }
.why-grid > *{ min-width: 0; }
.why-photo-col{ position: relative; }
@media (min-width: 1024px){ .why-photo-col{ grid-column: span 5; } }
.why-photo-inner{ position: relative; max-width: 24rem; margin-inline: auto; }
@media (min-width: 1024px){ .why-photo-inner{ max-width: none; } }
.why-halo{
  position: absolute; inset: -10px; border-radius: 32px; z-index: -1; filter: blur(4px);
  background: linear-gradient(to top right, rgba(255,242,194,.6), rgba(250,218,221,.4), rgba(199,216,193,.4));
}
.why-photo-card{
  position: relative; border-radius: 28px; overflow: hidden; background: var(--ivory);
  padding: .75rem; border: 1px solid var(--border); box-shadow: 0 25px 50px -12px rgba(107,81,72,.1);
}
.why-photo-frame{ position: relative; aspect-ratio: 4/5; border-radius: 1rem; overflow: hidden; background: var(--soft-pink); }
.why-photo-frame img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.why-photo-card:hover .why-photo-frame img{ transform: scale(1.05); }
.why-photo-frame .zoom-btn{ bottom: .75rem; right: .75rem; opacity: .9; }
.why-photo-frame .zoom-btn:hover{ opacity: 1; }

.why-copy-col{ text-align: center; }
@media (min-width: 1024px){ .why-copy-col{ grid-column: span 7; text-align: left; } }
.why-copy-col > * + *{ margin-top: 1.5rem; }
.why-copy-col .pill .icon{ color: var(--pink-swatch); }
blockquote.why-heading{
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 600; color: var(--charcoal);
  line-height: 1.25;
}
@media (min-width: 640px){ blockquote.why-heading{ font-size: 2.25rem; } }
@media (min-width: 1024px){ blockquote.why-heading{ font-size: 3rem; } }
.why-moments{ color: rgba(107,81,72,.8); font-size: 1rem; }
@media (min-width: 640px){ .why-moments{ font-size: 1.125rem; } }
.why-moments p{ font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.125rem; color: var(--charcoal); margin-bottom: .5rem; }
.why-moments p:last-child{ margin-bottom: 0; }
@media (min-width: 640px){ .why-moments p{ font-size: 1.25rem; } }
.why-dilemma{ font-size: 1.125rem; font-weight: 500; color: var(--charcoal); line-height: 1.4; }
@media (min-width: 640px){ .why-dilemma{ font-size: 1.25rem; } }
.why-choice{ font-size: 1rem; color: rgba(107,81,72,.75); line-height: 1.6; }
@media (min-width: 640px){ .why-choice{ font-size: 1.125rem; } }
.why-origin{ padding-top: .75rem; }
.why-origin p{
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(107,81,72,.7);
  border-top: 1px solid var(--border); padding-top: 1rem; display: inline-block;
}
@media (min-width: 640px){ .why-origin p{ font-size: .875rem; } }

/* =============================================================================
   SIGNUP
============================================================================= */
#signup{ padding: 5rem 0; position: relative; overflow: hidden; }
@media (min-width: 640px){ #signup{ padding: 7rem 0; } }
.signup-glow{
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 64rem; height: 450px;
  background: linear-gradient(to top, rgba(250,218,221,.4), transparent);
  filter: blur(64px); z-index: -1; pointer-events: none;
}
.signup-wrap{ max-width: 768px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px){ .signup-wrap{ padding-inline: 1.5rem; } }
@media (min-width: 1024px){ .signup-wrap{ padding-inline: 2rem; } }
.signup-card{
  position: relative; border-radius: 36px; background: var(--ivory); padding: 2rem 1.75rem;
  border: 1px solid var(--border); box-shadow: 0 25px 50px -12px rgba(107,81,72,.1); overflow: hidden;
}
@media (min-width: 640px){ .signup-card{ padding: 3rem; } }
.signup-corner-glow{
  position: absolute; top: -3rem; right: -3rem; width: 12rem; height: 12rem;
  background: rgba(255,242,194,.5); border-radius: 50%; filter: blur(40px); z-index: 0; pointer-events: none;
}
.signup-content{ position: relative; z-index: 1; }
.signup-header{ text-align: center; max-width: 32rem; margin: 0 auto 2rem; }
@media (min-width: 640px){ .signup-header{ margin-bottom: 2.5rem; } }
.signup-header > * + *{ margin-top: .75rem; }
.signup-header h2{ font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 600; color: var(--charcoal); }
@media (min-width: 640px){ .signup-header h2{ font-size: 2.25rem; } }
.signup-header p{ font-size: .875rem; color: rgba(107,81,72,.75); line-height: 1.6; }
@media (min-width: 640px){ .signup-header p{ font-size: 1rem; } }

.waitlist-form{ display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px){ .waitlist-form{ gap: 1.25rem; } }
.field label{ display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(107,81,72,.8); margin-bottom: .375rem; }
.field input{
  width: 100%; padding: .75rem 1rem; border-radius: 1rem; background: var(--ivory);
  border: 1px solid var(--border); color: var(--charcoal); font-size: .875rem; transition: all .15s;
  font-family: inherit;
}
.field input::placeholder{ color: rgba(107,81,72,.4); }
.field input:focus{ outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 2px rgba(107,81,72,.3); }
.field input.invalid{ border-color: #f87171; background: rgba(254,242,242,.5); }
.field-error{ margin: .25rem 0 0; font-size: .75rem; color: #dc2626; }

.print-choice-label{ display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(107,81,72,.8); margin-bottom: .375rem; }
.print-choice-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: .625rem; }
@media (min-width: 640px){ .print-choice-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.print-choice-grid > *{ min-width: 0; }
.print-choice{
  padding: .75rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--ivory);
  text-align: left; font-size: .75rem; font-weight: 500; color: rgba(107,81,72,.7); transition: all .15s;
}
.print-choice:hover{ background: var(--soft-pink); }
.print-choice .name{ display: block; font-weight: 600; }
.print-choice .sub{ font-size: .6875rem; opacity: .75; }
.print-choice.selected{ border-color: var(--charcoal); color: var(--charcoal); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.print-choice.selected.pink{ background: var(--blush); }
.print-choice.selected.blue{ background: var(--blue-pale); }

.submit-error{ font-size: .75rem; color: #dc2626; background: #fef2f2; padding: .75rem; border-radius: .75rem; border: 1px solid #fecaca; text-align: center; margin: 0; }

.submit-btn{
  width: 100%; padding: 1rem 1.5rem; border-radius: 999px; background: var(--charcoal); color: var(--ivory);
  font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 10px 15px -3px rgba(107,81,72,.2); display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: all .15s;
}
@media (min-width: 640px){ .submit-btn{ font-size: .8125rem; } }
.submit-btn:hover{ background: var(--charcoal-hover); }
.submit-btn:active{ transform: scale(.95); }
.submit-btn:disabled{ opacity: .75; cursor: default; }
.submit-btn .icon.spin{ animation: spin 1s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form-microtext{ padding-top: .25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .75rem; color: rgba(107,81,72,.6); text-align: center; }

.success-state{ text-align: center; padding: 1.5rem 0 2rem; display: none; flex-direction: column; align-items: center; gap: 1rem; }
.success-state.is-active{ display: flex; }
.success-icon{ width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--blush); color: var(--charcoal); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.success-state h2{ font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin: 0; }
@media (min-width: 640px){ .success-state h2{ font-size: 1.875rem; } }
.success-state p.desc{ font-size: .875rem; color: rgba(107,81,72,.8); max-width: 28rem; margin: 0 auto; line-height: 1.6; }
@media (min-width: 640px){ .success-state p.desc{ font-size: 1rem; } }
.success-details{
  padding: 1rem; border-radius: 1rem; background: var(--soft-pink); border: 1px solid var(--border);
  font-size: .75rem; color: rgba(107,81,72,.8); max-width: 24rem; margin: 0 auto; text-align: left;
}
.success-details p{ margin: .125rem 0; }
.success-reset-btn{
  margin-top: 1rem; padding: .625rem 1.5rem; border-radius: 999px; border: 1px solid rgba(107,81,72,.2);
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--charcoal);
  transition: background-color .15s;
}
.success-reset-btn:hover{ background: var(--soft-pink); }

/* =============================================================================
   FOOTER
============================================================================= */
footer{ background: var(--ivory); border-top: 1px solid var(--border); padding: 3rem 0; }
@media (min-width: 640px){ footer{ padding: 4rem 0; } }
.footer-top{
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); text-align: center;
}
@media (min-width: 768px){ .footer-top{ flex-direction: row; text-align: left; gap: 2rem; } }
.footer-brand img{ height: 2.5rem; width: auto; object-fit: contain; opacity: .9; border-radius: .5rem; }
.footer-links{ display: flex; align-items: center; gap: 1.5rem; font-size: .75rem; color: rgba(107,81,72,.8); font-weight: 500; }
.footer-links a{ display: inline-flex; align-items: center; gap: .375rem; transition: color .15s; }
.footer-links a:hover{ color: var(--charcoal); }
.footer-bottom{
  padding-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: .75rem; color: rgba(107,81,72,.5); text-align: center;
}
@media (min-width: 640px){ .footer-bottom{ flex-direction: row; text-align: left; } }
.footer-bottom p{ margin: 0; }
.footer-bottom .fine{ font-size: .6875rem; }

/* =============================================================================
   LIGHTBOX MODAL
============================================================================= */
#lightbox-backdrop{
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
}
@media (min-width: 640px){ #lightbox-backdrop{ padding: 1.5rem; } }
#lightbox-backdrop.is-open{ display: flex; }
#lightbox-card{
  position: relative; max-width: 56rem; width: 100%; background: var(--ivory); border-radius: 1.5rem;
  padding: 1rem; border: 1px solid var(--border); box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); overflow: hidden;
}
@media (min-width: 640px){ #lightbox-card{ padding: 1.5rem; } }
#close-lightbox-btn{
  position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: rgba(255,249,242,.9); backdrop-filter: blur(2px); border: 1px solid var(--border);
  color: var(--charcoal); display: flex; align-items: center; justify-content: center; transition: background-color .15s;
}
#close-lightbox-btn:hover{ background: var(--blush); }
.lightbox-img-frame{
  position: relative; border-radius: 1rem; overflow: hidden; background: var(--soft-pink);
  aspect-ratio: 1/1; max-height: 70vh; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px){ .lightbox-img-frame{ aspect-ratio: 4/3; } }
.lightbox-img-frame img{ width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px){ .lightbox-img-frame img{ object-fit: cover; } }
#lightbox-caption{ padding-top: 1rem; padding-inline: .5rem; }
#lightbox-caption h4{ font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .25rem; }
@media (min-width: 640px){ #lightbox-caption h4{ font-size: 1.5rem; } }
#lightbox-caption p{ font-size: .75rem; color: rgba(107,81,72,.75); margin: 0; }
@media (min-width: 640px){ #lightbox-caption p{ font-size: .875rem; } }

/* =============================================================================
   REDUCED MOTION
============================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}