/** Shopify CDN: Minification failed

Line 37:0 All "@import" rules must come first

**/
/* ============================================================
   THE PLANT ECOLOGIST — SUBSCRIPTION STYLESHEET
   Matches theplantecologist.com branding
   Add to: Assets > tpe-subscription.css
   Reference in layouts: {{ 'tpe-subscription.css' | asset_url | stylesheet_tag }}
   ============================================================ */

/* —— TOKENS —— */
:root {
  --tpe-cream:       #F5F0E8;
  --tpe-cream-mid:   #EDE6D6;
  --tpe-cream-dark:  #DDD5BF;
  --tpe-forest:      #2C4A2E;
  --tpe-forest-mid:  #3D6440;
  --tpe-forest-lt:   #567A59;
  --tpe-sage:        #7A9E7E;
  --tpe-sage-lt:     #B0C8B2;
  --tpe-ink:         #2D2D2D;
  --tpe-muted:       #6B6B5E;
  --tpe-warm:        #8A8070;
  --tpe-bark:        #9B7B54;
  --tpe-border:      rgba(44,74,46,0.15);
  --tpe-border-md:   rgba(44,74,46,0.28);
  --tpe-border-str:  rgba(44,74,46,0.45);
  --tpe-serif:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --tpe-sans:        'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --tpe-radius:      3px;
  --tpe-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* —— FONT IMPORTS —— */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* —— RESETS (scoped) —— */
.tpe-sub * { box-sizing: border-box; }
.tpe-sub { font-family: var(--tpe-sans); color: var(--tpe-ink); background: #ffffff; }

/* —— BUTTONS —— */
.tpe-btn {
  display: inline-block;
  font-family: var(--tpe-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1.5px solid var(--tpe-forest);
  color: var(--tpe-forest);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--tpe-transition);
  border-radius: var(--tpe-radius);
  line-height: 1;
  white-space: nowrap;
}
.tpe-btn:hover { background: var(--tpe-forest); color: #EDF4EE; }
.tpe-btn--sm { padding: 9px 18px; font-size: 11px; }
.tpe-btn--full { width: 100%; text-align: center; display: block; }
.tpe-btn--muted {
  border-color: var(--tpe-border-md);
  color: var(--tpe-muted);
}
.tpe-btn--muted:hover { background: var(--tpe-cream-dark); color: var(--tpe-forest); border-color: var(--tpe-forest); }
.tpe-btn--ghost {
  border: none;
  background: none;
  color: var(--tpe-muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--tpe-sans);
}
.tpe-btn--ghost:hover { color: var(--tpe-forest); }
.tpe-btn--danger {
  border-color: rgba(150,50,50,0.3);
  color: #8B3A3A;
}
.tpe-btn--danger:hover { background: #8B3A3A; color: #fff; border-color: #8B3A3A; }

/* —— TYPOGRAPHY —— */
.tpe-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tpe-sage);
  font-weight: 500;
  font-family: var(--tpe-sans);
  margin-bottom: 10px;
  display: block;
}
.tpe-h1 { font-family: var(--tpe-serif); font-size: 36px; line-height: 1.15; color: var(--tpe-ink); }
.tpe-h2 { font-family: var(--tpe-serif); font-size: 26px; line-height: 1.2; color: var(--tpe-ink); }
.tpe-h3 { font-family: var(--tpe-serif); font-size: 20px; line-height: 1.25; color: var(--tpe-ink); }
.tpe-body { font-size: 14px; line-height: 1.75; color: var(--tpe-muted); }
.tpe-body--sm { font-size: 12px; line-height: 1.65; color: var(--tpe-muted); }
.tpe-italic { font-family: var(--tpe-serif); font-style: italic; color: var(--tpe-forest); }

/* —— LAYOUT —— */
.tpe-section { padding: 64px 48px; border-bottom: 1px solid var(--tpe-border); }
.tpe-section--tight { padding: 40px 48px; }
.tpe-section--dark { background: var(--tpe-cream-mid); }
@media (max-width: 768px) {
  .tpe-section { padding: 48px 20px; }
  .tpe-section--tight { padding: 32px 20px; }
  .tpe-h1 { font-size: 26px; }
  .tpe-h2 { font-size: 22px; }
}

/* —— FORM ELEMENTS —— */
.tpe-input, .tpe-select {
  font-family: var(--tpe-sans);
  font-size: 14px;
  color: var(--tpe-ink);
  background: var(--tpe-cream);
  border: 1px solid var(--tpe-border-md);
  border-radius: var(--tpe-radius);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--tpe-transition);
  -webkit-appearance: none;
}
.tpe-input:focus, .tpe-select:focus { border-color: var(--tpe-forest); }
.tpe-input-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpe-muted);
  display: block;
  margin-bottom: 6px;
}
.tpe-field { margin-bottom: 18px; }

