/* ===========================================================
   Kitten Mail Club - global styles
   Layout & palette modeled on the reference mail-club site
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Allura&family=Caveat:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600&family=Jost:wght@300;400;500;600;700&family=Lobster+Two:ital,wght@1,700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --coral:   #de6450;   /* salmon-red headings        */
  --coral-d: #c8503c;
  --sage:    #93a8b8;   /* dusty grey-blue buttons     */
  --sage-d:  #7e96a8;
  --red:     #e5342a;   /* bright red CTA / add-to-cart*/
  --red-d:   #cf251c;
  --cream:   #ece8df;   /* beige section background    */
  --pink:    #f3b9c6;   /* pink accent                 */

  /* playful pastel palette - used for headings, tints & accents */
  --c-pink:  #e2789a;   --pink-soft:  #fdeef2;
  --c-mint:  #4fa98d;   --mint-soft:  #e8f4ef;
  --c-blue:  #5f97c9;   --blue-soft:  #ecf3fa;
  --c-lav:   #9a7fce;   --lav-soft:   #f2edfb;
  --c-gold:  #d99a1f;   --yellow-soft:#fbf3da;
  --c-peach: #e8825e;
  --ink:     #353330;   /* body text                   */
  --muted:   #7c7872;
  --line:    #e3e0d8;
  --bg:      #ffffff;

  /* The reading text is the letter's own face now, so the page and the paper
     sound alike. Glacial Indifference is a Canva font and is not installed, so
     Jost stands in for it exactly as it does in monthly-letter.html.
     --serif keeps its name only because a hundred rules already say it. */
  --serif:   'Jost', 'Glacial Indifference', 'Avenir Next', Helvetica, sans-serif;
  --letter-script: 'Allura', 'BD Script', cursive;
  --letter-caps:   Copperplate, 'Copperplate Gothic Light', 'Jost', serif;
  --display: 'Caveat', 'Lora', cursive;
  --lora: 'Lora', Georgia, serif;
  /* reference-page type system: a formal script for big moments,
     an airy serif for reading, a bold sans for anything you click */
  --script: 'Lobster Two', 'Caveat', cursive;
  --serif-display: 'Playfair Display', 'Lora', Georgia, serif;
  /* one sans on the page, weight doing the work Poppins used to do */
  --sans:   'Jost', 'Avenir Next', Helvetica, Arial, sans-serif;
  /* the wordmark, and only the wordmark: the same face the postcard prints */
  --name:   'Abril Fatface', Georgia, serif;

  --wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 16px rgba(0,0,0,.05); }

/* Home: big centered logo on top; the sticky menu bar below it turns into a
   floating bar with the small logo fading in once you scroll. */
.home .site-header { background: transparent; backdrop-filter: none; }
.home .site-header.scrolled { background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
.home .brand-logo { height: 30px; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease; }
.home .site-header.scrolled .brand-logo { opacity: 1; transform: none; pointer-events: auto; }

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 56px; height: 44px; }
.brand-logo { height: 48px; width: auto; display: block; }
.logo-hero { text-align: center; padding: 28px 28px 0; }
.logo-big { width: min(230px, 55%); height: auto; display: inline-block; margin-bottom: -4px; }
.logo-slogan { font-family: var(--display); color: var(--coral); font-weight: 500;
  font-size: 27px; line-height: 1.15; margin: 4px 0 0; }
@media (max-width: 520px) { .logo-slogan { font-size: 21px; } }
@media (max-width: 520px) { .logo-big { width: 70%; } .brand-logo { height: 40px; } }
@media (max-width: 520px) { .brand-logo { height: 46px; } }

.nav-links {
  display: flex; gap: 30px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--serif);
  letter-spacing: .14em;
  font-size: 13px;
  text-transform: uppercase;
}
.nav-links a { color: var(--ink); padding-bottom: 3px; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--coral); }
/* the in-menu auth link only shows on mobile (desktop uses the one in .nav-right) */
.nav-links .nav-auth { display: none; }

.nav-right {
  display: flex; align-items: center; gap: 20px; justify-content: flex-end;
  font-size: 13px; letter-spacing: .08em;
}
.cart { position: relative; display: inline-flex; }
.cart .dot {
  position: absolute; right: -6px; top: -6px;
  background: var(--ink); color: #fff;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; display: grid; place-items: center;
  font-family: var(--serif);
}
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; border: 0;
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .01em;
  padding: 11px 30px; border-radius: 2px;
  transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover { background: var(--sage-d); }
.btn-red  { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-d); }
.btn-block { display: block; width: 100%; text-align: center; }

/* vector paw slides in on hover - absolutely placed so the label stays centered */
.join-btn { position: relative; }
.join-btn::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 19px; height: 19px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff'><ellipse cx='50' cy='64' rx='20' ry='16'/><ellipse cx='29' cy='42' rx='8' ry='10'/><ellipse cx='43' cy='32' rx='8' ry='11'/><ellipse cx='57' cy='32' rx='8' ry='11'/><ellipse cx='71' cy='42' rx='8' ry='10'/></g></svg>") no-repeat center / contain;
  opacity: 0; transform: translate(-6px, -50%) rotate(-14deg);
  transition: opacity .2s ease, transform .2s ease;
}
.join-btn:hover::after { opacity: 1; transform: translate(0, -50%) rotate(0); }
.join-btn:hover { padding-right: 46px; }

