/* ============================================================
   CYOM logged-out homepage (homepage part 2). templates/index.html
   is the only page that links this file, and every selector starts
   with .hp, the page's root element, so no rule can reach the base
   nav, the base footer, the cookie banner or any other page.

   Mobile first. Each --hp-* size runs from the phone mockup (390px)
   to the desktop mockup (1280px) with clamp(), exact at both widths.

   Breakpoints:
     768px   the headline line break, 4 feelings in a row,
             testimonials and the gift strip side by side
     1024px  the hero text moves left of the seated figure, 3 tier
             cards in the desktop order, the two story photos beside
             the text
   ============================================================ */

.hp {
  /* Colours from the approved mockups; every text pair passes WCAG AA. */
  --hp-ink: #3B2F28;
  --hp-ink-soft: #5A4A3E;
  --hp-muted: #6E5E50;
  --hp-cream: #F8F4EE;
  --hp-line: #EDE3D6;
  --hp-line-strong: #E2D6C4;
  --hp-white: #FFFFFF;
  --hp-terracotta: #A9523E;        /* filled buttons and links: white 5.30:1 */
  --hp-terracotta-dark: #7F3A2A;
  --hp-accent: #B5654F;            /* decoration only: white on it is 4.25:1 */
  --hp-teal: #2F7A70;
  --hp-teal-ink: #1F5A52;
  --hp-teal-tint: #E3F0EC;
  --hp-gold: #F2D58A;
  --hp-gold-hover: #F7E3AE;
  --hp-gold-ink: #7A5B12;
  --hp-gold-card: #FBF3DE;
  --hp-gold-line: #D9B556;
  --hp-gift-line: #EBD9A6;
  --hp-hero-text: #FBF4E8;
  --hp-hero-soft: #F1E6D6;
  --hp-close-bg: #3B2F28;
  --hp-close-text: #E8DDCE;

  /* Sizes: phone (390px) to desktop (1280px). */
  --hp-kicker: clamp(12px, 11.12px + 0.2247vw, 14px);
  --hp-kicker-track: clamp(3px, 2.56px + 0.1124vw, 4px);
  /* Hero below 1024px: compact, centred above her head (390 to 1023px). */
  --hp-h1: clamp(30px, 23.84px + 1.5798vw, 40px);
  --hp-hero-sub: clamp(15px, 13.15px + 0.4739vw, 18px);
  --hp-hero-gap: clamp(12px, 9.54px + 0.6319vw, 16px);
  --hp-hero-pt: clamp(24px, 14.14px + 2.5276vw, 40px);
  /* Her head sits at 43% of the hero height; the text ends above it. */
  --hp-hero-min: clamp(740px, 690.71px + 12.638vw, 820px);
  --hp-gutter: clamp(20px, -2.79px + 5.8427vw, 72px);
  --hp-hero-btn: 16px;
  --hp-hero-btn-py: 13px;
  --hp-sec-py: clamp(52px, 36.22px + 4.0449vw, 88px);
  --hp-sec-gap: clamp(18px, 11.87px + 1.5730vw, 32px);
  --hp-h2: clamp(32px, 25.87px + 1.5730vw, 46px);
  --hp-h2-story: clamp(32px, 26.74px + 1.3483vw, 44px);
  --hp-h2-words: clamp(30px, 25.62px + 1.1236vw, 40px);
  --hp-h2-gift: clamp(26px, 22.49px + 0.8989vw, 34px);
  --hp-lead: clamp(16px, 15.12px + 0.2247vw, 18px);
  --hp-feel: clamp(17px, 16.56px + 0.1124vw, 18px);
  --hp-feel-py: clamp(22px, 20.25px + 0.4494vw, 26px);
  --hp-play: clamp(52px, 50.25px + 0.4494vw, 56px);
  --hp-tier-name: clamp(13px, 12.56px + 0.1124vw, 14px);
  --hp-price: clamp(38px, 35.37px + 0.6742vw, 44px);
  --hp-per: clamp(16px, 15.12px + 0.2247vw, 18px);
  --hp-tier-body: clamp(15px, 14.56px + 0.1124vw, 16px);
  --hp-card-pad: clamp(22px, 15.87px + 1.5730vw, 36px);
  --hp-card-gap: clamp(12px, 9.37px + 0.6742vw, 18px);
  --hp-tier-gap: clamp(18px, 15.37px + 0.6742vw, 24px);
  --hp-story-p: clamp(17px, 16.12px + 0.2247vw, 19px);
  --hp-words-py: clamp(48px, 33.98px + 3.5955vw, 80px);
  --hp-quote: clamp(19px, 17.25px + 0.4494vw, 23px);
  --hp-who: clamp(15px, 14.56px + 0.1124vw, 16px);
  --hp-gift-py: clamp(40px, 29.48px + 2.6966vw, 64px);
  --hp-gift-pad: clamp(24px, 16.99px + 1.7978vw, 40px);
  --hp-close: clamp(14px, 13.56px + 0.1124vw, 15px);
  --hp-close-py: clamp(32px, 28.49px + 0.8989vw, 40px);

  font-family: 'Inter', sans-serif;   /* the site's body font (style.css) */
  color: var(--hp-ink);
  background: var(--hp-cream);
  overflow-x: clip;
}