/* —— NOTICE BOXES —— */
.tpe-notice {
  font-size: 13px;
  padding: 12px 16px;
  border-radius: var(--tpe-radius);
  border: 1px solid var(--tpe-border-md);
  margin: 12px 0;
  line-height: 1.6;
}
.tpe-notice--success { background: rgba(44,74,46,0.06); border-color: rgba(44,74,46,0.25); color: var(--tpe-forest); }
.tpe-notice--warn { background: rgba(155,123,84,0.08); border-color: rgba(155,123,84,0.3); color: var(--tpe-bark); }
.tpe-notice--error { background: rgba(139,58,58,0.06); border-color: rgba(139,58,58,0.25); color: #8B3A3A; }

/* —— CARDS —— */
.tpe-card {
  background: var(--tpe-cream);
  border: 1px solid var(--tpe-border-md);
  border-radius: var(--tpe-radius);
  padding: 24px;
}
.tpe-card--featured { border: 1.5px solid var(--tpe-forest); background: rgba(44,74,46,0.025); }
.tpe-card--flat { background: var(--tpe-cream-mid); border-color: var(--tpe-border); }

/* —— TAG PILLS —— */
.tpe-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--tpe-forest);
  color: #EAF2EA;
  padding: 4px 10px;
  border-radius: 1px;
  margin: 3px 3px 3px 0;
}
.tpe-tag--sage { background: var(--tpe-sage); }
.tpe-tag--outline {
  background: transparent;
  color: var(--tpe-forest);
  border: 1px solid var(--tpe-border-md);
}
.tpe-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
}
.tpe-status-pill--active { background: #D4E8D4; color: var(--tpe-forest); }
.tpe-status-pill--paused { background: #F0E8D4; color: var(--tpe-bark); }
.tpe-status-pill--preparing { background: var(--tpe-cream-dark); color: var(--tpe-muted); }
.tpe-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* —— QUIZ OPTION CARDS —— */
.tpe-opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.tpe-opt-card {
  border: 1.5px solid var(--tpe-border-md);
  border-radius: var(--tpe-radius);
  padding: 20px 16px;
  cursor: pointer;
  transition: all var(--tpe-transition);
  background: var(--tpe-cream);
}
.tpe-opt-card:hover { border-color: var(--tpe-forest-lt); background: rgba(122,158,126,0.06); }
.tpe-opt-card.is-chosen { border: 2px solid var(--tpe-forest); background: rgba(44,74,46,0.04); }
.tpe-opt-card__img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 12px;
  background: var(--tpe-cream-mid);
  display: block;
}
.tpe-opt-card__name { font-size: 13px; font-weight: 500; color: var(--tpe-ink); margin-bottom: 3px; }
.tpe-opt-card__desc { font-size: 11px; color: var(--tpe-muted); line-height: 1.5; }
@media (max-width: 620px) { .tpe-opt-grid { grid-template-columns: 1fr; } }

/* —— PROGRESS BAR —— */
.tpe-progress { margin-bottom: 44px; }
.tpe-progress__track { height: 2px; background: var(--tpe-cream-dark); border-radius: 2px; }
.tpe-progress__fill { height: 100%; background: var(--tpe-forest); border-radius: 2px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.tpe-progress__labels { display: flex; justify-content: space-between; margin-top: 8px; }
.tpe-progress__label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tpe-cream-dark); transition: color 0.3s; }
.tpe-progress__label.is-active { color: var(--tpe-forest); }
.tpe-progress__label.is-done { color: var(--tpe-sage); }