/* button bursts bright + happy on hover/tap */
.join-btn { transition: background .2s ease, transform .18s cubic-bezier(.34,1.7,.5,1), box-shadow .2s ease, padding-right .18s ease; }
.join-btn:hover {
  background: linear-gradient(120deg, #ffa6c6 0%, #ffc27e 100%);
  color: #fff; transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(255,150,170,.30);
}
.join-btn:active {
  background: linear-gradient(120deg, #ff2e74 0%, #ff8a2b 55%, #ffd21e 100%);
  transform: scale(.95);
  box-shadow: 0 6px 22px rgba(255,60,120,.45);
}

/* confetti pieces - little cat heads (spawned by app.js) */
.kmc-confetti {
  position: fixed; width: 16px; height: 16px;
  z-index: 70; pointer-events: none; will-change: transform, opacity;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M24 44 20 15 47 35 53 35 80 15 76 44Z'/><circle cx='50' cy='58' r='31'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M24 44 20 15 47 35 53 35 80 15 76 44Z'/><circle cx='50' cy='58' r='31'/></svg>") center / contain no-repeat;
}

/* highlighter marker behind a word */
.hl {
  background: linear-gradient(104deg,
    rgba(255,207,110,0) 0.5%, #ffd98a 2%, #ffcf6e 92%, rgba(255,207,110,0) 99%);
  border-radius: 8px; padding: 0 .12em; margin: 0 -.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Headings ---------- */
.h-coral {
  font-family: var(--display);
  color: var(--coral);
  font-weight: 500;
  line-height: 1.1;
}

/* ===========================================================
   HOME
   =========================================================== */
.hero {
  background: url('banner.jpg') center / cover no-repeat;
  position: relative; overflow: hidden;
}
.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  min-height: 460px; padding: 60px 28px;
  display: flex; align-items: center; justify-content: center;
}
.hero-envelopes { display: none; }
.hero-card {
  position: relative; z-index: 2;
  background: #fff; border-radius: 3px;
  max-width: 430px; width: 100%;
  padding: 46px 44px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
}
.hero-card .eyebrow {
  font-size: 14px; color: var(--muted); margin: 0 0 6px;
}
.hero-card h1 {
  font-family: var(--display); color: var(--coral);
  font-weight: 500; font-size: 40px; line-height: 1.08;
  margin: 0 0 18px;
}
.hero-card p { font-size: 15px; color: var(--ink); margin: 0 0 26px; }

.section { padding: 76px 0; }
.section-title {
  text-align: center; font-family: var(--display); color: var(--coral);
  font-weight: 500; font-size: 30px; margin: 0 0 44px; letter-spacing: .01em;
}

/* product grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.product { display: block; }
.product .thumb {
  aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden;
  position: relative; display: grid; place-items: center;
}
.product .thumb svg { width: 60%; height: 60%; }
.product .thumb .img2 {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .35s ease;
}
.product:hover .thumb .img2 { opacity: 1; }
.product .thumb { transition: transform .35s ease; }
.product:hover .thumb { transform: scale(1.02); }
.product h3 {
  font-family: var(--serif); font-weight: 400; font-size: 16px;
  margin: 14px 0 4px; color: var(--ink);
}
.product .price { font-size: 15px; color: var(--ink); margin: 0; }
.product .add {
  margin-top: 12px; font-size: 13px;
  padding: 9px 22px;
}

.center { text-align: center; }
.mt-48 { margin-top: 48px; }

/* About strip on home */
.about-strip { background: var(--cream); }
.about-strip .inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  max-width: var(--wrap); margin: 0 auto; align-items: stretch;
}
.about-strip .copy { padding: 70px 60px; }
.about-strip h2 {
  font-family: var(--display); color: var(--coral); font-weight: 500;
  font-size: 26px; margin: 0 0 22px;
}
.about-strip p { font-size: 15px; margin: 0 0 16px; }
.about-strip .photo { background-size: cover; background-position: center; min-height: 480px; }

/* ---------- Standard club intro (image left, text right) on Mail Club page ---------- */
.club-intro { max-width: 980px; margin: 8px auto 46px; }
.club-inner {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: center;
}
.club-photo { display: grid; place-items: center; }
.club-photo img { width: 100%; max-width: 470px; height: auto; border-radius: 6px; }
.club-copy { padding: 0; }
.club-eyebrow { font-family: var(--serif); text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--coral); margin: 0 0 8px; }
.club-copy h2 { font-family: var(--display); font-weight: 500; font-size: 32px; color: var(--ink);
  line-height: 1.12; margin: 0 0 16px; }
.club-copy p { font-size: 15px; line-height: 1.62; color: var(--ink); margin: 0 0 14px; }
.club-inside-label { font-family: var(--serif); font-weight: 700; letter-spacing: .04em; margin: 20px 0 10px; }
.club-inside { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; }
.club-inside li { font-size: 15px; padding-left: 24px; position: relative; color: var(--ink); }
.club-inside li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--coral); font-size: 13px; }
.club-note { font-size: 13.5px; color: var(--muted); }
.club-price { font-family: var(--display); font-size: 42px; font-weight: 700; color: var(--ink); margin: 10px 0 18px; }
.club-price span { font-size: 16px; color: var(--muted); font-weight: 400; }
.club-fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 760px) {
  .club-inner { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .club-photo img { max-width: 240px; }
  .club-copy h2 { font-size: 27px; }
}

/* ---------- Two-plan chooser (Club vs Club + The Idea Box) ---------- */
.plans2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 760px; margin: 0 auto; align-items: stretch; }
.plan2 { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 32px 28px 30px; display: flex; flex-direction: column; text-align: center; }
.plan2-feat { border-color: #e7b7a9; box-shadow: 0 12px 34px rgba(222,100,80,.12); }
.plan2-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: #fff; font-family: var(--serif); font-size: 12px; letter-spacing: .06em;
  padding: 5px 15px; border-radius: 999px; white-space: nowrap; }
.plan2-name { font-family: var(--display); font-weight: 600; font-size: 25px; color: var(--ink);
  margin: 4px 0 6px; line-height: 1.12; }
.plan2-plus { color: var(--coral); }
.plan2-price { font-family: var(--display); font-weight: 700; font-size: 38px; color: var(--ink); margin: 4px 0 14px; }
.plan2-price span { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan2-desc { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; flex: 1; }
.plan2 .btn { margin-top: auto; }
.club-cta { text-align: center; margin: 8px 0 44px; }
.club-plans { scroll-margin-top: 84px; }
.plans2-note { text-align: center; color: var(--muted); font-size: 13px; margin: 22px auto 8px; max-width: 560px; }
@media (max-width: 620px) { .plans2 { grid-template-columns: 1fr; max-width: 360px; gap: 30px; } }

.socials { display: flex; gap: 14px; margin: 22px 0 26px; }
.socials a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--ink); display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.socials a:hover { background: var(--ink); color: #fff; }
.socials svg { width: 16px; height: 16px; }

/* ===========================================================
   Shop / category (sidebar layout)
   =========================================================== */
.crumb { font-size: 13px; color: var(--muted); padding: 26px 0 0; }
.crumb a:hover { color: var(--coral); }
.crumb .sep { margin: 0 6px; }

.shop-layout {
  display: grid; grid-template-columns: 210px 1fr; gap: 50px;
  padding: 34px 0 90px;
}
.sidebar h4 {
  font-family: var(--display); font-weight: 500; font-size: 19px;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sidebar ul { list-style: none; margin: 0 0 36px; padding: 0; }
.sidebar li { margin: 9px 0; font-size: 15px; color: var(--ink); }
.sidebar li a:hover { color: var(--coral); }
.sidebar li a.active { color: var(--coral); border-bottom: 1px solid var(--coral); }
.range { width: 100%; accent-color: var(--sage); margin: 8px 0; }
.range-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

.shop-head { display: flex; align-items: baseline; justify-content: space-between; }
.shop-head h1 { font-family: var(--display); font-weight: 500; font-size: 38px; margin: 0; color: var(--ink); }
.shop-bar { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 26px; }
.count { font-size: 13px; color: var(--muted); }
.sortby { font-size: 13px; color: var(--ink); }
.sortby select { font-family: var(--serif); border: 0; background: none; font-size: 13px; }

/* ===========================================================
   Product detail
   =========================================================== */
.pdp { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 26px; padding: 30px 0 80px; align-items: start; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 12px; }
.pdp-thumbs .t {
  aspect-ratio: 1/1; border-radius: 2px; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--line);
}
.pdp-thumbs .t svg { width: 70%; height: 70%; }
.pdp-main { aspect-ratio: 1/1; border-radius: 2px; display: grid; place-items: center; }
.pdp-main svg { width: 64%; height: 64%; }

.pdp-info h1 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.12; margin: 0 0 14px; color: var(--ink); }
.pdp-price { font-size: 22px; margin: 0 0 20px; }
.pdp-desc { font-size: 15px; color: var(--ink); }
.pdp-desc a { color: var(--coral); text-decoration: underline; }
.field-label { font-size: 14px; margin: 26px 0 8px; }
.req { color: var(--red); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; }
.qty button { width: 36px; height: 38px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.qty input { width: 42px; height: 38px; border: 0; text-align: center; font-family: var(--serif); font-size: 15px; }

.opt {
  border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.opt input { accent-color: var(--ink); }
.opt .o-title { font-size: 15px; }
.opt .o-sub { font-size: 13px; color: var(--muted); }

.pdp-cta { display: grid; gap: 12px; margin-top: 26px; }

.prevnext { text-align: right; font-size: 14px; color: var(--ink); padding-top: 14px; }
.prevnext a { padding: 0 8px; }
.prevnext a:hover { color: var(--coral); }

/* ===========================================================
   Cart drawer (side) + shared line items
   =========================================================== */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.32);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw;
  background: #fff; z-index: 61; transform: translateX(100%);
  transition: transform .28s ease; display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,.12);
}
.cart-drawer.open { transform: translateX(0); }
.cd-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cd-head h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 18px; }
.cd-close { background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--muted); }
.cd-items { flex: 1; overflow-y: auto; padding: 6px 24px; }
.cd-empty { color: var(--muted); font-size: 15px; padding: 30px 0; text-align: center; }
.cd-foot { border-top: 1px solid var(--line); padding: 18px 24px 24px; }
.cd-promo { font-size: 14px; margin-bottom: 16px; }
.cd-promo a { text-decoration: underline; }
.cd-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 19px; }
.cd-total strong { font-weight: 600; }
.cd-tax { font-size: 12px; color: var(--muted); margin: 4px 0 16px; }
.cd-viewcart { border: 1px solid var(--ink); color: var(--ink); margin-top: 10px; }
.cd-viewcart:hover { background: #faf9f6; }
.cd-secure { text-align: center; font-size: 13px; color: var(--ink); margin: 16px 0 0; }

/* line item (drawer + cart page) */
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ci-img { width: 64px; height: 64px; border-radius: 3px; overflow: hidden; display: grid; place-items: center; }
.ci-img svg { width: 74%; height: 74%; }
.ci-name { font-size: 15px; margin: 0 0 3px; }
.ci-price { font-size: 14px; margin: 0 0 2px; }
.ci-opt { font-size: 13px; color: var(--ink); margin: 0; }
.ci-dim { color: var(--muted); }
.ci-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; border: 1px solid var(--line); border-radius: 3px; width: max-content; }
.ci-qty button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--ink); }
.ci-qty span { min-width: 22px; text-align: center; font-size: 14px; }
.ci-del { margin-left: 6px; border-left: 1px solid var(--line); }
.ci-line { font-size: 14px; text-align: right; white-space: nowrap; }