.hp h1, .hp h2, .hp h3 { margin: 0; color: inherit; }
.hp h1, .hp h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;                  /* style.css loads 400, 600 and 700 */
}
.hp p { margin: 0; }
.hp a { color: var(--hp-terracotta); }
.hp a:hover { color: var(--hp-terracotta-dark); }

/* One visible focus ring, readable on the dark hero and on cream. */
.hp a:focus-visible,
.hp button:focus-visible {
  outline: 3px solid var(--hp-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--hp-ink);
  border-radius: 10px;
}

.hp .hp-kicker {
  font-size: var(--hp-kicker);
  letter-spacing: var(--hp-kicker-track);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hp-teal);
}
.hp .hp-lead { font-size: var(--hp-lead); color: var(--hp-muted); line-height: 1.5; }

.hp .hp-btn {
  display: block;
  min-height: 44px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  padding: 15px;
  line-height: 1.2;
}
.hp .hp-btn-teal { background: var(--hp-teal); color: var(--hp-white); }
.hp .hp-btn-teal:hover { background: var(--hp-teal-ink); color: var(--hp-white); }
.hp .hp-btn-terra { background: var(--hp-terracotta); color: var(--hp-white); }
.hp .hp-btn-terra:hover { background: var(--hp-terracotta-dark); color: var(--hp-white); }
.hp .hp-btn-line { border: 1.5px solid var(--hp-ink); color: var(--hp-ink); padding: 14px; }
.hp .hp-btn-line:hover { background: var(--hp-ink); color: var(--hp-white); }

/* ── Hero ───────────────────────────────────────────────────── */
.hp .hp-hero {
  position: relative;
  isolation: isolate;
  min-height: var(--hp-hero-min);
  box-sizing: border-box;
  padding: var(--hp-hero-pt) var(--hp-gutter) 32px;
  text-shadow: 0 1px 14px rgba(20, 12, 8, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-hero-gap);
  text-align: center;
  color: var(--hp-hero-text);
  background: #2A1E17;               /* until the image paints */
}
.hp .hp-hero-img,
.hp .hp-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;         /* centre bottom: the mat sits on the edge */
  z-index: -2;
}
.hp .hp-hero::after {                /* dark at the top, clear by 75% */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.7) 0%,
              rgba(20, 12, 8, 0.4) 40%, rgba(20, 12, 8, 0) 75%);
}
.hp .hp-hero h1 { font-size: var(--hp-h1); line-height: 1.1; }
.hp .hp-hero h1 em { color: var(--hp-gold); font-style: italic; }
.hp .hp-hero h1 br,
.hp .hp-hero-sub br { display: none; }   /* phone: the lines flow */
.hp .hp-hero-sub {
  font-size: var(--hp-hero-sub);
  line-height: 1.55;
  color: var(--hp-hero-soft);
  max-width: 720px;
}
.hp .hp-hero-sub strong { color: var(--hp-hero-text); }
.hp .hp-hero-btns {
  align-self: center;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;            /* stacked at every width */
  gap: 10px;
  text-shadow: none;
}
.hp .hp-hero-btns .hp-btn { font-size: var(--hp-hero-btn); padding: var(--hp-hero-btn-py) 16px; }
.hp .hp-btn-gold { background: var(--hp-gold); color: var(--hp-ink); }
.hp .hp-btn-gold:hover { background: var(--hp-gold-hover); color: var(--hp-ink); }
/* The outline button sits where the gradient is lightest. A 60% dark
   backing keeps its text at 5.4:1 even over the brightest pixel. */
