@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-500-normal.woff2) format("woff2"); }

:root {
  --walnut: #2C2118;
  --walnut-deep: #1C130A;
  --cream: #F2E9D8;
  --cream-warm: #F0E2CD;
  --amber: #C9772E;
  --amber-ink: #8F4E16;   /* orange text on cream, readable at small sizes */
  --amber-display: #B96A26; /* accent word in headlines on cream */
  --sand: #DB9A55;
  --muted-dark: #A2998B;
  --muted-cream: #6E6555;
  --rule-cream: #DDD2BE;
  --rule-dark: #453729;
  --ease: cubic-bezier(.2,.7,.2,1);
  --hover: cubic-bezier(.22,.9,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--walnut);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
}
h1 { font-size: clamp(3rem, 6.2vw, 5.4rem); }
h1 em, h2 em { font-style: italic; color: var(--sand); }
.section-dark h2 em { color: var(--sand); }
section:not(.section-dark) h2 em { color: var(--amber-display); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2; }
h4 { font-family: Inter, sans-serif; font-size: .93rem; font-weight: 500; letter-spacing: .01em; margin: 0; color: var(--walnut); }
p { margin: 0 0 1em; max-width: 58ch; }
a { color: inherit; }
img[width][height] { height: auto; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(1160px, 100% - 3rem); margin-inline: auto; }
.page-h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.narrow { max-width: 40rem; }

/* ---------- nav ---------- */

.nav { position: absolute; inset: 0 0 auto; z-index: 5; padding: 1.15rem 2.6rem; display: flex; justify-content: space-between; align-items: center; }
.nav a { text-decoration: none; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: "Instrument Serif", Georgia, serif; font-size: 1.75rem; color: var(--cream); }
.brand img { width: 42px; height: 42px; display: block; transition: transform .5s var(--ease); }
.brand:hover img { transform: translateY(-2px); }
.nav-links { display: flex; gap: 2.2rem; font-size: 1.12rem; font-weight: 500; color: var(--cream); }
.nav-links a { opacity: .8; padding: .7rem 0; transition: opacity .25s; }
.nav-links a:hover { opacity: 1; }

/* ---------- hero ---------- */

.hero { position: relative; min-height: min(100vh, 1080px); display: flex; align-items: center; background: var(--walnut-deep); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: .78; transform: scale(1.02); animation: drift 26s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.09) translateX(-1.5%); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28,19,10,.94) 0%, rgba(28,19,10,.78) 34%, rgba(28,19,10,.28) 66%, rgba(28,19,10,.5) 100%); }

/* The nav sits straight on the photo, and the diagonal shade above is at its thinnest
   exactly where the three links are, so "Join" read at 3.37 against the picture behind
   it. This top band lifts all three past 4.5 and fades out before the headline, so the
   hero itself looks the same. */
.hero::after { content: ""; position: absolute; inset: 0 0 auto; height: clamp(170px, 22vh, 240px); z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(28,19,10,.42) 0, rgba(28,19,10,.40) 92px, rgba(28,19,10,0) 100%); }