/* —— QUIZ STEPS —— */
.tpe-quiz-step { display: none; animation: tpe-slide-in 0.32s cubic-bezier(0.4,0,0.2,1); }
.tpe-quiz-step.is-active { display: block; }
@keyframes tpe-slide-in { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }

/* —— SUBSCRIPTION PORTAL COMPONENTS —— */
.tpe-portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .tpe-portal-grid { grid-template-columns: 1fr; } }

.tpe-portal-stat { background: var(--tpe-cream-mid); border-radius: var(--tpe-radius); padding: 18px 20px; }
.tpe-portal-stat__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tpe-warm); margin-bottom: 6px; }
.tpe-portal-stat__value { font-family: var(--tpe-serif); font-size: 18px; color: var(--tpe-ink); }
.tpe-portal-stat__sub { font-size: 11px; color: var(--tpe-muted); margin-top: 3px; }
.tpe-portal-stat__link { font-size: 11px; color: var(--tpe-forest); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; margin-top: 8px; display: inline-block; }

.tpe-divider { height: 1px; background: var(--tpe-border); margin: 28px 0; }

.tpe-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* —— PAST BOXES —— */
.tpe-past-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tpe-past-card {
  border: 1px solid var(--tpe-border-md);
  border-radius: var(--tpe-radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--tpe-transition);
}
.tpe-past-card:hover { border-color: var(--tpe-forest-lt); }
.tpe-past-card.is-open { border-color: var(--tpe-forest); }
.tpe-past-card__season { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tpe-sage); margin-bottom: 3px; }
.tpe-past-card__title { font-size: 13px; font-weight: 500; color: var(--tpe-ink); margin-bottom: 2px; }
.tpe-past-card__date { font-size: 11px; color: var(--tpe-warm); }
.tpe-past-card__detail { display: none; font-size: 11px; color: var(--tpe-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tpe-border); line-height: 1.55; }
.tpe-past-card.is-open .tpe-past-card__detail { display: block; }
@media (max-width: 640px) { .tpe-past-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .tpe-past-grid { grid-template-columns: 1fr; } }

/* —— PROFILE EDIT PANEL —— */
.tpe-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 500px) { .tpe-profile-grid { grid-template-columns: 1fr; } }
.tpe-profile-pill { background: var(--tpe-cream-mid); padding: 10px 14px; border-radius: var(--tpe-radius); }
.tpe-profile-pill__label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tpe-warm); margin-bottom: 3px; }
.tpe-profile-pill__value { font-size: 13px; font-weight: 500; color: var(--tpe-ink); }

/* —— BED SIZE PRICING TABLE —— */
.tpe-pricing-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; }
.tpe-pricing-table th { text-align: left; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tpe-warm); padding: 8px 12px; border-bottom: 1px solid var(--tpe-border-md); font-weight: 400; }
.tpe-pricing-table td { padding: 10px 12px; border-bottom: 1px solid var(--tpe-border); color: var(--tpe-ink); }
.tpe-pricing-table tr:last-child td { border-bottom: none; }
.tpe-pricing-table tr.is-current td { background: rgba(44,74,46,0.04); font-weight: 500; }
.tpe-pricing-table td.tpe-price { font-family: var(--tpe-serif); font-size: 16px; }

/* —— PLANT CHIPS —— */
.tpe-plant-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tpe-plant-chip { font-size: 12px; background: var(--tpe-cream-dark); border-radius: 2px; padding: 4px 10px; color: var(--tpe-ink); }