.hp .hp-btn-ghost {
  border: 1.5px solid var(--hp-hero-text);
  color: var(--hp-hero-text);
  background: rgba(28, 19, 14, 0.6);
}
.hp .hp-btn-ghost:hover { background: rgba(28, 19, 14, 0.75); color: var(--hp-hero-text); }

/* ── Sections ───────────────────────────────────────────────── */
.hp .hp-section { padding: var(--hp-sec-py) var(--hp-gutter); }

/* ── Try it now (switch home_try_section) ───────────────────── */
.hp .hp-try { display: flex; flex-direction: column; gap: var(--hp-sec-gap); align-items: center; }
.hp .hp-try-head { text-align: center; display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.hp .hp-try h2 { font-size: var(--hp-h2); line-height: 1.2; }
.hp .hp-feelings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 880px;
}
.hp .hp-feel {
  font: 700 var(--hp-feel) 'Inter', sans-serif;
  min-height: 44px;
  padding: var(--hp-feel-py) 8px;
  border-radius: 14px;
  border: 1.5px solid var(--hp-line-strong);
  background: var(--hp-white);
  color: var(--hp-ink);
  cursor: pointer;
}
.hp .hp-feel[aria-pressed="true"] {
  border: 2px solid var(--hp-teal);
  background: var(--hp-teal-tint);
  color: var(--hp-teal-ink);
}
.hp .hp-player {
  width: 100%;
  max-width: 860px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--hp-white);
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 12px;
}
.hp .hp-play {
  flex-shrink: 0;
  width: var(--hp-play);
  height: var(--hp-play);
  border-radius: 50%;
  border: none;
  background: var(--hp-terracotta);
  color: var(--hp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hp .hp-play:disabled { cursor: default; }
.hp .hp-player-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp .hp-player-title { font-weight: 700; font-size: 16px; }
.hp .hp-player-blurb { font-size: 14px; color: var(--hp-ink-soft); }
.hp .hp-player-note { font-size: 13px; color: var(--hp-muted); }

/* ── Tiers ──────────────────────────────────────────────────── */
.hp .hp-tiers {
  background: var(--hp-white);
  border-top: 1px solid var(--hp-line);
  border-bottom: 1px solid var(--hp-line);
  display: flex;
  flex-direction: column;
  gap: var(--hp-tier-gap);
  scroll-margin-top: 72px;           /* the base nav is sticky */
}
.hp .hp-tiers-head { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.hp .hp-tiers h2 { font-size: var(--hp-h2); line-height: 1.2; }
/* "Real Human" in the tiers subline: Caveat 700, which only index.html
   loads (text= limits it to these letters), over a hand-drawn swoosh.
   nowrap keeps the words and their swoosh on one line; the swoosh is
   the width of the words, so it can never widen the page. Static. */
.hp .hp-hand {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font: 700 1.4em/1 'Caveat', cursive;
  color: var(--hp-ink);              /* on white 12.94:1 */
  padding-bottom: 0.2em;
}
.hp .hp-swoosh {
  position: absolute;
  left: 0;
  bottom: -0.08em;
  width: 100%;
  height: 0.36em;
  fill: var(--hp-terracotta);
}
.hp .hp-tier-grid { display: flex; flex-direction: column; gap: var(--hp-tier-gap); }
.hp .hp-tier {
  border-radius: 16px;
  padding: var(--hp-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--hp-card-gap);
}
.hp .hp-tier-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp .hp-tier-name {
  font: 700 var(--hp-tier-name) 'Inter', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hp .hp-tier-price { font-family: 'Playfair Display', serif; font-size: var(--hp-price); line-height: 1.1; }
.hp .hp-tier-price span { font: var(--hp-per) 'Inter', sans-serif; color: var(--hp-muted); }
.hp .hp-tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--hp-tier-body);
  line-height: 1.5;
  flex-grow: 1;
}
.hp .hp-tier .hp-strong { font-weight: 700; }
.hp .hp-tier-small { font-size: 13px; color: var(--hp-muted); text-align: center; }
.hp .hp-tier-free { background: var(--hp-cream); border: 1px solid var(--hp-line); }
.hp .hp-tier-free .hp-tier-name { color: var(--hp-muted); }
.hp .hp-tier-inner { background: var(--hp-white); border: 2px solid var(--hp-teal); }
.hp .hp-tier-inner .hp-tier-name { color: var(--hp-teal); }
.hp .hp-badge {
  background: var(--hp-teal);
  color: var(--hp-white);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.hp .hp-tier-ten { background: var(--hp-gold-card); border: 2px solid var(--hp-gold-line); }
.hp .hp-tier-ten .hp-tier-name,
.hp .hp-by-app { color: var(--hp-gold-ink); }
.hp .hp-by-app { font-size: 12px; font-weight: 700; }

/* ── Our story ──────────────────────────────────────────────── */
.hp .hp-story { display: grid; gap: 16px; grid-template-areas: "top" "photos" "body"; }
.hp .hp-story-top { grid-area: top; display: flex; flex-direction: column; gap: 16px; }
.hp .hp-story h2 { font-size: var(--hp-h2-story); line-height: 1.2; }
/* Two circles of one size, side by side on every width. Each figure
   shrinks from --hp-photo together, so the pair never widens the page;
   the img sizes attribute matches --hp-photo. */
.hp .hp-photos {
  grid-area: photos;
  --hp-photo: 160px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.hp .hp-photo {
  flex: 0 1 var(--hp-photo);
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hp .hp-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--hp-white);
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(59, 47, 40, 0.18);
}
/* Caveat 700, which only index.html loads (text= covers these letters).
   nowrap: the only line break is the <br> after "Chris Ann". Below 390px
   the size follows the width, so "Ryan & Chris Ann" stays in the gutter. */
.hp .hp-photo-cap {
  font: 700 clamp(19px, 5.65vw, 22px)/1.15 'Caveat', cursive;
  color: var(--hp-ink);              /* on cream 11.81:1 */
  text-align: center;
  white-space: nowrap;
}
.hp .hp-story-body { grid-area: body; display: flex; flex-direction: column; gap: 16px; }
.hp .hp-story-body p { font-size: var(--hp-story-p); line-height: 1.65; color: var(--hp-ink-soft); }
.hp .hp-story-link {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 0;                   /* 44px tap target */
  font-weight: 700;
  font-size: 17px;
}

/* ── In their words ─────────────────────────────────────────── */
.hp .hp-words {
  background: var(--hp-white);
  border-top: 1px solid var(--hp-line);
  padding: var(--hp-words-py) var(--hp-gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp .hp-words h2 { font-size: var(--hp-h2-words); text-align: center; }
.hp .hp-quotes { display: grid; gap: 16px; }
.hp .hp-quote {
  margin: 0;
  background: var(--hp-cream);
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: var(--hp-card-pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp .hp-quote blockquote {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: var(--hp-quote);
  line-height: 1.5;
}
.hp .hp-quote figcaption { font-size: var(--hp-who); color: var(--hp-muted); font-weight: 700; }
.hp .hp-words-more { text-align: center; }
.hp .hp-words-more p { color: var(--hp-ink-soft); }
/* Studio invitation: its h2 shares the .hp-words h2 rule above. The map
   picture links to Google Maps and lifts a little on hover. */
.hp .hp-studio {
  width: 100%;
  max-width: 720px;
  margin: clamp(32px, 21.48px + 2.6966vw, 56px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.hp .hp-studio > p { color: var(--hp-ink-soft); }
.hp .hp-studio-map {
  display: block;
  width: 100%;
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(59, 47, 40, 0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp .hp-studio-map:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(59, 47, 40, 0.14); }
.hp .hp-studio-map img { display: block; width: 100%; height: auto; }

/* ── Give a gift (switch home_gift_strip) ───────────────────── */
.hp .hp-gift { padding: var(--hp-gift-py) var(--hp-gutter); display: flex; justify-content: center; }
.hp .hp-gift-card {
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
  background: var(--hp-gold-card);
  border: 1px solid var(--hp-gift-line);
  border-radius: 16px;
  padding: var(--hp-gift-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp .hp-gift-text { display: flex; flex-direction: column; gap: 8px; }
.hp .hp-gift h2 { font-size: var(--hp-h2-gift); line-height: 1.25; }
.hp .hp-gift p { font-size: 16px; color: var(--hp-ink-soft); line-height: 1.5; }

/* ── Closing line ───────────────────────────────────────────── */
.hp .hp-close {
  background: var(--hp-close-bg);
  color: var(--hp-close-text);
  padding: var(--hp-close-py) var(--hp-gutter);
  font-size: var(--hp-close);
  line-height: 1.6;
  text-align: center;
}

/* ── 768px ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hp .hp-hero h1 { line-height: 1.08; }
  .hp .hp-hero h1 br { display: inline; }
  .hp .hp-feelings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hp .hp-player { border-radius: 999px; padding: 10px 28px 10px 10px; gap: 16px; }
  .hp .hp-player-title { font-size: 17px; }
  .hp .hp-player-blurb { font-size: 15px; }
  .hp .hp-player-note { font-size: 14px; }
  .hp .hp-tier-name { letter-spacing: 3px; }
  .hp .hp-tier-small { font-size: 14px; }
  .hp .hp-badge { font-size: 13px; padding: 6px 12px; }
  .hp .hp-by-app { font-size: 13px; }
  .hp .hp-tier ul { gap: 10px; }
  .hp .hp-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .hp .hp-words { gap: 36px; }
  .hp .hp-gift-card { flex-direction: row; align-items: center; gap: 40px; border-radius: 18px; padding: var(--hp-gift-pad) 48px; }
  .hp .hp-gift-text { flex-grow: 1; }
  .hp .hp-gift-card .hp-btn { flex-shrink: 0; padding: 16px 28px; font-size: 17px; }
  .hp .hp-gift p { font-size: 17px; }
}

/* ── 1024px ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Hero: at most the whole photo (1408 by 768, so 54.55vw tall) and at
     most the window below the nav (64px plus its 1px border in
     style.css), never under 560px so the text always fits. The photo is
     cover and anchored centre bottom, so any crop comes off the top and
     the mat stays on the edge. Her seated figure (about x 530 to 915)
     starts at 37.6% of the width or later; the text column ends at
     6% + 30vw = 36%. */
  .hp .hp-hero {
    min-height: max(560px, min(54.55vw, calc(100vh - 65px)));
    min-height: max(560px, min(54.55vw, calc(100svh - 65px)));
    padding: 48px 6vw;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
  }
  .hp .hp-hero::after {              /* dark at the left, clear by 60% */
    background: linear-gradient(90deg, rgba(20, 12, 8, 0.78) 0%,
                rgba(20, 12, 8, 0.5) 30%, rgba(20, 12, 8, 0.06) 60%,
                rgba(20, 12, 8, 0) 100%);
  }
  .hp .hp-hero > :not(.hp-hero-img) { max-width: min(520px, 30vw); }
  .hp .hp-hero h1 { font-size: clamp(34px, 3.4vw, 54px); }
  .hp .hp-hero-sub { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; }
  .hp .hp-hero-btns { align-self: flex-start; width: 100%; max-width: min(360px, 30vw); gap: 12px; }
  .hp .hp-hero-btns .hp-btn { font-size: 17px; padding: 15px 24px; }
  .hp .hp-tiers { gap: 44px; }
  .hp .hp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .hp .hp-tier-free { order: -1; }   /* desktop: Circle, Inner Circle, Circle of Ten */
  .hp .hp-story {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "photos top" "photos body";
    column-gap: 64px;
    row-gap: 22px;
    align-items: center;
  }
  .hp .hp-story-top { align-self: end; gap: 22px; }
  .hp .hp-story-body { align-self: start; gap: 22px; }
  .hp .hp-photos { --hp-photo: 200px; gap: 32px; }
  .hp .hp-photo-cap { font-size: 26px; }
  .hp .hp-story-body p { line-height: 1.7; }
  .hp .hp-story-link { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp *,
  .hp *::before,
  .hp *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}