/* ===========================================================
   Cart page (My cart)
   =========================================================== */
.cart-page { display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; padding: 30px 0 90px; align-items: start; }
.cart-page h1 { font-family: var(--display); font-weight: 500; font-size: 30px; margin: 0 0 6px; }
.cart-extra { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cart-extra a { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.cart-extra a:hover { color: var(--coral); }
.summary { border-top: 2px solid var(--ink); padding-top: 4px; }
.summary h2 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 16px 0 22px; }
.sum-row { display: flex; justify-content: space-between; font-size: 15px; margin: 14px 0; }
.sum-loc { font-size: 14px; text-decoration: underline; margin: -6px 0 18px; }
.sum-total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 22px; padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.secure { text-align: center; font-size: 13px; margin-top: 14px; }

/* ===========================================================
   Checkout page
   =========================================================== */
.co-bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line); max-width: 1100px; margin: 0 auto; }
.co-bar .co-logo { font-family: var(--display); font-size: 18px; letter-spacing: .02em; }
.co-bar .co-logo b { color: var(--coral); }
.co-bar a { font-size: 14px; text-decoration: underline; }
.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1100px; margin: 0 auto; padding: 36px 28px 90px; }
.co-haveacct { background: #f3f1ec; border-radius: 4px; padding: 14px 18px; font-size: 14px; margin-bottom: 28px; }
.co-haveacct a { text-decoration: underline; }
.checkout h2 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0 0 18px; }
.co-form .field { margin-bottom: 16px; }
.co-form label { display: block; font-size: 13px; margin-bottom: 6px; }
.co-form input, .co-form select {
  width: 100%; padding: 12px 14px; border: 1px solid #cfccc4; border-radius: 2px;
  font-family: var(--serif); font-size: 15px; background: #fff;
}
.co-form input:focus, .co-form select:focus { outline: none; border-color: var(--sage); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-summary { border-left: 1px solid var(--line); padding-left: 60px; }
.co-summary .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.co-summary .head h2 { margin: 0; }
.co-summary .head span { font-size: 14px; color: var(--muted); }
.co-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.co-thumb { position: relative; width: 56px; height: 56px; border-radius: 3px; overflow: hidden; display: grid; place-items: center; }
.co-thumb svg { width: 74%; height: 74%; }
.co-badge { position: absolute; top: -7px; right: -7px; background: var(--ink); color: #fff; width: 19px; height: 19px; border-radius: 50%; font-size: 11px; display: grid; place-items: center; }
.co-price { font-size: 14px; text-align: right; white-space: nowrap; }
.co-promo { border: 1px solid #cfccc4; border-radius: 4px; padding: 14px 16px; font-size: 14px; margin: 6px 0 22px; }
.co-promo a { text-decoration: underline; }
.co-charge { font-size: 13px; color: var(--muted); margin-top: 14px; }

@media (max-width: 820px) {
  .cart-page, .checkout { grid-template-columns: 1fr; gap: 34px; }
  .co-summary { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
}

/* ===========================================================
   Promo
   =========================================================== */
.promo-tag {
  display: inline-block; font-size: 11px; letter-spacing: .03em;
  background: #fbe3e0; color: var(--coral-d);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.promo-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(120deg, #fbe6ea 0%, #e6ecf3 100%);
  border: 1px solid #f0d9de; border-radius: 12px;
  padding: 18px 22px; margin: 0 0 8px;
}
.promo-banner .gift { font-size: 30px; line-height: 1; flex: none; }
.promo-banner .pb-body { flex: 1; }
.promo-banner h3 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 0 0 3px; color: var(--coral-d); }
.promo-banner p { margin: 0; font-size: 14px; color: var(--ink); }
.promo-banner .btn { flex: none; }
@media (max-width: 600px) {
  .promo-banner { flex-direction: column; text-align: center; }
}

/* ===========================================================
   Account page
   =========================================================== */
.account { max-width: 820px; margin: 0 auto; padding: 34px 0 90px; }

/* welcome banner */
.acct-hero {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(120deg, #f3e7ea 0%, #e3e8ef 100%);
  border-radius: 12px; padding: 24px 28px; margin-bottom: 14px;
}
.acct-hero .avatar {
  width: 76px; height: 76px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 4px #fff;
}
.acct-hero h1 { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 0 0 3px; }
.acct-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.acct-id { color: var(--muted); font-size: 13px; margin: 0 0 30px; padding-left: 4px; }
.acct-id b { color: var(--ink); font-weight: 500; }

.account h2 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 38px 0 16px; }
.account h2 .more { float: right; font-size: 13px; font-family: var(--serif); color: var(--coral); }

/* What's New */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.news a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.news .pic { aspect-ratio: 16/10; display: grid; place-items: center; }
.news .pic svg { width: 56%; height: 56%; }
.news .txt { padding: 12px 14px 16px; }
.news .tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }
.news h3 { font-size: 15px; font-weight: 400; margin: 4px 0 0; line-height: 1.35; }

/* subscriptions */
.sub { padding: 22px 0; border-bottom: 1px solid var(--line); }
.sub-head { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; }
.sub-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.sub-img svg { width: 76%; height: 76%; }
.sub-name { font-size: 17px; margin: 0 0 3px; }
.sub-meta { font-size: 14px; margin: 0 0 2px; }
.badge { display: inline-block; margin-top: 7px; font-size: 12px; letter-spacing: .04em; padding: 3px 10px; border-radius: 20px; }
.badge.active { background: #e7f0e9; color: #3f7d57; }
.badge.canceled { background: #f1efe9; color: var(--muted); }
.sub-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.btn-sm { font-size: 13px; padding: 9px 16px; }
.btn-out { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-out:hover { border-color: var(--ink); }

.sub-panel { margin-top: 14px; background: #faf8f4; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.sub-panel.subtle { background: #fbf7f6; }
.sub-panel.hidden { display: none; }
.panel-title { font-size: 14px; margin: 0 0 12px; }
.sub-panel .field { margin-bottom: 12px; }
.sub-panel label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.sub-panel input { width: 100%; padding: 10px 12px; border: 1px solid #cfccc4; border-radius: 4px; font-family: var(--serif); font-size: 14px; }
.sub-panel input:focus { outline: none; border-color: var(--sage); }

.sub-manage { margin-top: 12px; }
.linklike { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px 0; font-family: var(--serif); }
.linklike:hover { color: var(--ink); }
.linklike.danger { color: #b5524a; margin-left: 4px; }

.acct-foot { margin-top: 40px; }

@media (max-width: 700px) {
  .news { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .news { grid-template-columns: 1fr; }
  .acct-hero { flex-direction: column; text-align: center; }
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer { padding: 40px 0 56px; text-align: center; }
.site-footer .socials { justify-content: center; }
.site-footer .copy { font-size: 12px; color: var(--muted); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links {
    position: fixed; inset: 64px 0 auto 0;
    background: #fff; flex-direction: column; align-items: center;
    gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--line);
    transform: translateY(-130%); transition: transform .25s; font-size: 15px;
  }
  .nav-links.open { transform: translateY(0); }
  /* hamburger floats in the top-right corner, overlapping the logo row */
  .nav-toggle { display: flex; position: absolute; top: 16px; right: 20px; z-index: 60; }
  /* auth link moves into the slide-down menu on mobile */
  .nav-right .login, .nav-right .kmc-logout { display: none; }
  .nav-links .nav-auth { display: block; margin-top: 6px; padding-top: 20px;
    border-top: 1px solid var(--line); }
  .nav-links .nav-auth .kmc-logout { margin-left: 18px; color: var(--coral); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .about-strip .inner { grid-template-columns: 1fr; }
  .about-strip .copy { padding: 48px 28px; }
  .about-strip .photo { min-height: 340px; }
  .shop-layout { grid-template-columns: 1fr; gap: 26px; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-thumbs { flex-direction: row; }
  .pdp-thumbs .t { width: 70px; }
}
@media (max-width: 520px) {
  .grid, .grid.cols-2 { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 26px; }
  .hero-card h1 { font-size: 32px; }
}

/* ===========================================================
   Playful upgrade - handwriting sizes, floating cat stickers,
   scroll-reveal + hover animations
   =========================================================== */

/* Caveat has a small x-height, so bump the display headings up */
.hero-card h1 { font-size: 52px; line-height: 1; }
.section-title { font-size: 42px; }
.h-coral, .about-strip h2, .shop-head h1, .cart-page h1,
.account h1, .acct-hero h1, .pdp-info h1, .co-summary .head h2,
.summary h2, .account h2, .cd-head h3, .co-logo { letter-spacing: .01em; }
.about-strip h2 { font-size: 34px; }
.shop-head h1, .pdp-info h1 { font-size: 46px; }
.section-title, .hero-card h1 { font-weight: 600; }

/* scroll-reveal (JS adds .kmc-reveal then .kmc-in) */
.kmc-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.kmc-in { opacity: 1; transform: none; }

/* extra hover life */
.product .thumb { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.product:hover .thumb { transform: scale(1.04) rotate(-1.2deg); }
.btn { transition: background .15s, transform .12s cubic-bezier(.34,1.56,.64,1); }
.btn:hover { transform: translateY(-2px); }
.news a:hover { transform: translateY(-4px) rotate(-.6deg); }

@media (prefers-reduced-motion: reduce) {
  .kmc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   Colour boost + rounded corners (softer, more playful)
   =========================================================== */
/* rounder everything */
.btn { border-radius: 999px; }
.hero-card { border-radius: 26px; overflow: hidden; }
.product .thumb, .thumb, .pdp-main, .pdp-thumbs .t { border-radius: 20px; }
.ci-img, .sub-img, .co-thumb, .news .pic { border-radius: 16px; }
.qty, .opt, .co-form input, .co-form select, .sub-panel input, .co-promo,
.co-haveacct, .field input, .range { border-radius: 14px; }
.sub-panel, .promo-banner { border-radius: 18px; }
.acct-hero { border-radius: 22px; }
.cart-drawer { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.auth-card { border-radius: 20px; }
.about-strip .photo { border-radius: 22px; overflow: hidden; }

/* pastel section tints */
.featured { background: var(--pink-soft); }
.about-strip { background: var(--mint-soft); }

/* colourful accents */
.hero-card .eyebrow { color: var(--c-blue); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.about-strip h2 { color: var(--c-blue); }
.section-title { position: relative; }
.section-title::after {
  content: ""; display: block; width: 66px; height: 5px; border-radius: 6px;
  background: linear-gradient(90deg, var(--c-pink), var(--c-gold)); margin: 16px auto 0;
}
.news .tag { color: var(--c-mint); }
.badge.active { background: var(--mint-soft); color: var(--c-mint); }
.promo-banner { background: linear-gradient(120deg, var(--pink-soft), var(--lav-soft)); border-color: #f0dbe6; }
.acct-hero { background: linear-gradient(120deg, var(--pink-soft), var(--blue-soft)); }

/* ===== big cats marching in a queue across the hero banner ===== */
.hero-cats { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-cat {                    /* wrapper: walks left → right across the screen */
  position: absolute; left: 0; bottom: 8%;
  animation: march 20s linear infinite;
}
.hero-cat img {                /* image: bouncy hop while walking */
  display: block; width: 155px; height: auto; transform-origin: bottom center;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.24));
  animation: catbob .5s cubic-bezier(.3,.9,.4,1) infinite;
}
.hc1 { animation-delay:  0s;    } .hc1 img { width: 150px; }
.hc2 { animation-delay: -5s;    } .hc2 img { width: 150px; }
.hc3 { animation-delay: -10s;   } .hc3 img { width: 150px; animation-delay: -.2s; }
.hc4 { animation-delay: -15s;   } .hc4 img { width: 150px; animation-delay: -.3s; }
@keyframes march {
  from { transform: translateX(-190px); }
  to   { transform: translateX(calc(100vw + 190px)); }
}
@keyframes catbob {
  0%   { transform: translateY(0) rotate(-2.5deg) scaleY(1); }
  28%  { transform: translateY(-20px) rotate(2.5deg) scaleY(1.05); }
  52%  { transform: translateY(0) rotate(-1deg) scaleY(.9); }   /* land + squash */
  62%  { transform: translateY(0) scaleY(1.02); }
  100% { transform: translateY(0) rotate(-2.5deg) scaleY(1); }
}
@media (max-width: 760px) {
  .hero-cat img { width: 110px; }
  .hc2 img { width: 110px; } .hc4 img { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cat { animation: none; left: auto; }
  .hc1 { left: 3%; } .hc2 { left: 28%; } .hc3 { left: 53%; } .hc4 { left: 78%; }
  .hero-cat img { animation: none; }
}

/* ===== Mail Club pricing tiers ===== */
.mailclub-head { text-align: center; padding: 42px 0 4px; }
.mailclub-sub { text-align: center; color: var(--muted); margin: 0 0 36px; font-size: 15px; }
.mailclub-open { display: block; margin: 14px auto 30px; max-width: var(--wrap); text-align: center;
  font-family: var(--serif); text-transform: uppercase; letter-spacing: .14em;
  font-size: 13.5px; font-weight: 600; color: var(--coral-d);
  background: #fdf1ec; border: 1px solid #f1c8bb; border-radius: 12px; padding: 13px 20px; }
.tiers-lead { text-align: center; color: var(--c-blue); font-family: var(--display);
  font-weight: 600; font-size: 26px; margin: 0 0 24px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 980px; margin: 0 auto; padding-bottom: 84px; align-items: start; }
.plan { position: relative; text-align: center; background: #fff;
  border: 1px solid var(--line); border-radius: 22px; padding: 32px 26px;
  transition: transform .2s ease, box-shadow .2s ease; }
.plan:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.08); }
.plan-pop { border: 2px solid var(--red); box-shadow: 0 16px 38px rgba(229,52,42,.13); }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-family: var(--display); font-weight: 600;
  font-size: 16px; padding: 2px 18px; border-radius: 999px; white-space: nowrap; }
.plan-name { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--coral); margin: 0 0 4px; }
.plan-pop .plan-name { color: var(--red); }
.plan-price { font-family: var(--display); font-weight: 600; font-size: 50px; line-height: 1; color: var(--ink); margin: 0 0 20px; }
.plan-price span { font-family: var(--serif); font-size: 16px; color: var(--muted); }
.plan-feats { list-style: none; margin: 0 0 26px; padding: 0; text-align: left; }
.plan-feats li { font-size: 15px; padding: 9px 0 9px 26px; position: relative; border-bottom: 1px dashed var(--line); }
.plan-feats li:last-child { border-bottom: 0; }
.plan-feats li::before { content: "🐾"; position: absolute; left: 0; top: 9px; font-size: 12px; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; max-width: 420px; } }

/* Mail Club - product grid (3 plan cards) */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 840px; margin: 0 auto 84px; }
.plan-mini { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.4; }
@media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; max-width: 360px; } }

/* ===== Mail Club interactive tiers (kittens dropping into bowls) ===== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 960px; margin: 0 auto 84px; align-items: start; }
.tier { position: relative; text-align: center; border-radius: 26px;
  padding: 22px 20px 26px; transition: transform .2s ease, box-shadow .2s ease;
  animation: breathe 4.5s ease-in-out infinite; }
.tier:hover { transform: translateY(-6px) scale(1.03) !important; box-shadow: 0 20px 44px rgba(0,0,0,.10); animation-play-state: paused; }
.tier-basic   { background: var(--mint-soft); }
.tier-premium { background: var(--pink-soft); }
.tier-luxury  { background: var(--lav-soft); }
.tier-pop { outline: 2.5px solid #f0b3c4; outline-offset: -2.5px; }
.tier-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-pink); color: #fff; font-family: var(--display); font-weight: 600;
  font-size: 16px; padding: 2px 18px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(226,120,154,.35); }

/* reserved photo spot (swap in a real product photo later) */
.tier-photo { background: #fff; border-radius: 18px; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center; margin: 4px 0 14px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.tier-photo img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.14)); }

.tier-name { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--coral); margin: 2px 0 12px; }
.tier-quote { font-size: 15px; min-height: 44px; margin: 0 0 2px; color: var(--ink); }
.tier-quote .emo { display: inline-block; font-size: 20px; }
.tier-price { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; margin: 8px 0 2px; color: var(--ink); }
.tier-price span { font-family: var(--serif); font-size: 15px; color: var(--muted); }
.tier-feat { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.4; min-height: 34px; }

/* bowl + raining fake-sticker kittens */
.catch { position: relative; height: 128px; margin: 2px 0 8px; }
.bowl { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: auto; z-index: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); }
.drops { position: absolute; inset: 0; z-index: 2; }
.mini { position: absolute; width: 30px; height: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
  opacity: 0; transform: translateY(-190px) rotate(var(--rot,0deg));
  animation: kdrop .72s cubic-bezier(.35,1.35,.55,1) var(--d,0s) forwards; }
@keyframes kdrop {
  0%   { opacity: 0; transform: translateY(-190px) rotate(var(--rot,0deg)); }
  45%  { opacity: 1; }
  78%  { transform: translateY(9px) rotate(var(--rot,0deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot,0deg)); }
}
@keyframes shake {
  0%,100% { transform: rotate(-12deg) scale(1.05); }
  50%     { transform: rotate(12deg) scale(1.15); }
}
.shake { animation: shake .32s ease-in-out infinite; }
.shake.hard { animation-duration: .16s; }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } .mini { animation: none; opacity: 1; transform: none; } }

/* ===== Sticker Gallery ===== */
.gallery-head { text-align: center; padding: 42px 0 10px; }
.grade { max-width: var(--wrap); margin: 0 auto; padding: 10px 0 30px; }
.grade-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.grade-tag { font-family: var(--display); font-weight: 700; font-size: 30px; color: #fff;
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.grade-label { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--ink); }
.g-s { background: linear-gradient(135deg, #f6b73c, #e88a2e); }
.g-a { background: #9a7fce; }
.g-b { background: #5f97c9; }
.g-c { background: #4fa98d; }
.g-d { background: #a7a29a; }

.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sticker-card { text-align: center; }
.sticker-pic { position: relative; aspect-ratio: 1/1; border-radius: 20px;
  display: grid; place-items: center; overflow: hidden; transition: transform .2s ease; }
.sticker-card:hover .sticker-pic { transform: translateY(-4px) rotate(-1.5deg); }
.sticker-pic img { width: auto; max-width: 62%; max-height: 62%; object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.16));
  animation: stickerbob 2.4s ease-in-out infinite; }
.sticker-card:nth-child(2n) .sticker-pic img { animation-delay: -.6s; }
.sticker-card:nth-child(3n) .sticker-pic img { animation-delay: -1.2s; }
.sticker-card:nth-child(4n) .sticker-pic img { animation-delay: -1.7s; }
.sticker-card:nth-child(5n) .sticker-pic img { animation-delay: -2.1s; }
@keyframes stickerbob {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50%      { transform: translateY(-10px) rotate(1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .sticker-pic img { animation: none; } }
.grade-chip { position: absolute; top: 10px; left: 10px; z-index: 2; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.sticker-name { font-family: var(--display); font-weight: 600; font-size: 23px; color: var(--coral); margin: 12px 0 2px; }
.sticker-story { font-size: 14px; font-style: italic; color: var(--ink); margin: 0 0 8px; line-height: 1.4; min-height: 40px; }
.sticker-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 11.5px; margin-top: 2px; }
.sticker-meta span { padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sticker-meta span:nth-child(1) { background: var(--pink-soft); color: var(--c-pink); }
.sticker-meta span:nth-child(2) { background: var(--blue-soft); color: var(--c-blue); }
.sticker-meta a { color: inherit; }
.sticker-meta a:hover { text-decoration: underline; }
@media (max-width: 900px) { .sticker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sticker-grid { grid-template-columns: 1fr; } }

.mailclub-head .section-title::after { display: none; }

/* self-intro quote (slogan) */
.about-quote { font-family: var(--display); color: var(--coral); font-weight: 500;
  font-size: 27px; line-height: 1.25; margin: 0 0 22px; }
.about-quote cite { display: block; font-family: var(--serif); font-style: normal;
  font-size: 14px; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }

/* Hero Yes / No - the No button runs away, Yes keeps growing */
.yesno { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.btn-yes { transform-origin: center; will-change: transform; }
.btn-no { background: #fff; color: var(--muted); border: 1.5px solid var(--line);
  transition: transform .18s cubic-bezier(.34,1.7,.5,1); position: relative; z-index: 3; }
.btn-no:hover { color: var(--ink); }

/* smaller hero question + little description */
.hero-card h1 { font-size: 37px; line-height: 1.08; }
.hero-sub { font-size: 15px; color: var(--muted); margin: 8px 0 16px; }

/* ===== Homepage announcement band ===== */
.announce { background: linear-gradient(120deg, var(--pink-soft), var(--lav-soft)); border-bottom: 1px solid #f0dbe6; }
.announce-in { max-width: var(--wrap); margin: 0 auto; padding: 10px 28px;
  display: flex; align-items: center; gap: 12px; justify-content: center; }
.announce-in p { margin: 0; font-size: 14px; color: var(--ink); }
.announce-in b { color: var(--c-pink); }
.announce-emoji { font-size: 19px; flex: none; }
.announce-cta { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--c-pink); white-space: nowrap; flex: none; }
.announce-cta:hover { text-decoration: underline; }
.announce-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; flex: none; }
.announce-x:hover { color: var(--ink); }
@media (max-width: 680px) { .announce-in { flex-wrap: wrap; text-align: center; padding: 9px 16px; gap: 8px; }
  .announce-in p { font-size: 13px; } }

/* announcement close button on the left */
.announce-in { position: relative; }
.announce-x { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 680px) { .announce-x { top: 8px; transform: none; } }

/* checkout billing checkbox */
.co-check { display: flex; align-items: center; gap: 9px; font-size: 14px; margin: 2px 0 14px; cursor: pointer; }
.co-check input { width: auto; margin: 0; }

/* ===== stepped (accordion) checkout ===== */
.co-steps { display: grid; gap: 16px; }
.co-step { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.co-step-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  font-family: var(--display); font-weight: 600; font-size: 23px; color: var(--ink); }
.co-step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--pink-soft); color: var(--c-pink); font-size: 17px; flex: none; }
.co-step.done .co-step-num { background: var(--mint-soft); color: var(--c-mint); }
.co-step:not(.open):not(.done) { opacity: .55; }
.co-step-edit { margin-left: auto; font-family: var(--serif); font-size: 14px; color: var(--c-blue); cursor: pointer; display: none; }
.co-step.done .co-step-edit { display: inline; }
.co-step-body { padding: 0 22px 22px; }
.co-step:not(.open) .co-step-form { display: none; }
.co-step.open .co-step-summary,
.co-step:not(.done) .co-step-summary { display: none; }
.co-step.done .co-step-summary { display: block; font-size: 14px; color: var(--muted); line-height: 1.6; }

.co-sublabel { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--coral); margin: 20px 0 8px; }
.co-sublabel:first-child { margin-top: 4px; }
.co-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer; font-size: 14px; }
.co-opt input { width: auto; margin: 0; flex: none; accent-color: var(--coral); }
.co-opt:has(input:checked) { border-color: var(--coral); background: var(--pink-soft); }
.co-review { display: grid; gap: 16px; }
.co-rev-block p { margin: 0; font-size: 14px; line-height: 1.6; }

/* checkout disclaimer note */
.co-note { background: var(--yellow-soft); border: 1px solid #f0e2b8; border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 2px 0 18px; }
.co-note b { color: var(--coral); }

/* ===== richer thank-you screen ===== */
.thanks { grid-column: 1 / -1; text-align: center; padding: 56px 20px; max-width: 660px; margin: 0 auto; }
.thanks-emoji { font-size: 46px; margin-bottom: 4px; }
.thanks h2 { font-size: 36px; margin: 0 0 8px; }
.thanks-lead { color: var(--ink); font-size: 16px; line-height: 1.5; margin: 0 0 28px; }
.thanks-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 26px; text-align: left; }
.thanks-card { display: block; border-radius: 18px; padding: 20px; background: var(--pink-soft);
  transition: transform .2s ease, box-shadow .2s ease; }
.thanks-card.tn-gift { background: var(--lav-soft); }
.thanks-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.tn-emoji { font-size: 26px; display: block; margin-bottom: 6px; }
.thanks-card b { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--coral); display: block; margin-bottom: 4px; }
.thanks-card > span:last-child { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: block; }
@media (max-width: 600px) { .thanks-next { grid-template-columns: 1fr; } }

/* fancy thank-you cards: sticker pops out of a hole, jumps on hover/tap */
/* cat peeks out from BEHIND the whole card */
.thanks-next { margin-top: 74px; }
.tn-cardwrap { position: relative; }
.thanks-card { position: relative; z-index: 1; }
.tn-catwrap { position: absolute; left: 50%; top: -62px; width: 50%; z-index: 0;
  transform: translateX(-50%); transition: top .34s cubic-bezier(.3,1.7,.5,1); }
.tn-catwrap .tn-cat { display: block; width: 100%; height: auto; transform-origin: bottom center;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.18)); animation: tnPeek 2.8s ease-in-out infinite; }
@keyframes tnPeek { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.tn-cardwrap:hover .tn-catwrap,
.tn-cardwrap:active .tn-catwrap { top: -104px; }
@media (prefers-reduced-motion: reduce) { .tn-catwrap .tn-cat { animation: none; } }

/* Mail Club heading: words fade + rise in, staggered */
.anim-head .w { display: inline-block; opacity: 0; transform: translateY(16px);
  animation: wordIn .55s cubic-bezier(.2,.75,.3,1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.mailclub-head .mailclub-sub { opacity: 0; animation: subIn .6s ease .55s both; }
@keyframes subIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .anim-head .w, .mailclub-head .mailclub-sub { animation: none; opacity: 1; transform: none; }
}

/* Mail Club subheading lead line */
.mailclub-sub .ms-lead { display: block; color: var(--c-blue); font-weight: 600;
  font-size: 1.14em; margin-top: 10px; }

@media (max-width: 560px) { .mailclub-head .section-title { font-size: 30px; } }

/* ===== Mail Club tiers: silver > gold > diamond ===== */
.tier-basic   { background: linear-gradient(165deg, #f7f9fb, #e3e7ee); }
.tier-premium { background: linear-gradient(165deg, #fff2d0, #ffd79a); }
.tier-luxury  { background: linear-gradient(120deg, #ffe3f2, #ecd7ff, #d7e6ff, #d7fff2, #fff0dc, #ffe3f2);
  background-size: 320% 320%; animation: holoFlow 12s ease-in-out infinite, breathe 4.5s ease-in-out infinite, megaGlow 3.2s ease-in-out infinite; }
.tier-pop { outline: none; }

.tier-basic   .tier-name { color: #78828f; }
.tier-premium .tier-name { color: #e07a1f; }
.tier-luxury  .tier-name { color: #9a6fce; }

/* metal buttons (paw + burst behaviour kept from .join-btn) */
.tier .join-btn { color: #fff; }
.tier-basic   .join-btn         { background: linear-gradient(120deg, #aab3c1, #8792a4); box-shadow: 0 4px 12px rgba(120,130,150,.28); }
.tier-basic   .join-btn:hover   { background: linear-gradient(120deg, #c1c9d5, #9aa5b6); box-shadow: 0 10px 24px rgba(120,130,150,.34); }
.tier-basic   .join-btn:active  { background: linear-gradient(120deg, #8b95a6, #6f7b8f); }
.tier-premium .join-btn         { background: linear-gradient(120deg, #ffbe3a, #ff8a3d); box-shadow: 0 4px 14px rgba(255,150,40,.35); }
.tier-premium .join-btn:hover   { filter: brightness(1.07); box-shadow: 0 10px 26px rgba(255,150,40,.42); }
.tier-premium .join-btn:active  { filter: brightness(.94); }
.tier-luxury  .join-btn         { background: linear-gradient(120deg, #b48cf0, #f39ad2, #8fb8f2, #b48cf0);
  background-size: 220% 220%; animation: btnFlow 4s linear infinite; box-shadow: 0 4px 14px rgba(160,120,220,.32); }
.tier-luxury  .join-btn:hover   { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(160,120,220,.40); }
.tier-luxury  .join-btn:active  { filter: brightness(.95); }

/* Mega holographic + button flow */
@keyframes holoFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes btnFlow  { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@media (prefers-reduced-motion: reduce) { .tier-luxury, .tier-luxury .join-btn { animation: none; } }

/* gentle breathing on the plan cards (staggered) */
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.tier-premium { animation-delay: -1.5s; }
.tier-luxury  { animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .tier { animation: none; } .tier-luxury { animation: holoFlow 9s ease-in-out infinite; } }

/* Mega: sparkle overlay + glow */
.tier-luxury::before, .tier-luxury::after {
  content: ""; position: absolute; inset: 0 0 74px 0; border-radius: 26px 26px 0 0; pointer-events: none; z-index: 4; }
.tier-luxury::before {
  background:
    radial-gradient(circle at 14% 22%, #fff 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 82% 30%, #fff 0 2.2px, transparent 3px),
    radial-gradient(circle at 66% 78%, #fff 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 24% 64%, #fff 0 1.4px, transparent 2.2px);
  animation: sparkle 2.4s ease-in-out infinite; }
.tier-luxury::after {
  background:
    radial-gradient(circle at 88% 62%, #fff 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 40% 15%, #fff 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 55% 90%, #fff 0 2px, transparent 2.8px),
    radial-gradient(circle at 9% 82%, #fff 0 1.6px, transparent 2.4px);
  animation: sparkle 2.4s ease-in-out infinite 1.2s; }
@keyframes sparkle { 0%,100% { opacity: .12; } 50% { opacity: .95; } }
@keyframes megaGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(200,160,255,.35)); }
  50%     { filter: drop-shadow(0 0 17px rgba(255,175,225,.6)); } }
@media (prefers-reduced-motion: reduce) {
  .tier-luxury::before, .tier-luxury::after { animation: none; opacity: .55; } }

/* welcome-page account setup */
.acct-setup { max-width: 360px; margin: 6px auto 28px; text-align: left; }
.acct-intro { font-size: 14px; color: var(--muted); text-align: center; margin: 0 0 18px; line-height: 1.5; }
.acct-setup .field { margin-bottom: 14px; }
.acct-setup label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.acct-setup input { width: 100%; padding: 12px 15px; border: 1px solid #cfccc4; border-radius: 14px;
  font-family: var(--serif); font-size: 15px; color: var(--ink); background: #fff; box-sizing: border-box; }
.acct-setup input:focus { outline: none; border-color: var(--coral); }
.acct-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.acct-hint b { color: var(--c-pink); }
.w-err { color: #c8503c; font-size: 13px; margin: 0 0 8px; min-height: 15px; }
.acct-done { font-size: 15px; color: var(--ink); line-height: 1.5; margin: 0; }
.acct-done b { color: var(--c-pink); }

/* apply-for-a-kitten page */
.apply-wrap { max-width: 620px; }
.apply-form { max-width: 560px; margin: 0 auto; }
.apply-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font-family: var(--serif); font-size: 15px; color: var(--ink); resize: vertical; background: #fff; }
.apply-form textarea:focus { outline: none; border-color: var(--coral); }
.apply-drop { display: grid; place-items: center; min-height: 130px; border: 2px dashed #e3c9d4;
  border-radius: 16px; background: var(--pink-soft); cursor: pointer; overflow: hidden; text-align: center; color: var(--muted); }
.apply-drop:hover { border-color: var(--coral); }
.apply-drop img { max-width: 100%; max-height: 240px; }
.apply-done { text-align: center; max-width: 560px; margin: 40px auto; }
.apply-done .thanks-emoji { font-size: 46px; }
.apply-done h2 { font-size: 32px; margin: 6px 0 10px; }
.apply-done p { color: var(--muted); line-height: 1.55; }

/* welcome account: email shown as confirmed text */
.w-email-line { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.w-email-line b { color: var(--ink); font-weight: 600; }

/* apply-form small hint text */
.apply-hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 4px; line-height: 1.45; }

/* apply: logged-in identity line + members gate */
.apply-as { font-size: 13.5px; color: var(--muted); margin: 0 0 4px; }
.apply-as b { color: var(--ink); }
.apply-gate { text-align: center; padding: 24px 0 8px; }

/* apply: sticker number on the confirmation */
.sticker-no { font-family: var(--display); font-weight: 600; font-size: 46px; color: var(--coral);
  background: var(--pink-soft); border-radius: 16px; padding: 14px 10px; margin: 14px auto 18px; max-width: 280px; }

/* small inline note next to a sublabel */
.co-sublabel-note { font-family: var(--serif); font-weight: 400; font-size: 12.5px; color: var(--muted); }

/* ===== Home FAQ ===== */
.faq { background: #fff; }
.faq-list { max-width: 720px; margin: 8px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 44px 18px 4px;
  font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--ink); transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral); }
.faq summary::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 0; color: var(--coral); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 4px 18px; color: var(--muted); line-height: 1.6; font-size: 15px; }

/* login link inside an error message */
.w-err a, .auth-msg a { color: var(--c-blue); font-weight: 600; }

/* welcome: set-up-account heading */
.acct-setup-h { font-family: var(--display); font-weight: 600; font-size: 23px; color: var(--coral); text-align: center; margin: 0 0 4px; }
.acct-setup-sub { font-size: 13.5px; color: var(--muted); text-align: center; margin: 0 0 16px; line-height: 1.5; }

/* welcome: non-editable email display */
.w-email-fixed { margin: 0; padding: 12px 15px; border: 1px dashed #cfccc4; border-radius: 14px;
  background: #f4f1ec; color: var(--muted); font-family: var(--serif); font-size: 15px; }

/* ===== Simplified account page ===== */
.acct-sec { margin-top: 34px; }
.acct-sec > h2 { margin-bottom: 14px; }
.apply-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.apply-no { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--coral); flex: none; min-width: 78px; }
.apply-body { flex: 1; min-width: 0; }
.apply-what { margin: 0; font-size: 14px; color: var(--ink); }
.apply-story { margin: 3px 0 0; font-size: 13px; }
.apply-badge { flex: none; font-size: 12px; background: var(--yellow-soft); color: var(--c-gold);
  padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.acct-settings { display: grid; gap: 18px; max-width: 460px; }
.set-label { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.set-block .field { margin-bottom: 8px; }
.acct-settings input, .sub-panel input { width: 100%; padding: 10px 13px; border: 1px solid #cfccc4;
  border-radius: 12px; font-family: var(--serif); font-size: 14px; box-sizing: border-box; background: #fff; }
.acct-settings input:focus, .sub-panel input:focus { outline: none; border-color: var(--coral); }
.set-msg { font-size: 12.5px; min-height: 15px; margin-bottom: 6px; }
.set-msg.ok { color: var(--sage-d); }
.set-msg.err { color: var(--red); }

/* ===========================================================
   ONE PAGE: full-screen home banner  ⇄  Mail Club view
   .screen wraps logo + nav + announce + hero and fills the
   viewport exactly; "Yes, please!" swaps in #clubView.
   =========================================================== */
[hidden] { display: none !important; }

.home .screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* the hero eats whatever height the logo / nav / announce leave over */
.home .screen > .hero { flex: 1 0 auto; display: flex; }
.home .screen > .hero > .hero-inner { flex: 1; min-height: 0; }

/* in Mail Club view .screen is only the sticky header, so drop the box
   entirely — otherwise position:sticky would stop working inside it */
body:not(.home) .screen { display: contents; }

#clubView { animation: viewIn .34s ease both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #clubView { animation: none; } }

/* ===========================================================
   Round badge logo + "Kitten Mail Club" wordmark (Lora 600)
   =========================================================== */

/* nav lockup: small badge + wordmark side by side */
.brand-badge { width: 44px; height: 44px; display: block; flex: none; }
.brand-name  {
  font-family: var(--name); font-weight: 400;
  font-size: 20px; letter-spacing: .005em;
  text-transform: lowercase;
  color: var(--ink); white-space: nowrap;
}


@media (max-width: 520px) {
  .brand-badge   { width: 38px; height: 38px; }
  .brand-name    { font-size: 17px; }
}

/* ===========================================================
   Mail Club colour bands
   Palette sampled from the reference mail-club page: full-bleed
   blocks of colour instead of one long cream page.
   =========================================================== */
:root {
  --band-cream: #fffdf5;   /* warm paper base            */
  --band-pink:  #ffc9f0;   /* headline strip             */
  --band-rose:  #ef87d4;   /* marquee                    */
  --band-peri:  #c6d3ea;   /* plans                      */
}

.band { padding: 54px 0 58px; }
.band-cream { background: var(--band-cream); }
.band-pink  { background: var(--band-pink);  padding: 40px 0 42px; }
.band-peri  { background: var(--band-peri); }

/* band 1 - headline */
.band-pink .mailclub-head { text-align: center; padding: 0; }
.band-pink .section-title { color: #b8324f; margin: 0 0 10px; }
.band-pink .section-title::after { display: none; }
.band-pink .mailclub-open {
  background: rgba(255,255,255,.62); border-color: rgba(184,50,79,.28);
  color: #a62b46; margin: 0 auto; max-width: 640px;
}

/* band 3 - scrolling rose strip */
.marquee {
  background: var(--band-rose); color: var(--band-cream);
  padding: 15px 0; overflow: hidden; white-space: nowrap;
}
.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee-run {
  font-family: var(--display); font-weight: 600;
  font-size: 30px; letter-spacing: .01em; padding-right: 12px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* band 4 - plans sit as white cards on periwinkle */
.band-peri .tiers-lead { color: #33507e; }
.band-peri .plan2 { border-color: rgba(51,80,126,.18); box-shadow: 0 10px 28px rgba(51,80,126,.14); }
.band-peri .plans2-note { color: #4a5f85; }

/* the club view supplies its own backgrounds, so drop the old outer margins */
#clubView .club-intro { margin: 0 auto; }
#clubView .club-cta   { margin: 34px 0 0; }
#clubView .club-plans { scroll-margin-top: 78px; }

@media (max-width: 520px) {
  .band { padding: 40px 0 44px; }
  .marquee-run { font-size: 23px; }
}

/* the footer closes the band rhythm instead of dropping to plain white */
.site-footer { background: var(--band-pink); }
.site-footer .copy { color: #8d4b6b; }
.site-footer .socials a { border-color: #b8324f; color: #b8324f; }
.site-footer .socials a:hover { background: #b8324f; color: var(--band-pink); }

/* ===========================================================
   Mail Club typography — script for big moments, airy serif for
   reading, bold sans for anything clickable (per the reference).
   Scoped to #clubView so the home banner keeps its own voice.
   =========================================================== */
#clubView .section-title,
#clubView .tiers-lead,
.howto-title,
.marquee-run {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: .01em;
}
#clubView .section-title { font-size: 62px; line-height: 1.05; }
.marquee-run  { font-size: 34px; }
#clubView .tiers-lead { font-size: 38px; margin-bottom: 30px; }

/* airy serif body, the reference's wide-tracked look */
#clubView .club-copy p,
#clubView .club-inside li,
#clubView .plan2-desc,
.howto-q p {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: .012em;
  line-height: 1.72;
  font-size: 16.5px;
}
#clubView .club-copy p.club-inside-label,
#clubView .club-inside-label {
  font-family: var(--serif); font-weight: 600; font-size: 16.5px;
  letter-spacing: .02em; color: var(--ink);
}

/* anything you click is bold sans */
#clubView .btn, .mailclub-open, .plan2-price, .plan2-badge, .howto-q h3 {
  font-family: var(--sans);
}
#clubView .btn   { font-size: 15px; font-weight: 600; letter-spacing: .015em; padding: 14px 34px; }
.plan2-price     { font-weight: 700; font-size: 34px; letter-spacing: -.01em; }
.plan2-price span{ font-family: var(--sans); font-weight: 500; font-size: 13px; margin-left: 6px; }
.plan2-name      { font-family: var(--lora); font-weight: 600; font-size: 22px; }
.plan2-badge     { font-weight: 600; font-size: 11.5px; letter-spacing: .04em; }
.mailclub-open   { font-weight: 600; font-size: 13px; letter-spacing: .12em; }

/* ---------- How it works ---------- */
.howto-title { text-align: center; color: #b8324f; font-size: 58px; margin: 0 0 34px; }
.howto-q { max-width: 780px; margin: 0 auto 26px; }
.howto-q h3 {
  font-size: 16.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 8px;
}
.howto-q p { margin: 0; color: var(--ink); }

@media (max-width: 620px) {
  #clubView .section-title { font-size: 46px; }
  .howto-title { font-size: 42px; }
  #clubView .tiers-lead { font-size: 30px; }
  .marquee-run { font-size: 25px; }
  #clubView .club-copy p, #clubView .club-inside li, .howto-q p { font-size: 15.5px; }
}
/* keep "+ The Idea Box" from breaking mid-phrase */
.plan2-plus { display: block; }

/* ===========================================================
   Choose your pack — stacked envelope cards with a price tag
   =========================================================== */
.packs-title {
  font-family: var(--lora); font-weight: 700;
  font-size: 30px; letter-spacing: .06em; color: var(--ink);
  text-align: center; margin: 0;
}
.packs-sub {
  font-family: var(--script); font-size: 34px; color: #b8324f;
  text-align: center; margin: 2px 0 46px;
}
.packs-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 34px; max-width: 900px; margin: 0 auto;
}
.pack { display: block; position: relative; text-align: center; padding-top: 10px; }

.pack-tag {
  position: absolute; top: 0; left: 8px; z-index: 2;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: #7a2450; background: var(--band-pink);
  padding: 6px 14px; border-radius: 3px;
}

/* the card, with two offset copies behind it faking a stack of envelopes */
.pack-card {
  display: block; position: relative;
  background: #aebee2; color: #2f4a7d;
  padding: 30px 20px 26px; border-radius: 4px;
  margin: 22px 16px 0 0; transform: rotate(-2.5deg);
  box-shadow: 7px -7px 0 -1px #a2b4dc, 14px -14px 0 -2px #96a9d6;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pack:hover .pack-card { transform: rotate(-2.5deg) translateY(-5px); }

.pack-brand {
  display: block; font-family: var(--serif); font-size: 14px; letter-spacing: .04em;
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px solid rgba(47,74,125,.42);
}
.pack-len { display: block; font-family: var(--script); font-size: 30px; line-height: 1; }

.pack-rate {
  display: block; margin-top: 18px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--muted);
}
.pack-gift {
  display: block; margin-top: 4px;
  font-family: var(--script); font-size: 24px; color: var(--ink);
}

/* How it works now sits on the periwinkle band, like the reference */
.band-peri .howto-title { color: #2f4a7d; }
.band-peri .howto-q h3  { color: #23386b; }

@media (max-width: 760px) {
  .packs-row { grid-template-columns: 1fr; max-width: 300px; gap: 40px; }
  .packs-title { font-size: 25px; }
  .packs-sub { font-size: 28px; margin-bottom: 34px; }
}

/* ===========================================================
   Headline band — one line of high-contrast serif, the way the
   reference does it (no separate script heading above it).
   =========================================================== */
.band-pink { padding: 34px 0 36px; }
.signup-line {
  font-family: var(--serif-display);
  font-size: 40px; font-weight: 500; line-height: 1.25;
  color: #e5342a; text-align: center;
  margin: 0; letter-spacing: .01em;
}
.signup-line b { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.signup-line .sw-soft { font-weight: 400; }

/* the Q&A is serif in the reference, not sans */
.howto-q h3 { font-family: var(--serif-display); font-weight: 700; font-size: 20px; letter-spacing: 0; }
.packs-title { font-family: var(--serif-display); font-weight: 700; letter-spacing: .02em; font-size: 33px; }
.plan2-name  { font-family: var(--serif-display); font-weight: 600; }
.pack-brand  { font-family: var(--serif-display); }

/* Yellowtail sits lower than Parisienne did, so the script sizes come down */
#clubView .tiers-lead { font-size: 32px; }
.howto-title { font-size: 46px; }
.packs-sub   { font-size: 29px; }
.marquee-run { font-size: 29px; }
.pack-len    { font-size: 26px; }
.pack-gift   { font-size: 21px; }

/* ---------- Already a member ---------- */
.member { text-align: center; }
.member-title { font-family: var(--serif-display); font-weight: 700; font-size: 30px;
  color: var(--ink); margin: 0 0 10px; letter-spacing: .01em; }
.member-copy { font-family: var(--serif); font-size: 16px; line-height: 1.7;
  color: var(--muted); max-width: 520px; margin: 0 auto 26px; }

@media (max-width: 620px) {
  .signup-line { font-size: 27px; }
  .member-title { font-size: 24px; }
  .howto-title { font-size: 36px; }
}
/* Lobster Two only ships an italic 700 that matches the reference's script */
#clubView .section-title, #clubView .tiers-lead,
.howto-title, .marquee-run, .packs-sub, .pack-len, .pack-gift {
  font-style: italic; font-weight: 700;
}

/* ===========================================================
   Monthly price row — two shipping regions side by side,
   laid out the way the reference does it.
   =========================================================== */
.pricerow { display: flex; gap: 30px; flex-wrap: wrap; margin: 26px 0 0; }
.pricecol { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
#clubView .club-copy p.pricecol-amount,
.pricecol-amount {
  font-family: var(--sans); font-weight: 700; font-size: 28px;
  line-height: 1.2; color: var(--red); margin: 0; letter-spacing: -.01em;
}
#clubView .club-copy p.pricecol-amount span,
.pricecol-amount span {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  color: var(--muted); margin-left: 5px; letter-spacing: 0;
}
.pricecol .btn { min-width: 190px; text-align: center; }
.pricerow-note {
  font-family: var(--serif); font-size: 14px; color: var(--muted);
  margin: 18px 0 0; letter-spacing: .012em;
}
@media (max-width: 520px) {
  .pricerow { gap: 22px; }
  .pricecol { width: 100%; }
  .pricecol .btn { width: 100%; }
}

/* ===========================================================
   One display face, not three.  The club view had headings in
   Playfair, in Lobster Two and in Lora at the same time, which read
   as three different sites stacked.  Playfair Display carries every
   heading now, EB Garamond carries every line of reading, and
   Poppins carries anything you click.  Lobster Two is retired here.
   =========================================================== */
#clubView .section-title,
#clubView .tiers-lead,
.howto-title,
.marquee-run,
.packs-sub,
.pack-len,
.pack-gift,
.packs-title,
.pack-brand,
.plan2-name,
.member-title,
.signup-line,
.howto-q h3 {
  font-family: var(--serif-display);
  font-style: normal;
}
/* the script sizes were set for a face that sat low; Playfair needs less */
#clubView .section-title { font-size: 50px; }
#clubView .tiers-lead    { font-size: 27px; font-weight: 500; }
.howto-title { font-size: 40px; font-weight: 600; letter-spacing: .01em; }
.marquee-run { font-size: 23px; font-weight: 500; letter-spacing: .015em; }
.packs-sub   { font-size: 23px; font-weight: 500; }
.pack-len    { font-size: 23px; font-weight: 600; }
.pack-gift   { font-size: 16px; font-weight: 500; letter-spacing: .01em; }

/* The month-and-volume line was taken out on 2026-08-31: this section has to
   hold all year, so nothing on it names a month. */
@media (max-width: 620px) {
  #clubView .section-title { font-size: 38px; }
  .howto-title { font-size: 32px; }
  #clubView .tiers-lead { font-size: 23px; }
  .marquee-run { font-size: 19px; }
}


/* ===========================================================
   What's inside — one running line, the ✦ doing the separating
   rather than sitting in front of every item on its own row.
   =========================================================== */
.club-inside { display: block; margin: 0 0 18px; }
.club-inside li {
  display: inline; position: static; padding-left: 0;
}
.club-inside li::before { content: none; }
.club-inside li + li::before {
  content: "✦";
  position: static;
  color: var(--coral); font-size: 10.5px;
  margin: 0 .5em 0 .38em; vertical-align: .1em;
}

/* The floating version of this picture was taken out on 2026-08-31: Cindy
   preferred the single generated flat-lay. The pieces are still in
   site/assets/club/ if it is ever wanted back. */