.hero-body { position: relative; z-index: 2; padding: 7rem 0 5rem; color: var(--cream); }
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--sand); }
.hero-sub { margin-top: 1.4rem; max-width: 34ch; color: #E4D9C6; font-size: 1.2rem; line-height: 1.5; }

.hero .h-in { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
.hero .h-in:nth-child(2) { animation-delay: .1s; }
.hero .h-in:nth-child(3) { animation-delay: .2s; }
.hero .h-in:nth-child(4) { animation-delay: .32s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- forms and buttons ---------- */

.signup { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2.2rem; max-width: 30rem; }
.signup input[type=email] { flex: 1 1 14rem; min-width: 0; padding: 1rem 1.2rem; font: inherit; font-size: 1rem; color: var(--cream); background: rgba(242,233,216,.08); border: 1px solid rgba(242,233,216,.28); border-radius: 999px; transition: border-color .25s, background .25s; }
.signup input:focus { border-color: var(--sand); background: rgba(242,233,216,.12); outline: 2px solid var(--sand); outline-offset: 2px; }
.signup input::placeholder { color: #A2998B; }
.btn .arrow { display: none; }
.btn { display: inline-block; padding: 1rem 1.9rem; font: inherit; font-size: 1rem; font-weight: 500; color: var(--walnut); background: var(--amber); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center; transition: transform .18s var(--hover), background .2s, box-shadow .24s var(--hover); }
.btn:hover { background: #D07F35; transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(201,119,46,.6); }
.btn:active { transform: translateY(0); }
.btn-quiet { background: transparent; color: var(--walnut); border: 1px solid var(--rule-cream); }
.btn-quiet:hover { background: var(--cream-warm); box-shadow: none; }
.fineprint { margin-top: .9rem; font-size: .88rem; color: var(--muted-dark); }

/* ---------- sections ---------- */

section { padding: 7rem 0; }
.section-dark { background: var(--walnut); color: var(--cream); }
.section-dark .fineprint { color: var(--muted-dark); }
.lede { font-size: 1.12rem; max-width: 46ch; margin-top: 1.2rem; }
.section-head { margin-bottom: 3.2rem; }

/* scroll reveal · wait until well into view, then arrive with weight */
.reveal { opacity: 0; transform: translateY(56px) scale(.985); transition: opacity 1.25s var(--ease), transform 1.25s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(48px) scale(.985); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(2) { transition-delay: .18s; }
.stagger.in > :nth-child(3) { transition-delay: .36s; }
.stagger.in > :nth-child(4) { transition-delay: .54s; }
.stagger.in > :nth-child(5) { transition-delay: .72s; }
.stagger.in > :nth-child(6) { transition-delay: .9s; }
.stagger.in.settled > * { transition-delay: 0s; }
/* and if a pointer arrives while the entrance is still running, drop the delay at once */
.stagger.in > *:hover { transition-delay: 0s; }
.reveal.late { transition-delay: .25s; }
.reveal.in.settled { transition-delay: 0s; }

/* ---------- sessions ---------- */

.sessions { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.session { background: var(--cream-warm); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--hover), box-shadow .28s var(--hover), opacity 1.1s var(--ease); }
.session:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(44,33,24,.45); }
.session .pic { overflow: hidden; aspect-ratio: 4/5; }
.session img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--hover); }
.session:hover img { transform: scale(1.05); }
.session-body { padding: 1.4rem 1.5rem 1.7rem; }
.session .dur { font-size: .85rem; color: var(--amber-ink); margin-bottom: .35rem; }
.session p { font-size: .95rem; color: #5C5144; margin: .6rem 0 0; }

/* ---------- moments ---------- */

.moments-head { margin-top: 5.5rem; padding-top: 4rem; border-top: 1px solid var(--rule-cream); }
.moments-head .lede { max-width: 44ch; }
.moments { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; margin-top: 2.6rem; }
.moment {
  background: var(--walnut); color: var(--cream); border-radius: 18px;
  padding: 1.35rem 1.25rem 1.45rem; display: flex; flex-direction: column;
  transition: transform .2s var(--hover), box-shadow .28s var(--hover);
}
.moment:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -28px rgba(44,33,24,.55); }
.moment .m-len { font-size: .82rem; color: var(--sand); }
.moment h3 { font-size: 1.32rem; margin-top: .4rem; }
.moment p { font-size: .9rem; line-height: 1.45; color: #B3A798; margin: .5rem 0 0; max-width: none; }
.moments-note { margin-top: 1.4rem; color: var(--muted-cream); }

/* ---------- app preview ---------- */

.phones { display: flex; justify-content: center; align-items: flex-end; gap: 2rem; margin-top: 3rem; }
.phone { width: 272px; flex: 0 0 auto; aspect-ratio: 590/1278; border-radius: 40px; padding: 9px; background: #17100A; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .22s var(--hover); }
.phone > img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; }
.phone:hover { transform: translateY(-10px); }
.phones .phone:nth-child(2) { width: 304px; margin-bottom: 1.4rem; }
.phone-cap { text-align: center; font-size: .9rem; color: var(--muted-dark); margin-top: 1rem; }

/* ---------- membership ---------- */

.member { display: grid; gap: 4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.compare { border: 1px solid #4A3A29; border-radius: 22px; overflow: hidden; background: linear-gradient(90deg, transparent 0 74.2%, rgba(201,119,46,.15) 74.2% 100%); }
.compare-row { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.8fr); align-items: center; border-top: 1px solid rgba(74,58,41,.75); }
.compare-row:first-child { border-top: 0; }
.compare-row > * { padding: 1rem 1.2rem; font-size: .96rem; }
.compare-row .lbl { color: #E4D9C6; }
.compare-row .free { color: #9A8F80; text-align: center; }
.compare-row .club { color: var(--cream); text-align: center; }
.compare-head > * { padding-top: 1.3rem; padding-bottom: 1.3rem; }
.compare-head .free, .compare-head .club { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
/* Matches the FREE cells below it. The old #6E6255 sat at 2.65 on the dark table,
   which is below AA; this reads at 4.94 and still stays quieter than the amber CLUB. */
.compare-head .free { color: #9A8F80; }
.compare-head .club { font-weight: 500; }
.compare-head .club { color: var(--sand); }
.tick { color: var(--sand); font-size: 1.1rem; }
.price-line { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.price-line .big { font-family: "Instrument Serif", Georgia, serif; font-size: 3.4rem; line-height: 1; }
.price-line .per { font-family: "Instrument Serif", Georgia, serif; font-size: 1.6rem; color: var(--cream); }
.price-sub { color: var(--muted-dark); font-size: .95rem; margin: .5rem 0 0; }
.trial { display: inline-block; margin-top: 1.1rem; padding: .4rem 1rem; border: 1px solid #4A3A29; border-radius: 999px; font-size: .87rem; color: var(--sand); }
.member .phone { margin-inline: auto; width: 360px; }

/* ---------- tools ---------- */

.tools { display: grid; gap: 3rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.tools .kit { border-radius: 24px; overflow: hidden; }
.tools .kit img { width: 100%; height: auto; display: block; transition: transform .55s var(--hover); }
.tools .kit:hover img { transform: scale(1.04); }
.tool-row { display: flex; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.tool-row a { display: block; width: 68px; height: 68px; border-radius: 16px; overflow: hidden; background: var(--cream-warm); transition: transform .2s var(--hover), box-shadow .28s var(--hover); }
.tool-row a:hover { transform: translateY(-4px); box-shadow: 0 16px 24px -16px rgba(44,33,24,.5); }
.tool-row img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- shop pages ---------- */

.grid-products { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.product { text-decoration: none; display: block; transition: transform .2s var(--hover); }
.product:hover { transform: translateY(-5px); }
.product .pic { overflow: hidden; border-radius: 16px; background: var(--cream-warm); aspect-ratio: 1; }
.product img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--hover); }
.product:hover img { transform: scale(1.05); }
.product h3 { margin-top: .9rem; font-size: 1.18rem; }
.product .tag { font-size: .88rem; color: var(--muted-cream); }
.soon { display: inline-block; margin-top: .35rem; font-size: .82rem; color: var(--muted-cream); }
.price { display: inline-block; margin-top: .4rem; font-family: "Instrument Serif", Georgia, serif; font-size: 1.25rem; color: var(--walnut); }
.pdp-price { font-family: "Instrument Serif", Georgia, serif; font-size: 2.1rem; margin: .6rem 0 0; color: var(--walnut); }
.pdp-price.none { font-family: Inter, sans-serif; font-size: 1rem; color: var(--muted-cream); }
.product.featured { grid-column: span 2; }
.product.featured .pic { aspect-ratio: 16/9; }
.product-detail { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; padding-top: 2rem; }
/* the phone mockup keeps the app's own button styling: it is a picture of the app */
.pw-cta { color: var(--cream); }
.product-detail img { width: 100%; border-radius: 20px; display: block; }

/* ---------- footer ---------- */

footer { margin-top: auto; background: var(--walnut-deep); color: var(--muted-dark); padding: 4rem 0 3rem; font-size: .9rem; }
footer a { color: var(--cream); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.social { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.8rem; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3B2E22; border-radius: 50%; color: var(--cream); transition: transform .2s var(--hover), background .2s, border-color .2s; }
.social a:hover { background: #2C2118; border-color: #55432F; transform: translateY(-3px); text-decoration: none; }
.social svg { width: 20px; height: 20px; display: block; }
.foot-links { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.foot-links a { padding: .55rem 0; }
.disclaimer { max-width: 68ch; line-height: 1.6; }
.subnav { padding: 1.7rem 2.6rem; background: var(--walnut-deep); display: flex; justify-content: space-between; align-items: center; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .member, .tools { grid-template-columns: 1fr; }
  .product.featured { grid-column: span 1; }
  .product.featured .pic { aspect-ratio: 1; }
}

.swipe-hint { display: none; }

/* ---------- phone layout ---------- */

@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(2.7rem, 13.5vw, 3.6rem); line-height: 1.02; }
  h2 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .wrap { width: calc(100% - 2.6rem); }
  section { padding: 3.6rem 0; }
  .section-head { margin-bottom: 1.6rem; }
  .lede { font-size: 1.02rem; margin-top: .8rem; }

  .nav { padding: 1.1rem 1.3rem; }
  .brand { font-size: 1.3rem; gap: .5rem; white-space: nowrap; }
  .brand img { width: 30px; height: 30px; }
  .nav-links { gap: .95rem; font-size: .9rem; }

  .hero { min-height: 100svh; align-items: flex-end; }
  .hero-img { object-position: 62% 30%; opacity: .72; }
  .hero-shade { background: linear-gradient(to bottom, rgba(28,19,10,.55) 0%, rgba(28,19,10,.25) 40%, rgba(28,19,10,.97) 82%); }
  .hero-body { padding: 6rem 0 3rem; }
  .hero-sub { font-size: 1.05rem; margin-top: 1rem; }
  .hero-body { padding: 6rem 0 4.2rem; }
  .season-eyebrow { font-size: 1.15rem; margin-bottom: 1rem; }

  /* reveals travel less on a small screen so they don't feel laggy */
  .reveal, .stagger > * { transform: translateY(26px) scale(1); }
  .reveal.late { transition-delay: 0s; }

  /* swipeable rows: one card centred, its neighbours clearly showing on both sides.
     The side padding is half the leftover width, so the first and last card can
     still settle in the middle rather than jamming against an edge. */
  .sessions, .phones {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * 1.3rem);
    scrollbar-width: none;
  }
  .sessions::-webkit-scrollbar, .phones::-webkit-scrollbar { display: none; }

  .sessions { gap: 3vw; padding: .4rem 14vw 1.1rem; }
  .session { flex: 0 0 72vw; scroll-snap-align: center; }
  .session .pic { aspect-ratio: 4/4.2; }
  .session:hover { transform: none; box-shadow: none; }

  .phones { align-items: flex-start; justify-content: flex-start; margin-top: 1rem; gap: 3vw; padding: .4rem 15.5vw 1.1rem; }
  .phone, .phones .phone:nth-child(2) { flex: 0 0 69vw; width: 69vw; margin: 0; scroll-snap-align: center; }
  .phone:hover { transform: none; }

  /* position dots replace the word "Swipe": they show where you are and that there is more */
  /* The resting dots take their color from the brand brown, not the gray text color.
     The gray read cool, almost blue, next to the amber bar. */
  .swipe-hint { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: .3rem; color: var(--amber-ink); }
  .section-dark .dot::before { background: var(--sand); }
  .dot { width: 26px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
  .dot::before {
    content: ""; display: block; width: 7px; height: 7px; border-radius: 999px;
    background: var(--amber-ink); opacity: .36;
    transition: width .35s var(--hover), opacity .35s var(--hover), background-color .35s var(--hover);
  }
  .dot.on::before { width: 22px; opacity: 1; background: var(--amber-ink); }
  .section-dark .dot.on::before { background: var(--sand); }

  /* paywall: table, price, then a smaller phone */
  .member { gap: 2.2rem; }
  .member .phone { width: min(300px, 78vw); }
  .compare-row > * { padding: .8rem .7rem; font-size: .86rem; line-height: 1.3; }
  .price-line .big { font-size: 2.8rem; }

  .moments-head { margin-top: 3.4rem; padding-top: 2.8rem; }
  .moments { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin-top: 1.8rem; }
  .moment { padding: 1.1rem 1rem 1.2rem; border-radius: 16px; }
  .moment h3 { font-size: 1.05rem; }
  .moment p { font-size: .85rem; }
  .moment:hover { transform: none; box-shadow: none; }
  .tools { gap: 1.6rem; }
  .tool-row { gap: .5rem; flex-wrap: nowrap; }
  .tool-row a { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1; }
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .product-detail { padding-top: 1rem; }
  footer { padding: 3rem 0 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img, .hero .h-in { animation: none; }
  .hero .h-in, .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}


/* ---------- coded paywall screen ---------- */

/* The mock is drawn in code inside a frame that changes width with the viewport.
   Every measurement below is therefore in em off one base size, and that base is a
   share of the frame's own width. The whole screen then scales as one piece and
   fits at any frame size. The px line before the cqw line is the fallback for a
   browser without container queries: it gets exactly the old fixed-size screen. */
.member .phone { container-type: inline-size; }

.pw { position: relative; width: 100%; height: 100%; border-radius: 2.37em; overflow: hidden; background: var(--walnut-deep); color: var(--cream); display: flex; flex-direction: column; line-height: 1.35;
      font-size: 13.5px; font-size: 3.85cqw; }
.pw-photo { position: relative; height: 50%; overflow: hidden; flex: 0 0 auto; }
.pw-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.pw-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,19,10,0) 45%, rgba(28,19,10,.96) 100%); }
.pw-body { padding: 0 1.333em 1.333em; margin-top: -.889em; position: relative; display: flex; flex-direction: column; gap: .667em; flex: 1 1 auto; }
.phone .pw-mark { width: 2.074em; height: 2.074em; display: block; }
.pw h3 { font-size: 1.926em; line-height: 1.05; margin: .077em 0 0; }
.pw .it { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--sand); font-size: 1em; }
.pw .meta { color: var(--muted-dark); font-size: .852em; }
.pw-toggle { display: grid; grid-template-columns: 1fr 1fr; background: #2B2118; border-radius: 999px; padding: .296em; margin-top: .148em; }
.pw-toggle span { text-align: center; padding: .75em .5em; border-radius: 999px; font-size: .889em; color: var(--muted-dark); }
.pw-toggle .on { background: var(--amber); color: var(--cream); font-weight: 500; display: flex; justify-content: center; align-items: center; gap: .5em; }
.pw-toggle .badge { font-size: .708em; letter-spacing: .06em; color: var(--cream); background: rgba(242,233,216,.22); padding: .353em .706em; border-radius: 999px; white-space: nowrap; }
.pw-price { text-align: center; margin-top: .741em; }
.pw-price b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 2.222em; display: block; line-height: 1.05; }
.pw-price span { color: var(--muted-dark); font-size: .815em; }
.pw-chev { margin: -.154em auto .154em; width: 2em; height: 2em; border-radius: 50%; background: rgba(242,233,216,.1); color: var(--muted-dark); display: grid; place-items: center; font-size: .963em; line-height: 1; }
.pw-cta { margin-top: auto; background: var(--amber); color: var(--cream); text-align: center; padding: .963em; border-radius: 999px; font-weight: 500; font-size: 1em; }
.pw-fine { text-align: center; color: var(--muted-dark); font-size: .741em; }
@media (max-width: 900px) { .member .phone { width: min(360px, 80vw); } }


/* ---------- season tease variants ---------- */

/* A: poster date line above the headline */
.season-eyebrow { display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.7rem); color: var(--sand); letter-spacing: .01em; }
.season-eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--sand); opacity: .8; }

/* B: rotating stamp beside the form */
.stamp { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.stamp .core { position: absolute; inset: 0; display: grid; place-items: center; }
.stamp .core span { width: 22px; height: 22px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 10px rgba(219,154,85,.14); }
.stamp text { font-family: Inter, sans-serif; font-size: 10.6px; letter-spacing: .32em; fill: var(--cream); text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-cta { display: flex; align-items: center; gap: 2.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero-cta .signup { margin-top: 0; }

/* C: painted on the wall */
.wall-word { position: absolute; right: 4vw; top: 14%; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(9rem, 22vw, 22rem); line-height: 1; color: var(--sand); opacity: .14; mix-blend-mode: screen; pointer-events: none; letter-spacing: -.02em; }
.wall-word small { display: block; font-size: .18em; font-style: normal; letter-spacing: .3em; text-transform: uppercase; opacity: .9; margin-top: -.3em; }

@media (max-width: 760px) {
  .stamp { width: 120px; height: 120px; }
  .hero-cta { gap: 1.4rem; }
  .wall-word { right: -2vw; top: 9%; font-size: 8.5rem; }
}
@media (prefers-reduced-motion: reduce) { .stamp svg { animation: none; } }


/* ---------- waitlist form: editorial line on desktop, one button on the phone ---------- */

.signup { gap: 1.2rem; align-items: flex-end; max-width: 30rem; }
.signup input[type=email] { flex: 1 1 12rem; background: transparent; border: 0; border-bottom: 1px solid rgba(242,233,216,.5); border-radius: 0; padding: .6rem 0; font-size: 1.1rem; }
.signup input:focus { border-bottom-color: var(--sand); background: transparent; }
.signup .btn { padding: .85rem 1.55rem; font-size: .95rem; }
.btn .t { display: inline; } .btn .arrow { display: none; }

@media (max-width: 760px) {
  .signup { position: relative; gap: 0; max-width: none; display: block; }
  /* resting: only the button */
  .signup input[type=email] { display: none; }
  .signup .btn { position: static; transform: none; width: auto; height: auto; padding: 1rem 2rem; font-size: 1.05rem; border-radius: 999px; display: inline-block; }
  .signup .btn .t { display: inline; } .signup .btn .arrow { display: none; }
  .signup .btn .t::after { content: "  →"; }
  /* open: the button becomes the arrow inside one glass pill, field focused */
  .signup.open input[type=email] { display: block; width: 100%; padding: .95rem 3.9rem .95rem 1.2rem; border: 1px solid rgba(242,233,216,.32); border-radius: 999px; background: rgba(28,19,10,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 1rem; animation: openpill .45s var(--ease); }
  .signup.open .btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; box-shadow: none; }
  .signup.open .btn:hover { transform: translateY(-50%); }
  .signup.open .btn .t { display: none; }
  .signup.open .btn .arrow { display: block; line-height: 1; }
  @keyframes openpill { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}