/* —— LOADING STATE —— */
.tpe-loading { text-align: center; padding: 40px 20px; color: var(--tpe-muted); font-size: 14px; font-style: italic; }
.tpe-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--tpe-cream-dark); border-top-color: var(--tpe-forest); border-radius: 50%; animation: tpe-spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes tpe-spin { to { transform: rotate(360deg); } }

/* —— PRODUCT HERO (subscription page) —— */
.tpe-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.tpe-hero__media { background: var(--tpe-cream-mid); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.tpe-hero__media-img { width: 100%; height: 100%; object-fit: cover; }
.tpe-hero__media-placeholder {
  width: 100%; height: 100%; min-height: 400px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tpe-cream-mid);
  color: var(--tpe-cream-dark); font-size: 13px; font-style: italic;
}
.tpe-hero__content { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
@media (max-width: 768px) {
  .tpe-hero { grid-template-columns: 1fr; }
  .tpe-hero__media { min-height: 280px; }
  .tpe-hero__content { padding: 36px 20px; }
}

/* —— YEAR ARC TIMELINE —— */
.tpe-arc { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--tpe-border-str); border-radius: var(--tpe-radius); overflow: hidden; }
.tpe-arc__card { padding: 24px 20px; border-right: 1px solid var(--tpe-border); }
.tpe-arc__card:last-child { border-right: none; }
.tpe-arc__q { font-family: var(--tpe-serif); font-size: 18px; color: var(--tpe-ink); margin: 4px 0; }
.tpe-arc__month { font-size: 11px; color: var(--tpe-warm); margin-bottom: 14px; }
.tpe-arc__rule { height: 1px; background: var(--tpe-cream-dark); margin-bottom: 14px; }
.tpe-arc__veg { font-size: 12px; font-weight: 500; color: var(--tpe-ink); margin-bottom: 2px; }
.tpe-arc__companion { font-size: 11px; color: var(--tpe-muted); margin-bottom: 8px; line-height: 1.5; }
.tpe-arc__slash { font-size: 10px; color: var(--tpe-warm); font-style: italic; margin: 5px 0; }
.tpe-arc__role { display: inline-block; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; background: var(--tpe-forest); color: #EAF2EA; padding: 3px 8px; border-radius: 1px; }
/* Tablet and below: use horizontal scroll via .tpe-scroll-row--arc instead of multi-row grid.
   These rules apply only if .tpe-arc is NOT also a scroll row (defensive fallback). */
@media (max-width: 768px) {
  .tpe-arc:not(.tpe-scroll-row--arc) { grid-template-columns: 1fr 1fr; }
  .tpe-arc:not(.tpe-scroll-row--arc) .tpe-arc__card:nth-child(2) { border-right: none; }
  .tpe-arc:not(.tpe-scroll-row--arc) .tpe-arc__card:nth-child(3) { border-right: 1px solid var(--tpe-border); border-top: 1px solid var(--tpe-border); }
  .tpe-arc:not(.tpe-scroll-row--arc) .tpe-arc__card:nth-child(4) { border-right: none; border-top: 1px solid var(--tpe-border); }
}
@media (max-width: 480px) {
  .tpe-arc:not(.tpe-scroll-row--arc) { grid-template-columns: 1fr; }
  .tpe-arc:not(.tpe-scroll-row--arc) .tpe-arc__card { border-right: none; border-bottom: 1px solid var(--tpe-border); }
  .tpe-arc:not(.tpe-scroll-row--arc) .tpe-arc__card:last-child { border-bottom: none; }
}

/* —— IMAGE PLACEHOLDER —— */
.tpe-img-placeholder {
  background: var(--tpe-cream-mid);
  border: 1px dashed var(--tpe-border-md);
  border-radius: var(--tpe-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tpe-warm); font-size: 12px; font-style: italic;
  text-align: center; padding: 16px;
}
.tpe-img-placeholder__hint { font-size: 10px; color: var(--tpe-cream-dark); margin-top: 4px; }

/* ============================================================
   RESPONSIVE CARD ROWS
   Desktop (≥769px): static CSS grid, columns set per variant.
   Mobile (≤768px):  horizontal flex scroll with snap + edge peek.
   ============================================================ */

/* —— DESKTOP: static grids per variant —— */
.tpe-scroll-row {
  display: grid;
  gap: 16px;
}
.tpe-scroll-row--box     { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tpe-scroll-row--science { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tpe-scroll-row--pricing { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; margin-left: auto; margin-right: auto; }
/* Arc keeps its own .tpe-arc grid; .tpe-scroll-row--arc is just a marker for mobile */
.tpe-scroll-row--arc { display: block; }

/* —— MOBILE: horizontal scroll with snap and peek —— */
@media (max-width: 768px) {
  .tpe-scroll-row,
  .tpe-scroll-row--box,
  .tpe-scroll-row--science,
  .tpe-scroll-row--pricing,
  .tpe-scroll-row--arc {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    /* Negative margins let cards bleed to the screen edges,
       creating proper visual peek without breaking section padding */
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 16px 20px;
    scroll-padding-left: 20px;
    /* Hide scrollbar but keep scroll functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tpe-scroll-row::-webkit-scrollbar,
  .tpe-scroll-row--arc::-webkit-scrollbar { display: none; }

  /* Default snap/peek width for direct children */
  .tpe-scroll-row > *,
  .tpe-scroll-row--arc > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Per-variant peek tuning */
  .tpe-scroll-row--box     > * { flex: 0 0 70%; }
  .tpe-scroll-row--science > * { flex: 0 0 84%; }
  .tpe-scroll-row--pricing > * { flex: 0 0 80%; }
  .tpe-scroll-row--arc     > * { flex: 0 0 78%; }

  /* Unwrap the .tpe-arc border/overflow so cards can scroll free */
  .tpe-arc.tpe-scroll-row--arc {
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .tpe-arc.tpe-scroll-row--arc > .tpe-arc__card {
    border: 1px solid var(--tpe-border-str);
    border-radius: var(--tpe-radius);
    border-top: 1px solid var(--tpe-border-str);
  }
}

/* ============================================================
   CARD CONTENT STYLES
   Extracted from inline styles for proper CSS-driven layout.
   ============================================================ */

/* —— BOX CONTENTS CARDS (What's in the box) —— */
.tpe-box-card { text-align: center; padding: 20px 14px; }
.tpe-box-card__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--tpe-ink);
  margin-bottom: 3px;
}
.tpe-box-card__desc {
  font-size: 11px;
  color: var(--tpe-muted);
  line-height: 1.5;
}

/* —— SCIENCE CARDS —— */
.tpe-science-card__num {
  font-family: var(--tpe-serif);
  font-size: 44px;
  color: var(--tpe-cream-dark);
  line-height: 1;
  margin-bottom: 14px;
}
.tpe-science-card__taxon {
  font-size: 12px;
  font-weight: 500;
  color: var(--tpe-forest);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.tpe-science-card__body {
  font-size: 13px;
  color: var(--tpe-ink);
  line-height: 1.7;
  margin-bottom: 10px;
}
.tpe-science-card__cite {
  font-size: 11px;
  font-style: italic;
  color: var(--tpe-warm);
}

/* —— PRICING CARDS —— */
.tpe-price-card { position: relative; display: flex; flex-direction: column; }
.tpe-price-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.tpe-price-card__badge .tpe-tag { font-size: 9px; padding: 3px 10px; }
.tpe-price-card__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpe-muted);
  margin-bottom: 6px;
}
.tpe-price-card__size {
  font-size: 13px;
  font-weight: 500;
  color: var(--tpe-ink);
  margin-bottom: 2px;
}
.tpe-price-card__detail {
  font-size: 11px;
  color: var(--tpe-muted);
  margin-bottom: 16px;
}
.tpe-price-card__rule {
  height: 1px;
  background: var(--tpe-border);
  margin-bottom: 16px;
}
.tpe-price-card__rule--dark { background: var(--tpe-border-md); }
.tpe-price-card__intro {
  font-family: var(--tpe-serif);
  font-size: 13px;
  color: var(--tpe-muted);
  margin-bottom: 2px;
}
.tpe-price-card__discount {
  font-family: var(--tpe-serif);
  font-size: 30px;
  color: var(--tpe-forest);
  line-height: 1;
  margin-bottom: 8px;
}
.tpe-price-card__then {
  font-size: 12px;
  color: var(--tpe-muted);
  margin-bottom: 16px;
}
/* Pin button to bottom so all cards align even with different content lengths */
.tpe-price-card .tpe-btn--full { margin-top: auto; }

/* —— PRICING CARD SCALE EFFECTS (desktop only) —— */
@media (min-width: 769px) {
  .tpe-price-card {
    transition: transform var(--tpe-transition), box-shadow var(--tpe-transition);
  }
  .tpe-price-card:hover {
    transform: scale(1.04);
    z-index: 2;
    box-shadow: 0 6px 24px rgba(44,74,46,0.13);
  }
  /* Large bed card always appears as if hovered */
  .tpe-card--featured.tpe-price-card {
    transform: scale(1.04);
    z-index: 1;
    box-shadow: 0 6px 24px rgba(44,74,46,0.13);
  }
  .tpe-card--featured.tpe-price-card:hover {
    transform: scale(1.06);
    z-index: 2;
  }
}

/* —— YEAR ARC CARD CONTENT —— */
.tpe-arc__eyebrow { margin-bottom: 2px; }
.tpe-arc__desc {
  font-size: 12px;
  color: var(--tpe-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.tpe-arc__footnote {
  font-size: 13px;
  color: var(--tpe-muted);
  font-style: italic;
  margin-top: 24px;
  border-left: 3px solid var(--tpe-sage-lt);
  padding-left: 16px;
  line-height: 1.7;
  max-width: 560px;
}

/* —— HERO PROMO BOX (was inline) —— */
.tpe-hero__promo {
  background: var(--tpe-cream-mid);
  border-radius: var(--tpe-radius);
  padding: 16px 18px;
  margin-top: 4px;
}
.tpe-hero__promo-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpe-muted);
  margin-bottom: 10px;
}
.tpe-hero__promo-discount {
  font-family: var(--tpe-serif);
  font-size: 32px;
  color: var(--tpe-forest);
  line-height: 1;
}
.tpe-hero__promo-fine {
  font-size: 12px;
  color: var(--tpe-muted);
  margin-top: 4px;
}
.tpe-hero__cta-fine {
  font-size: 11px;
  color: var(--tpe-warm);
  text-align: center;
  margin-top: 4px;
}

/* —— SECTION HELPERS —— */
.tpe-section .tpe-h2 + .tpe-body,
.tpe-section .tpe-h2 { margin-bottom: 8px; }
.tpe-section__intro { margin-bottom: 32px; }

/* —— Mobile: tighter section padding for scroll rows to bleed correctly —— */
@media (max-width: 768px) {
  /* When a scroll row is inside a section, the section padding needs to allow
     the negative margins above to work without horizontal page scroll */
  .tpe-section { overflow-x: hidden; }
}

/* —— PRICING NOTES —— */
.tpe-pricing__notes { margin-top: 28px; max-width: 560px; }
.tpe-pricing__note-emphasis {
  font-size: 12px;
  color: var(--tpe-warm);
  font-style: italic;
  margin-bottom: 8px;
}
.tpe-pricing__note-fine {
  font-size: 12px;
  color: var(--tpe-muted);
  line-height: 1.7;
}