:root{
    --bg-cream: #efe8dc;
    --header-brown: #4a3a2f;
    --text-dark: #2c221a;
    --accent-brown: #8a5a3c;
    --accent-brown-dark: #6e4830;
    --line: rgba(44,34,26,0.25);
    --kicker: #a3785a;
    --rust: #c1583a;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    font-family: 'Jost', sans-serif;
    background: var(--bg-cream);
    color: var(--text-dark);
  }

  a{ text-decoration:none; color:inherit; }

  /* ---------- Header ---------- */
  header{
    background: var(--header-brown);
    color: #f3ede2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 18px 40px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .brand{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }
  .brand .name{
    font-family:'Playfair Display', serif;
    font-size: 2.1rem;
    letter-spacing: 3px;
    font-weight:600;
  }
  .brand .tagline{
    font-size: 0.62rem;
    letter-spacing: 3px;
    color: #cbbba6;
    margin-top: 12px;
  }

  nav{
    display:flex;
    align-items:center;
    gap: 34px;
    flex-wrap: wrap;
  }
  nav a{
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: #f3ede2;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  nav a:hover{ color: #ffffff; }
  nav a.active{ border-bottom-color: #f3ede2; }

  .header-right{
    display:flex;
    align-items:center;
    gap: 28px;
  }
  .divider{
    width:1px;
    height: 26px;
    background: rgba(255,255,255,0.3);
  }
  .cta-header{
    background: #f3ede2;
    color: var(--header-brown);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    padding: 12px 26px;
    white-space: nowrap;
  }
  .cta-header:hover{ background:#fff; }
  .cta-header.active{ background: var(--accent-brown); color: #fbf7f0; }

  .nav-toggle{
    display:none;
    background:none;
    border:none;
    color:#f3ede2;
    font-size: 1.6rem;
    cursor:pointer;
  }

  /* ---------- Hero ---------- */
  /* The image is shown at its natural aspect ratio (no cropping,
     no object-fit) so 100% of the photo is always visible; text is
     positioned on top using percentages measured from the design. */
  .hero{
    position: relative;
    width: 100%;
    line-height: 0;
    background: var(--bg-cream);
  }

  .hero-bg{
    display:block;
    width:100%;
    height:auto;
  }

  .hero-scrim{
    /*position:absolute;*/
    inset:0;
    z-index:1;
    background: linear-gradient(
      90deg,
      var(--bg-cream) 0%,
      var(--bg-cream) 18%,
      rgba(239,232,220,0.5) 32%,
      rgba(239,232,220,0) 46%
    );
  }

  .hero-text{
    position:absolute;
    z-index:2;
    left: 3.0%;
    top: 25.5%;
    width: 37%;
    min-width: 240px;
  }

  .hero-text h1{
    font-family:'Playfair Display', serif;
    font-weight:500;
    font-size: clamp(2rem, 3.6vw, 2.4rem);
    line-height: 1.18;
    color: var(--text-dark);
  }

  .hero-buttons{
    position:absolute;
    z-index:2;
    left: 3.0%;
    top: 53.5%;
    display:flex;
    align-items:stretch;
    gap: 0.96%;
    flex-wrap: nowrap;
  }

  .btn{
    height: 3.6vw;
    max-height: 45px;
    min-height: 34px;
    padding: 0 1.4vw;
    font-size: clamp(0.5rem, 0.82vw, 0.8rem);
    letter-spacing: 1.5px;
    font-weight: 600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space: nowrap;
    text-align:center;
  }
  .btn-solid{
    background: var(--accent-brown);
    color: #fbf7f0;
    border: 1px solid var(--accent-brown);
    width: 16.9vw;
    max-width: 282px;
  }
  .btn-solid:hover{ background: var(--accent-brown-dark); }
  .btn-outline{
    background: rgba(239,232,220,0.6);
    color: var(--text-dark);
    border: 1px solid var(--line);
    backdrop-filter: blur(2px);
    width: 18.1vw;
    max-width: 230px;
  }
  .btn-outline:hover{ background: rgba(239,232,220,0.85); }

  .hero-kicker{
    position:absolute;
    z-index:2;
    left: 12.4%;
    top: 57.5%;
    font-size: clamp(0.5rem, 0.68vw, 0.8rem);
    letter-spacing: 3px;
    color: var(--kicker);
    font-weight: 500;
    white-space: nowrap;
  }
  .hero-kicker span{
    color: var(--line);
    margin: 0 10px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    nav{ display:none; }
    .header-right .divider{ display:none; }
    .nav-toggle{ display:block; }
    header.open nav{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap: 14px;
      width:100%;
      order: 3;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
  }

  /* Below this width the overlay text gets too small to read
     legibly on top of the photo, so stack image above text instead
     of overlaying — this keeps everything readable and avoids any
     mismatch between the text box and fixed elements in the photo. */
  @media (max-width: 700px){
    .hero{
      display:flex;
      flex-direction: column;
    }
    .hero-scrim{ display:none; }
    .hero-text{
      position: static;
      width: 100%;
      min-width: 0;
      padding: 34px 7vw 0;
    }
    .hero-text h1{ font-size: clamp(1.5rem, 6vw, 2rem); }
    .hero-buttons{
      position: static;
      margin: 26px 7vw 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    .btn{
      height: auto;
      max-height: none;
      width: auto !important;
      max-width: none !important;
      padding: 14px 20px;
      font-size: 0.72rem;
    }
    .hero-kicker{
      position: static;
      display:block;
      margin: 22px 7vw 34px;
      font-size: 0.75rem;
    }
  }

  @media (max-width: 560px){
    header{ padding: 16px 20px; }
    .cta-header{ padding: 10px 18px; }
    .hero-buttons{ gap: 10px; }
    .btn{ padding: 12px 16px; font-size: 0.66rem; letter-spacing: 1px; }
  }

  /* ---------- Check-in section ---------- */
  .checkin-section{
    display:grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 60px;
    max-width: 1374px;
    margin: 0 auto;
    padding: 80px 6vw 90px;
    background: #efe8dc;
  }

  .checkin-kicker{
    font-size: 0.72rem;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--rust);
    margin-bottom: 18px;
  }

  .checkin-left h2{
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: 22px;
  }

  .checkin-left p{
    font-size: 0.95rem;
    line-height: 1.75;
    color: #5a5048;
    max-width: 360px;
  }

  .checkin-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: var(--accent-brown);
    color: #fbf7f0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 18px 0;
    width: 100%;
    max-width: 360px;
    text-align:center;
    margin-top: 30px;
    border: 1px solid var(--accent-brown);
    transition: background .2s ease;
  }
  .checkin-cta:hover{ background: var(--accent-brown-dark); }

  .checkin-right{
    display:flex;
    flex-direction: column;
    gap: 26px;
  }

  .checkin-tags{
    display:flex;
    flex-wrap:wrap;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 26px;
  }

  .checkin-tag{
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 30px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-dark);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
  }
  .checkin-tag:hover{
    background: rgba(239,232,220,0.65);
    border-color: var(--accent-brown);
  }
  .checkin-tag:focus-visible{
    outline: 2px solid var(--rust);
    outline-offset: 3px;
  }
  .checkin-tag:active{ transform: translateY(1px); }

  .checkin-tag.active{
    border-color: var(--rust);
    color: var(--rust);
  }

  .checkin-highlight{
    background: var(--bg-cream);
    /*border-left: 4px solid var(--rust);*/
    padding: 30px 0px;
    display:flex;
    flex-direction: column;
    gap: 16px;
  }

  .checkin-highlight .cat{
    font-size: 0.72rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: #7a7166;
  }

  .checkin-highlight blockquote{
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.5;
    color: var(--text-dark);
    max-width: 520px;
  }

  .checkin-highlight a{
    align-self: flex-end;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--rust);
  }
  .checkin-highlight a:hover{ text-decoration: underline; }

  @media (max-width: 900px){
    .checkin-section{ grid-template-columns: 1fr; gap: 40px; }
  }

  @media (max-width: 480px){
    .checkin-highlight a{ align-self: flex-start; }
  }

    

  /* ---------- About section ---------- */
  .about-section{
    padding: 80px 6vw;
    background: var(--bg-cream);
  }

  .about-inner{
    max-width: 980px;
    margin: 0 auto;
    display:flex;
    gap: 56px;
    align-items:center;
  }

  .about-portrait{
    flex: 0 0 260px;
    width: 260px;
    height: 320px;
    overflow:hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  }
  .about-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: 60% 15%;
    display:block;
  }

  .about-text h2{
    font-family:'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .about-text p{
    font-size: 0.98rem;
    line-height: 1.8;
    color: #4a4038;
    margin-bottom: 16px;
  }

  .about-text p:last-child{ margin-bottom: 0; }

  @media (max-width: 780px){
    .about-inner{ flex-direction: column; text-align:center; }
    .about-portrait{ width: 220px; height: 270px; }
  }


  /* ---------- Home content inserted from supplied references ---------- */
  .home-discover{
    min-height: 530px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
    padding: 46px 5vw;
    background:#eef3ee;
  }
  .home-discover-image{
    height:460px;
    overflow:hidden;
    background:#e9e7dc;
  }
  .home-discover-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .home-discover-copy{ padding: 20px 2vw 20px 0; }
  .section-kicker{
    font-size:.68rem;
    letter-spacing:3px;
    color:#708477;
    margin-bottom:22px;
  }
  .home-discover-copy h2,
  .home-book-copy h2,
  .home-whispers h2{
    font-family:'Playfair Display',serif;
    font-weight:400;
    color:#2b201a;
    margin:0 0 26px;
  }
  .home-discover-copy h2{ font-size:2.8rem; line-height:1.08; }
  .home-discover-copy p,
  .home-book-copy p{
    max-width:590px;
    color:#665b53;
    font-size:1rem;
    line-height:1.9;
    margin:0 0 28px;
  }
  .discover-meta{
    display:flex;
    gap:28px;
    padding:20px 0;
    border-top:1px solid #b9c5ba;
    margin-bottom:24px;
    color:#68786e;
    font-size:.72rem;
    letter-spacing:1.2px;
  }
  .home-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:180px;
    padding:13px 23px;
    border-radius:30px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-decoration:none;
  }
  .home-pill.dark{ background:#2b201a; color:#fff; }
  .home-pill.peach{ background:#cf8060; color:#fff; }

  .home-whispers{
    padding:56px 5vw 82px;
    background:#f3ecdf;
  }
  .whispers-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:34px;
  }
  .home-whispers h2{ font-size:2.35rem; margin-bottom:0; }
  .explore-link{
    color:#665b53;
    text-decoration:none;
    font-size:.72rem;
    letter-spacing:1.3px;
  }
  .whisper-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  .whisper-card{
    min-height:255px;
    padding:26px 24px;
    border:1px solid #d7c9b8;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:#4d4038;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .whisper-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(55,42,30,.08);
    color: #874040;
  }
  .card-sage{background:#e9f0eb}
  .card-sand{background:#eee4c9}
  .card-blush{background:#faeee9}
  .card-cream{background:#fbf8f2}
  .whisper-icon{font-size:1.5rem;color:#718579}
  .whisper-book{margin-left:auto;margin-top:-22px;color:#806f60}
  .whisper-card p{
    font-family:'Playfair Display',serif;
    font-size:1.28rem;
    line-height:1.35;
    margin:auto 0 28px;
  }
  .whisper-card small{
    color:#998a79;
    font-size:.62rem;
    letter-spacing:2px;
  }

  .home-book{
    display:grid;
    grid-template-columns: 42% 58%;
    align-items:center;
    min-height:520px;
    padding:55px 7vw;
    background:#fbfaf7;
  }
  .home-book-visual{ display:flex; justify-content:center; }
  .book-frame{
    width:min(400px,70%);
    padding:22px;
    border:1px solid #d9cbb9;
    /*transform:rotate(1.8deg);*/
    background:#fbfaf7;
  }
  .book-frame img{
    width:100%;
    height:420px;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  .home-book-copy{ padding-left:4vw; }
  .home-book-copy h2{ font-size:2.8rem; line-height:1.08; }
  .home-book-copy blockquote{
    border-left:2px solid #cf8060;
    padding:2px 0 2px 20px;
    margin:30px 0 35px;
    color:#67594f;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:1.15rem;
  }

  @media (max-width:900px){
    .home-discover,
    .home-book{grid-template-columns:1fr}
    .home-discover-copy{padding:25px 0 10px}
    .home-book-copy{padding:35px 0 10px}
    .whisper-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:600px){
    .home-discover{padding:35px 6vw}
    .home-discover-image{height:330px}
    .home-discover-copy h2,
    .home-book-copy h2{font-size:2.2rem}
    .discover-meta{flex-direction:column;gap:12px}
    .whispers-heading{align-items:flex-start;gap:20px;flex-direction:column}
    .home-whispers h2{font-size:2rem}
    .whisper-grid{grid-template-columns:1fr}
    .home-book{padding:45px 6vw}
    .book-frame{width:90%}
  }

  /* ---------- Footer ---------- */
  .site-footer{
    background: var(--header-brown);
    color: #ede4d6;
    padding: 50px 6vw 0;
  }

  .footer-top{
    display:flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  .footer-brand .name{
    font-family:'Playfair Display', serif;
    font-size: 1.9rem;
    letter-spacing: 2px;
    color: #f3ede2;
  }
  .footer-brand .tagline{
    display:flex;
    justify-content: space-between;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: #cbbba6;
    margin-top: 6px;
  }

  .footer-nav{
    display:flex;
    flex-wrap: wrap;
    gap: 10px 28px;
  }
  .footer-nav a{
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    color: #ede4d6;
  }
  .footer-nav a:hover{ color: #fff; }

  .footer-social{
    display:flex;
    gap: 16px;
  }
  .footer-social a{
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: #ede4d6;
  }
  .footer-social a:hover{ background: rgba(255,255,255,0.12); }
  .footer-social svg{ width:16px; height:16px; fill: currentColor; }

  .footer-quote{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #cbbba6;
    padding: 30px 0;
  }

  .footer-bottom{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #b7a893;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .footer-bottom a{ color: #b7a893; }
  .footer-bottom a:hover{ color: #fff; }
  .footer-bottom-links{ display:flex; gap: 14px; }

  @media (max-width: 600px){
    .footer-top{ flex-direction: column; align-items:flex-start; }
    .footer-bottom{ flex-direction: column; text-align:center; align-items:center; }
  }

/* ============================================================
   Discover Yourself page
   ============================================================ */
:root{
  --blush-bg: #f9f2e8;
  --peach-box: #f4e6d6;
  --note-bg: #faf3ea;
}

.discover-kicker{
  font-size: 0.72rem;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--rust);
}

/* ---------- Discover hero ---------- */
.discover-hero{
  position:relative;
  width:100%;
  line-height:0;
  background: var(--blush-bg);
}

.discover-hero-bg{
  display:block;
  width:100%;
  height:auto;
}

.discover-hero-text{
  position:absolute;
  z-index:2;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 36%;
  min-width: 230px;
  line-height: normal;
}

.discover-hero-text .discover-kicker{ margin-bottom: clamp(10px, 1.4vw, 18px); }

.discover-hero-text h1{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size: clamp(1.05rem, 3.3vw, 2.6rem);
  line-height:1.18;
  color: var(--text-dark);
  margin-bottom: clamp(10px, 1.6vw, 22px);
}

.discover-hero-text p{
  font-size: clamp(0.66rem, 1.05vw, 0.95rem);
  line-height: 1.75;
  color: #5a5048;
  margin-bottom: clamp(14px, 2.2vw, 30px);
}

.btn-rect{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--accent-brown-dark);
  color: #fbf7f0;
  font-size: clamp(0.56rem, 0.8vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: clamp(10px, 1.5vw, 16px) clamp(16px, 2.3vw, 30px);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.btn-rect:hover{ background:#5a3a26; }

.discover-hero-note{
  display:flex;
  align-items:center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(14px, 2.6vw, 36px);
}
.discover-hero-note svg{
  width: clamp(18px, 2.6vw, 34px);
  height: auto;
  color: var(--accent-brown);
  flex-shrink:0;
}
.discover-hero-note span{
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(0.6rem, 0.95vw, 0.92rem);
  line-height: 1.4;
  color: #4a4038;
}

@media (max-width: 700px){
  .discover-hero{ display:flex; flex-direction:column; }
  .discover-hero-text{
    position:static;
    transform:none;
    width:100%;
    min-width:0;
    padding: 30px 7vw 34px;
  }
  .discover-hero-text h1{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .discover-hero-text p{ font-size: 0.85rem; }
  .btn-rect{ font-size: 0.72rem; padding: 14px 22px; }
  .discover-hero-note svg{ width: 28px; }
  .discover-hero-note span{ font-size: 0.85rem; }
}

/* ---------- What is this test about ---------- */
.discover-what{
  background: #fff;
  text-align:center;
  padding: 90px 6vw 0;
}
.discover-what h2{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  color: var(--text-dark);
  margin: 16px 0 26px;
}
.discover-what p{
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.85;
  color: #5a5048;
}

/* ---------- Feature row ---------- */
.feature-row{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 50px 0;
  max-width: 1080px;
  margin: 64px auto 0;
  padding: 0 6vw;
  box-sizing: border-box;
}
.feature-col{
  position:relative;
  flex: 1 1 220px;
  max-width: 320px;
  text-align:center;
  padding: 0 28px;
  box-sizing: border-box;
}
.feature-col + .feature-col::before{
  content:"";
  position:absolute;
  left:0;
  top: 6px;
  bottom: 6px;
  width:1px;
  background: var(--line);
}
.feature-icon{
  width: 64px;
  height: 64px;
  border-radius:50%;
  background: var(--peach-box);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 20px;
  color: var(--accent-brown-dark);
}
.feature-icon svg{ width: 28px; height: 28px; }
.feature-col h3{
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.feature-col p{
  font-size: 0.9rem;
  line-height: 1.7;
  color: #6a6058;
}

@media (max-width: 700px){
  .feature-row{ flex-direction: column; align-items:center; gap: 40px; }
  .feature-col{ max-width: 360px; }
  .feature-col + .feature-col::before{ display:none; }
}

/* ---------- CTA box ---------- */
.discover-what-wrap{
  background:#fff;
  padding-bottom: 90px;
}
.discover-cta-box{
  max-width: 1080px;
  margin: 70px auto 0;
  background: var(--peach-box);
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 34px;
  padding: 40px 46px;
  box-sizing: border-box;
}
.discover-cta-icon{
  flex-shrink:0;
  width: 56px;
  height: 56px;
  color: var(--accent-brown-dark);
}
.discover-cta-text{
  flex: 1 1 260px;
}
.discover-cta-text h3{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size: 1.4rem;
  color: var(--rust);
  margin-bottom: 8px;
}
.discover-cta-text p{
  font-size: 0.92rem;
  line-height:1.7;
  color: #5a5048;
  margin-bottom: 22px;
}

@media (max-width: 700px){
  .discover-cta-box{ flex-direction:column; text-align:center; padding: 36px 7vw; justify-content:center; }
}

/* ---------- Books banner ---------- */
.discover-banner{
  background: var(--blush-bg);
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 40px;
  padding: 56px 6vw;
}
.discover-banner-image{
  flex: 1 1 400px;
  max-width: 560px;
}
.discover-banner-image img{
  width:100%;
  height:auto;
  display:block;
}
.discover-banner-quote{
  flex: 1 1 260px;
  max-width: 400px;
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.5;
  color: #4a4038;
  text-align:right;
}
.discover-banner-quote .rule{
  display:block;
  width: 70px;
  height:2px;
  background: var(--accent-brown);
  margin: 16px 0 0 auto;
}

@media (max-width: 800px){
  .discover-banner{ text-align:center; }
  .discover-banner-quote{ text-align:center; margin: 0 auto; }
  .discover-banner-quote .rule{ margin: 16px auto 0; }
}

/* ---------- Gentle note ---------- */
.gentle-note{
  background: var(--note-bg);
  text-align:center;
  padding: 70px 6vw 80px;
}
.gentle-note p{
  max-width: 700px;
  margin: 18px auto 34px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #5a5048;
}
.gentle-note-affirm{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  font-size: 0.78rem;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--rust);
}
.gentle-note-affirm svg{
  width: 20px;
  height: 20px;
  color: var(--rust);
}

/* ============================================================
   Inner content pages (Human Pages, etc.)
   ============================================================ */

/* ---------- Inner page: hero banner ---------- */
.page-hero{
  display:flex;
  align-items:center;
  gap: 60px;
  padding: 70px 6vw 30px;
  background: var(--bg-cream);
  flex-wrap: wrap;
}
.page-hero-text{ flex: 1 1 420px; }
.page-kicker{
  font-size: 0.78rem;
  letter-spacing: 3px;
  color: var(--kicker);
  font-weight: 600;
  margin-bottom: 14px;
}
.page-hero-text h1{
  font-family:'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.page-hero-text p{
  font-size: 1rem;
  line-height: 1.75;
  color: #4a4038;
  max-width: 560px;
  margin-bottom: 28px;
}
.page-hero-media{
  flex: 1 1 340px;
  display:flex;
  justify-content:center;
}
.page-hero-media img{
  width: 100%;
  max-width: 420px;
  height: auto;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.hero-note{
  margin-top: 22px;
  font-family:'Playfair Display', serif;
  font-style: italic;
  color: var(--accent-brown-dark);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---------- Generic section wrap ---------- */
.section-wrap{ padding: 30px 6vw; }
.section-wrap.alt{ background: #fff; }

/* ---------- Filter pills ---------- */
.filter-row{
  display:flex;
  justify-content:center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  font-size: 0.85rem;
}
.filter-row a{ color:#5a5048; padding-bottom:4px; }
.filter-row a.active{ color: var(--text-dark); border-bottom: 2px solid var(--accent-brown); font-weight:600; }

/* ---------- Article card grid ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1180px;
  margin: 0 auto;
}
.article-card img{
  width:100%; height:180px; object-fit:cover; display:block;
  margin-bottom: 16px;
}
.article-card .cat{
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--kicker);
  font-weight:600;
  margin-bottom: 8px;
}
.article-card h4{
  font-family:'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.article-card p{ font-size:0.88rem; color:#5a5048; margin-bottom:10px; line-height:1.55; }
.article-card a{ font-size:0.8rem; font-weight:600; color:var(--accent-brown-dark); }

/* ---------- Quote banner ---------- */
.quote-banner{
  background: #dfe3d3;
  padding: 50px 6vw;
  text-align:center;
}
.quote-banner blockquote{
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: #3c3a2e;
  max-width: 760px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.quote-banner cite{
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: #5a5840;
  font-style: normal;
}

/* ---------- Newsletter ---------- */
.newsletter{
  background: #ede4d4;
  padding: 40px 6vw;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items:center;
  gap: 24px;
}
.newsletter-text h4{
  font-family:'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.newsletter-text p{ font-size: 0.88rem; color: #5a5048; }
.newsletter-form{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter-form input{
  padding: 13px 18px;
  border: 1px solid rgba(44,34,26,0.2);
  background: #fff;
  font-family:'Jost', sans-serif;
  font-size: 0.85rem;
  min-width: 240px;
}
.newsletter-form button{
  padding: 13px 24px;
  background: #5c6b4a;
  color: #fff;
  border: none;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  cursor:pointer;
}
.newsletter-form button:hover{ background: #47543a; }
.newsletter-note{ font-size: 0.78rem; color: #5a5048; margin-top: 8px; width:100%; }

@media (max-width: 900px){
  .card-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .card-grid{ grid-template-columns: 1fr; }
  .page-hero{ padding: 50px 7vw 40px; }
}
/* ---------- Whisper card grid ---------- */
.whisper-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.whisper-card img{
  width:100%; height:100%; object-fit:contain; display:block;
  margin-bottom: 16px;
}

/* ============================================================
   MERGED FROM books.css / connect.css / about.css / test.css
   Everything below only targets inner pages — nothing here
   touches the homepage. Header, footer, buttons, hero etc. all
   come from the rules above (the homepage styles).
   ============================================================ */

/* ---------- Shared inner-page helpers ---------- */
.section-heading{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--text-dark);
  margin-bottom: 20px;
}
.section-body{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 46px;
  color: #4a4038;
  line-height: 1.75;
  font-size: 1rem;
}

/* Buttons placed inside normal content sections (not the home hero) */
.section-wrap .btn{
  display:inline-flex;
  height:auto;
  max-height:none;
  width:auto;
  max-width:none;
  padding: 14px 26px;
  font-size: 0.75rem;
}

/* ---------- Icon columns ---------- */
.icon-columns{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  text-align:center;
}
.icon-columns .col-icon{
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #f3e6d8;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
}
.icon-columns h4{
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.icon-columns p{ font-size: 0.9rem; color: #5a5048; line-height: 1.6; }
@media (max-width: 700px){
  .icon-columns{ grid-template-columns: 1fr; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  max-width: 980px;
  margin: 60px auto 0;
  background: var(--bg-cream);
  border: 1px solid rgba(44,34,26,0.1);
  padding: 34px 36px;
  display:flex;
  align-items:center;
  gap: 26px;
  flex-wrap: wrap;
}
.cta-banner .cta-icon{ font-size: 2.2rem; flex: 0 0 auto; }
.cta-banner h3{
  font-family:'Playfair Display', serif;
  color: var(--accent-brown-dark);
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.cta-banner p{ color: #4a4038; font-size: 0.92rem; margin-bottom: 16px; }

/* ============================================================
   Books page
   ============================================================ */
.books-section{
  padding: 70px 6vw 90px;
  background: #ffffff;
}
.books-heading{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  text-align: center;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--text-dark);
  margin-bottom: 46px;
}
.books-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.book-card{
  display:flex;
  gap: 26px;
  background: var(--bg-cream);
  padding: 26px;
  align-items: flex-start;
}
.book-cover{
  flex: 0 0 190px;
  width: 190px;
}
.book-cover img{
  width:100%;
  height:auto;
  display:block;
}
.book-info h3{
  font-family:'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: var(--accent-brown-dark);
  margin-bottom: 12px;
}
.book-info p{
  font-size: 0.92rem;
  line-height: 1.7;
  color: #2f6480;
  margin-bottom: 18px;
}
.book-info p strong{ color: #241a12; font-weight: 700; }
.book-info .buy-btn{
  display:inline-block;
  padding: 10px 24px;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  border: 1px solid var(--text-dark);
  color: var(--text-dark);
  background: transparent;
}
.book-info .buy-btn:hover{ background: var(--text-dark); color: #fff; }

/* Book spine stack (books hero illustration) */
.spine-stack{
  display:flex;
  flex-direction:column;
  width: 220px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
.spine-stack div{
  padding: 14px 20px;
  font-family:'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #3c2f22;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.spine-stack div:nth-child(1){ background:#e7ddc9; }
.spine-stack div:nth-child(2){ background:#ddd0b4; }
.spine-stack div:nth-child(3){ background:#d3c4a2; }
.spine-stack div:nth-child(4){ background:#c9b892; border-bottom:none; }

/* "More from Aruna" row */
.more-books .section-kicker{ margin-bottom:0; }

/* inline grid-template-columns on the books page are overridden here
   so the layout still stacks on smaller screens */
@media (max-width: 900px){
  .section-wrap .card-grid{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 820px){
  .books-grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
  .books-grid > div:first-child{ max-width: 320px; margin: 0 auto; }
}
@media (max-width: 600px){
  .section-wrap .card-grid{ grid-template-columns: 1fr !important; }
}
@media (max-width: 480px){
  .book-card{ flex-direction: column; align-items:center; text-align:center; }
  .book-cover{ width: 60%; max-width: 220px; }
  .book-info .buy-btn{ margin: 0 auto; }
}

/* ============================================================
   Connect page
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.contact-grid h3{
  font-family:'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.contact-grid > div > p.lead{ color:#4a4038; margin-bottom: 24px; line-height:1.6; }
.form-row{ display:flex; gap: 14px; margin-bottom: 14px; flex-wrap:wrap; }
.form-row input, .contact-form textarea{
  flex:1;
  min-width: 200px;
  padding: 14px 16px;
  border: 1px solid rgba(44,34,26,0.2);
  background: #fff;
  font-family:'Jost', sans-serif;
  font-size: 0.9rem;
}
.contact-form textarea{ width:100%; min-height: 140px; margin-bottom: 18px; resize: vertical; }
.contact-form .send-btn{
  display:inline-block;
  padding: 14px 30px;
  background: var(--accent-brown);
  color: #fff;
  border:none;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  cursor:pointer;
}
.contact-form .send-btn:hover{ background: var(--accent-brown-dark); }
.form-note{ font-size: 0.78rem; color: #7a7062; margin-top: 12px; }

.connect-list{ list-style:none; }
.connect-list li{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  margin-bottom: 22px;
}
.connect-list .ic{
  width: 40px; height:40px;
  border-radius:50%;
  background: var(--header-brown);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.connect-list .ic svg{ width:18px; height:18px; fill:currentColor; }
.connect-list h5{ font-size: 0.95rem; font-weight:600; color:var(--text-dark); margin-bottom:3px; }
.connect-list h5 a{ color:inherit; text-decoration:none; }
.connect-list h5 a:hover{ text-decoration:underline; }
.connect-list p{ font-size: 0.85rem; color:#5a5048; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   About page
   ============================================================ */
:root{
  --ab-blush: #f6ede2;
  --ab-text: #4a4038;
}
.ab-kicker{
  font-size: 0.78rem;
  letter-spacing: 3px;
  color: var(--kicker);
  font-weight: 600;
  margin-bottom: 16px;
}
.ab-kicker-center{ text-align:center; }

.ab-hero{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 6vw 70px;
}
.ab-hero-text{ flex: 1 1 400px; }
.ab-hero-text h1{
  font-family:'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.15;
  color: var(--text-dark);
  margin-bottom: 26px;
}
.ab-hero-text p{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ab-text);
  max-width: 520px;
}
.ab-hero-text p + p{ margin-top: 16px; }
.ab-hero-text .ab-lead{
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--accent-brown-dark);
}
.ab-hero-media{
  flex: 1 1 340px;
  display:flex;
  justify-content:center;
}
.ab-hero-media img{
  width: 100%;
  max-width: 480px;
  height: auto;
  display:block;
  box-shadow: 0 16px 36px rgba(60,40,25,0.18);
}

.ab-story{
  background: #fff;
  padding: 80px 6vw;
}
.ab-column{
  max-width: 700px;
  margin: 0 auto;
}
.ab-story p,
.ab-believe p{
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ab-text);
  margin-bottom: 22px;
}
.ab-story p em{ color: var(--text-dark); }
.ab-story .ab-pull{
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--accent-brown-dark);
  border-left: 3px solid var(--accent-brown);
  padding: 6px 0 6px 26px;
  margin: 38px 0;
}
.ab-link{
  color: var(--accent-brown-dark);
  border-bottom: 1px solid var(--accent-brown);
}
.ab-link:hover{ color: var(--text-dark); }

.ab-believe{
  background: var(--ab-blush);
  padding: 80px 6vw 90px;
}
.ab-believe h2{
  font-family:'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.25;
  text-align:center;
  color: var(--text-dark);
  margin-bottom: 40px;
}
.ab-believe .ab-pause{
  font-family:'Playfair Display', serif;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--accent-brown-dark);
  text-align:center;
  margin: 44px 0 30px;
}
.ab-about-list{
  list-style:none;
  max-width: 520px;
  margin: 0 auto 44px;
}
.ab-about-list li{
  font-family:'Playfair Display', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text-dark);
  text-align:center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(110,72,48,0.18);
}
.ab-about-list li:first-child{ border-top: 1px solid rgba(110,72,48,0.18); }

.ab-next{
  display:flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 6vw 70px;
}
.ab-next-card{
  flex: 1 1 240px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid rgba(44,34,26,0.1);
  transition: border-color .2s ease, transform .2s ease;
}
.ab-next-card:hover{ border-color: var(--accent-brown); transform: translateY(-2px); }
.ab-next-label{
  font-size: 0.7rem;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--kicker);
}
.ab-next-text{
  font-family:'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--text-dark);
}

@media (max-width: 820px){
  .ab-hero{ padding: 50px 7vw 40px; gap: 36px; }
  .ab-hero-media{ order: -1; }
  .ab-hero-media img{ max-width: 340px; }
  .ab-story{ padding: 56px 7vw; }
  .ab-believe{ padding: 56px 7vw 64px; }
  .ab-story .ab-pull{ font-size: 1.25rem; padding-left: 18px; }
}

/* ============================================================
   Test page (Personalization Test)
   Scoped to .app so none of it leaks into the site header,
   footer or other pages. Colours/fonts follow the homepage.
   ============================================================ */
.app{
  --ink: var(--text-dark);
  --muted: #7a7062;
  --paper: var(--bg-cream);
  --card: #fbf8f2;
  --t-line: #d7c9b8;
  --accent: var(--accent-brown);
  --accent-dark: var(--accent-brown-dark);
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  background: var(--paper);
  color: var(--ink);
}
.app button, .app input{ font:inherit; }

.app .topbar{
  width:min(1120px,92%);
  margin:0 auto;
  padding:26px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  color:inherit;
  border:0;
}
.app .topbar .brand{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:3px;
  font-weight:600;
  color: var(--rust);
  display:block;
}
.app .progress-text{ font:0.75rem 'Jost', sans-serif; letter-spacing:1px; color:var(--muted); }

.app main{
  width:min(900px,92%);
  margin:auto;
  flex:1;
  display:flex;
  align-items:center;
  padding:50px 0;
}
.app .screen{ width:100%; animation:fade .35s ease; }
@keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.app .eyebrow{
  font:600 0.72rem 'Jost', sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--kicker);
}
.app h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(2.4rem,5.5vw,4rem);
  line-height:1.08;
  font-weight:500;
  margin:18px 0 24px;
  max-width:820px;
}
.app h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.12;
  font-weight:500;
  margin:14px 0 22px;
}
.app h3{ font-family:'Playfair Display', serif; font-size:1.5rem; font-weight:500; }
.app .lead{ font-size:1.15rem; line-height:1.75; max-width:680px; color:#5a5048; }
.app .small{ font:0.88rem/1.6 'Jost', sans-serif; color:var(--muted); }

.app .btn{
  height:auto; max-height:none; min-height:0;
  width:auto; max-width:none;
  display:inline-block;
  border:1px solid var(--accent-brown);
  border-radius:0;
  background:var(--accent-brown);
  color:#fbf7f0;
  padding:16px 28px;
  margin-top:22px;
  cursor:pointer;
  font-family:'Jost', sans-serif;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:left;
}
.app .btn:hover{ background:var(--accent-brown-dark); }
.app .btn.secondary,
.app .secondary{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.app .btn.secondary:hover{ background:rgba(239,232,220,0.85); border-color:var(--accent-brown); }

.app .question{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.2;
  font-weight:500;
  max-width:800px;
  margin:16px 0 34px;
}
.app .options{ display:grid; gap:12px; max-width:800px; }
.app .option{
  background:var(--card);
  border:1px solid var(--t-line);
  padding:19px 22px;
  text-align:left;
  cursor:pointer;
  display:flex;
  gap:16px;
  align-items:flex-start;
  font-family:'Jost', sans-serif;
  font-size:1rem;
  color:var(--ink);
  transition:.18s;
}
.app .option:hover{ border-color:var(--accent); transform:translateY(-1px); }
.app .letter{ font-family:'Jost', sans-serif; font-weight:600; color:var(--rust); }

.app .progress{ height:4px; background:#e2d8c9; margin:0 0 42px; overflow:hidden; }
.app .progress>div{ height:100%; background:var(--accent); transition:width .3s; }

.app .result-wrap{ display:grid; grid-template-columns:1fr; gap:38px; }
.app .score{ font-family:'Playfair Display', serif; font-size:clamp(4rem,10vw,7rem); line-height:.9; font-weight:600; color:var(--accent-dark); }
.app .pattern{ font-family:'Playfair Display', serif; font-size:clamp(2.2rem,5vw,3.6rem); margin:8px 0 20px; }
.app .result-copy{ font-size:1.05rem; line-height:1.8; max-width:760px; color:#4a4038; }
.app .result-framing{ max-width:720px; margin-top:-6px; }
.app .quote{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:1.5rem;
  line-height:1.4;
  border-left:2px solid #cf8060;
  padding-left:22px;
  margin:30px 0;
  max-width:700px;
  color:#67594f;
}

.app .breakdown{ display:grid; gap:14px; max-width:650px; }
.app .bar-row{ font-family:'Jost', sans-serif; font-size:0.85rem; }
.app .bar-label{ display:flex; justify-content:space-between; margin-bottom:6px; }
.app .bar{ height:9px; background:#e2d8c9; overflow:hidden; }
.app .bar span{ display:block; height:100%; background:var(--accent); }
.app .signal-label{ font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }

.app .email-box{ background:var(--card); border:1px solid var(--t-line); padding:28px; max-width:700px; margin-top:48px; }
.app .email-row{ display:flex; gap:10px; margin-top:15px; }
.app .email-row input{
  flex:1;
  border:1px solid rgba(44,34,26,0.2);
  padding:14px;
  background:#fff;
  min-width:0;
  font-family:'Jost', sans-serif;
}
.app .email-row .btn{ margin-top:0; }
.app .message{ font:0.82rem/1.5 'Jost', sans-serif; color:var(--accent-dark); margin-top:10px; }
.app .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.app .actions .btn{ margin-top:0; }

.app .book-section{
  margin-top:48px;
  padding-top:42px;
  border-top:1px solid var(--t-line);
  display:grid;
  grid-template-columns:minmax(180px,280px) 1fr;
  gap:38px;
  align-items:center;
}
.app .book-cover{
  flex:none;
  width:min(100%,280px);
  aspect-ratio:2/3;
  object-fit:cover;
  box-shadow:0 18px 45px rgba(44,34,26,.16);
  background:#e9e2d7;
}
.app .book-copy p{ font-size:1.05rem; line-height:1.75; color:#4a4038; }
.app .result-tag{
  display:inline-block;
  font:600 0.68rem 'Jost', sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--kicker);
  border:1px solid var(--t-line);
  padding:8px 11px;
  margin-bottom:12px;
}
.app .share-card{ background:#f3ecdf; border:1px solid var(--t-line); padding:28px; max-width:600px; margin-top:34px; }
.app .share-score{ font:600 3.6rem/1 'Playfair Display', serif; color:var(--accent-dark); }
.app .share-pattern{ font-family:'Playfair Display', serif; font-size:1.75rem; margin:10px 0; }
.app .note{ font:0.78rem/1.5 'Jost', sans-serif; color:var(--muted); }

.app .text-link{
  display:block;
  margin:16px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  font:0.82rem 'Jost', sans-serif;
  text-decoration:underline;
  cursor:pointer;
}
.app .text-link:hover{ color:var(--text-dark); }

.app .perspective-box,
.app .example-box,
.app .snapshot-note{ background:#f3ecdf; }
.app .perspective-box{ margin-top:28px; padding:20px 22px; border:1px solid var(--t-line); }
.app .perspective-box strong{ font:600 0.95rem 'Jost', sans-serif; letter-spacing:.02em; }
.app .snapshot-note{ max-width:700px; margin:18px 0 28px; padding:14px 16px; border-left:3px solid var(--t-line); }
.app .example-box{ margin:28px 0; padding:22px 24px; border:1px solid var(--t-line); max-width:760px; }
.app .example-box h3{ margin-top:0; }
.app .example-box p{ margin-bottom:0; }

.app > .footer{ text-align:center; padding:24px; font:0.78rem 'Jost', sans-serif; color:var(--muted); }

@media (max-width:700px){
  .app .book-section{ grid-template-columns:1fr; justify-items:start; }
  .app .book-cover{ max-width:220px; }
}
@media (max-width:650px){
  .app .topbar{ padding:20px 0; }
  .app .topbar .brand{ font-size:0.62rem; letter-spacing:2px; }
  .app .progress-text{ font-size:0.7rem; }
  .app main{ padding:30px 0; }
  .app .email-row{ flex-direction:column; }
  .app .btn{ width:100%; text-align:center; }
}

/* ============================================================
   Books page — featured new release + all books grid
   ============================================================ */
.bk-featured{ background:#fbfaf7; padding:80px 6vw; }
.bk-featured-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(260px,400px) 1fr;
  gap:70px; align-items:center;
}
.bk-featured-cover{ position:relative; padding:22px; border:1px solid #d9cbb9; background:#fbfaf7; }
.bk-featured-cover img{ width:100%; height:auto; display:block; box-shadow:0 18px 40px rgba(44,34,26,.16); }
.bk-new{
  position:absolute; top:-14px; left:22px; z-index:2;
  background:var(--rust); color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:2px;
  padding:7px 14px;
}
.bk-featured-copy h2{
  font-family:'Playfair Display',serif; font-weight:500;
  font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.1;
  color:#2b201a; margin-bottom:12px;
}
.bk-featured-sub{ font-size:1.02rem; color:#665b53; line-height:1.6; margin-bottom:24px; max-width:560px; }
.bk-hook{
  border-left:2px solid #cf8060; padding:2px 0 2px 20px; margin-bottom:22px;
  font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; color:#67594f;
}
.bk-featured-copy > p:not(.bk-hook){ color:#665b53; font-size:1rem; line-height:1.85; max-width:620px; margin-bottom:20px; }
.bk-helps{ font-size:.72rem; letter-spacing:2px; font-weight:600; color:var(--kicker); margin-bottom:12px; text-transform:uppercase; }
.bk-list{ list-style:none; max-width:620px; margin-bottom:30px; }
.bk-list li{
  position:relative; padding:9px 0 9px 26px;
  border-bottom:1px solid rgba(44,34,26,.1);
  font-size:.95rem; color:#4a4038; line-height:1.5;
}
.bk-list li::before{ content:""; position:absolute; left:4px; top:17px; width:8px; height:8px; border-radius:50%; background:#cf8060; }
.bk-featured-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.bk-btn-solid,.bk-btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; font-size:.75rem; font-weight:600; letter-spacing:1.5px;
}
.bk-btn-solid{ background:var(--accent-brown); color:#fbf7f0; border:1px solid var(--accent-brown); }
.bk-btn-solid:hover{ background:var(--accent-brown-dark); }
.bk-btn-outline{ border:1px solid var(--line); color:var(--text-dark); }
.bk-btn-outline:hover{ border-color:var(--accent-brown); background:rgba(239,232,220,.6); }
.bk-featured-meta{ display:flex; gap:24px; font-size:.8rem; letter-spacing:1px; color:#7a7062; }
.bk-featured-meta span:first-child{ font-weight:600; color:var(--text-dark); }

.bk-all .section-kicker{ text-align:center; margin-bottom:12px; }
.bk-all .section-heading{ margin-bottom:46px; }
.bk-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:28px; max-width:1180px; margin:0 auto;
}
.bk-card{
  display:flex; gap:26px; align-items:flex-start;
  background:#fbf8f2; border:1px solid #e3d8c8; padding:26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.bk-card:hover{ transform:translateY(-3px); box-shadow:0 10px 25px rgba(55,42,30,.08); }
.bk-cover{ flex:0 0 150px; }
.bk-cover img{ width:100%; height:auto; display:block; box-shadow:0 10px 22px rgba(0,0,0,.16); }
.bk-body{ flex:1; min-width:0; }
.bk-cat{ font-size:.65rem; letter-spacing:2px; font-weight:600; color:var(--kicker); margin-bottom:8px; }
.bk-body h3{ font-family:'Playfair Display',serif; font-weight:600; font-size:1.25rem; line-height:1.25; color:var(--text-dark); margin-bottom:4px; }
.bk-sub{ font-family:'Playfair Display',serif; font-style:italic; font-size:.92rem; color:var(--accent-brown-dark); margin-bottom:12px; }
.bk-body p{ font-size:.88rem; line-height:1.7; color:#5a5048; margin-bottom:16px; }
.bk-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(44,34,26,.1); }
.bk-price{ font-weight:600; font-size:.9rem; color:var(--text-dark); }
.bk-buy{ font-size:.72rem; font-weight:600; letter-spacing:1.5px; color:var(--accent-brown-dark); }
.bk-buy:hover{ color:var(--text-dark); }

@media (max-width:900px){
  .bk-featured-inner{ grid-template-columns:1fr; gap:44px; }
  .bk-featured-cover{ max-width:340px; margin:0 auto; }
  .bk-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .bk-featured{ padding:56px 6vw; }
  .bk-card{ flex-direction:column; align-items:center; text-align:center; }
  .bk-cover{ flex:none; width:170px; }
  .bk-meta{ justify-content:center; }
}


/* ============================================================
   RESPONSIVE LAYER
   Mobile        320–480px
   Tablet        481–1024px
   Desktop       1025px+
   Large screens 1440px+
   Added last so it wins over earlier rules. The homepage desktop
   layout (1280px+) is left exactly as it was.
   ============================================================ */

/* ---------- Global safety nets (all sizes) ---------- */
html, body{ overflow-x: hidden; }          /* last-resort guard against sideways scroll */
img, video, svg{ max-width: 100%; }
img{ height: auto; }
h1, h2, h3, h4, h5, p, li, blockquote, a{ overflow-wrap: break-word; }
.home-book-copy h2, .home-discover-copy h2{ overflow-wrap: break-word; }

/* Buttons used outside the homepage hero size to their text, not to the viewport */
.page-hero .btn{
  display: inline-flex;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  padding: 15px 28px;
  font-size: 0.75rem;
  white-space: normal;
}

/* ---------- Homepage hero: small desktop / tablet (701–1279px) ----------
   Text and buttons are laid out in a grid over the image, so they can
   never collide whatever the image height. */
@media (min-width: 701px) and (max-width: 1279px){
  .hero{
    display: grid;
    grid-template-columns: 4% minmax(0, 46%) 1fr;
    grid-template-rows: minmax(16px, 22fr) auto auto minmax(16px, 30fr);
    line-height: normal;
  }
  .hero-bg{ grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .hero-scrim{ grid-column: 1 / -1; grid-row: 1 / -1; }
  .hero-text{
    position: relative; left: auto; top: auto;
    grid-column: 2; grid-row: 2;
    width: auto; min-width: 0; z-index: 2;
  }
  .hero-text h1{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
  .hero-buttons{
    position: relative; left: auto; top: auto;
    grid-column: 2; grid-row: 3;
    margin-top: 22px; z-index: 2;
    flex-wrap: wrap; gap: 10px;
  }
  .hero-buttons .btn{
    width: auto; max-width: none;
    height: auto; max-height: none; min-height: 0;
    padding: 13px 20px;
    font-size: 0.72rem;
  }
  .hero-kicker{ display: none; }
}

/* ---------- Homepage ZenWhispers grid (fixes 4 columns on phones) ---------- */
@media (max-width: 1024px){
  .home-whispers .whisper-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .home-whispers .whisper-grid{ grid-template-columns: 1fr; }
  .whisper-card{ min-height: 0; }
}
@media (max-width: 1024px){
  .home-whispers .whisper-card img{ height: auto; max-height: 120px; width: auto; max-width: 100%; }
  .home-whispers .whisper-card > div{ margin-bottom: 16px; }
}
.card-grid .whisper-card img{ width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ============================================================
   TABLET  481–1024px
   ============================================================ */
@media (min-width: 481px) and (max-width: 1024px){
  header{ padding: 16px 28px; }

  /* Check-in */
  .checkin-section{ grid-template-columns: 1fr; gap: 40px; padding: 64px 6vw 70px; }
  .checkin-left p, .checkin-cta{ max-width: 520px; }

  /* Featured book on home */
  .home-book{ grid-template-columns: 1fr; padding: 56px 6vw; }
  .home-book-copy{ padding: 36px 0 0; }
  .home-book-copy h2{ font-size: 2.3rem; }
  .book-frame{ width: min(360px, 70%); }
  .book-frame img{ height: auto; }

  /* Inner pages */
  .page-hero{ padding: 56px 6vw 48px; gap: 40px; }
  .page-hero-text{ flex-basis: 100%; }
  .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 44px; }
  .newsletter{ flex-direction: column; align-items: flex-start; }
  .newsletter-form{ width: 100%; }
  .newsletter-form input{ flex: 1 1 240px; min-width: 0; }

  /* Books page */
  .bk-featured{ padding: 64px 6vw; }
  .bk-featured-inner{ grid-template-columns: 1fr; gap: 48px; }
  .bk-featured-cover{ width: min(340px, 80%); margin: 0 auto; }
  .bk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .bk-card{ flex-direction: column; align-items: center; text-align: center; }
  .bk-cover{ flex: none; width: 160px; }
  .bk-meta{ justify-content: center; flex-direction: column; gap: 8px; }

  /* About */
  .ab-hero{ padding: 56px 6vw 20px; }
  .ab-next-card{ flex-basis: 200px; }

  /* Test */
  .app .book-section{ grid-template-columns: minmax(160px, 220px) 1fr; gap: 28px; }
}

/* Single-column cards on narrower tablets */
@media (min-width: 481px) and (max-width: 640px){
  .bk-grid{ grid-template-columns: 1fr; }
  .bk-card{ flex-direction: row; align-items: flex-start; text-align: left; }
  .bk-cover{ flex: 0 0 130px; width: 130px; }
  .bk-meta{ justify-content: space-between; flex-direction: row; }
}

/* ============================================================
   MOBILE  320–480px
   ============================================================ */
@media (max-width: 480px){
  header{ padding: 14px 16px; gap: 12px; }
  .brand .name{ font-size: 1.45rem; letter-spacing: 2px; }
  .brand .tagline{ font-size: 0.52rem; letter-spacing: 1.5px; }
  .header-right{ gap: 12px; }
  .cta-header{ padding: 9px 12px; font-size: 0.66rem; letter-spacing: 1px; }
  .nav-toggle{ font-size: 1.5rem; padding: 0 2px; }

  /* Home hero (stacked) */
  .hero-text{ padding: 28px 16px 0; }
  .hero-text h1{ font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .hero-buttons{ margin: 22px 16px 32px; flex-direction: column; align-items: stretch; }
  .hero-buttons .btn{ width: 100% !important; white-space: normal; padding: 14px 16px; font-size: 0.7rem; }
  .hero-kicker{ display: none; }

  /* Check-in */
  .checkin-section{ grid-template-columns: 1fr; gap: 32px; padding: 48px 16px 56px; }
  .checkin-left h2{ font-size: 1.7rem; }
  .checkin-left p{ max-width: none; }
  .checkin-cta{ max-width: none; }
  .checkin-tags{ gap: 10px; }
  .checkin-tag{ white-space: normal; text-align: left; padding: 10px 16px; font-size: 0.82rem; }
  .checkin-highlight{ padding: 24px 20px; }

  /* Home whispers + book */
  .home-whispers{ padding: 44px 16px 56px; }
  .whispers-heading{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .home-whispers h2{ font-size: 1.8rem; }
  .home-book{ grid-template-columns: 1fr; padding: 44px 16px; min-height: 0; }
  .home-book-copy{ padding: 28px 0 0; }
  .home-book-copy h2{ font-size: 1.8rem; }
  .book-frame{ width: 100%; max-width: 300px; padding: 14px; }
  .book-frame img{ height: auto; }
  .home-pill{ min-width: 0; width: 100%; }

  /* Footer */
  .site-footer{ padding: 40px 16px 0; }
  .footer-brand .name{ font-size: 1.5rem; }
  .footer-nav{ gap: 10px 18px; }
  .footer-quote{ font-size: 1rem; padding: 24px 0; }

  /* Inner pages */
  .page-hero{ padding: 40px 16px 36px; gap: 28px; }
  .page-hero-text{ flex-basis: 100%; }
  .page-hero-text h1{ font-size: 1.75rem; }
  .page-hero .btn{ width: 100%; justify-content: center; text-align: center; }
  .page-hero-media .spine-stack{ width: 100% !important; max-width: 260px; }
  .section-wrap{ padding: 48px 16px; }
  .card-grid{ grid-template-columns: 1fr; gap: 28px; }
  .newsletter{ padding: 32px 16px; flex-direction: column; align-items: stretch; }
  .newsletter-form{ flex-direction: column; }
  .newsletter-form input{ min-width: 0; width: 100%; }
  .newsletter-form button{ width: 100%; }
  .quote-banner{ padding: 40px 16px; }

  /* Connect */
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .form-row{ flex-direction: column; }
  .form-row input, .contact-form textarea{ min-width: 0; width: 100%; }
  .contact-form .send-btn{ width: 100%; }
  .section-wrap[style*="display:flex"]{ gap: 28px !important; }
  .section-wrap[style*="display:flex"] > div{ flex-basis: 100% !important; }
  .section-wrap .btn{ white-space: normal; text-align: center; }

  /* Books */
  .bk-featured{ padding: 48px 16px; }
  .bk-featured-inner{ grid-template-columns: 1fr; gap: 40px; }
  .bk-featured-cover{ width: 100%; max-width: 280px; margin: 0 auto; padding: 14px; }
  .bk-featured-copy h2{ font-size: 1.8rem; }
  .bk-featured-actions{ flex-direction: column; }
  .bk-btn-solid, .bk-btn-outline{ width: 100%; text-align: center; }
  .bk-grid{ grid-template-columns: 1fr; gap: 20px; }
  .bk-card{ flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
  .bk-cover{ flex: none; width: 150px; }
  .bk-meta{ justify-content: center; flex-direction: column; gap: 8px; }

  /* About */
  .ab-hero{ padding: 40px 16px 36px; gap: 28px; }
  .ab-hero-text{ flex-basis: 100%; }
  .ab-hero-media{ flex-basis: 100%; }
  .ab-hero-media img{ max-width: 100%; }
  .ab-hero-text h1{ font-size: 1.8rem; }
  .ab-story, .ab-believe{ padding: 48px 16px; }
  .ab-story .ab-pull{ font-size: 1.2rem; padding-left: 16px; }
  .ab-believe .ab-pause{ font-size: 1.35rem; }
  .ab-next{ padding: 40px 16px 48px; }
  .ab-next-card{ flex-basis: 100%; }

  /* Test */
  .app .topbar{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .app h1{ font-size: 2rem; }
  .app .question{ font-size: 1.5rem; }
  .app .option{ padding: 16px; gap: 12px; font-size: 0.95rem; }
  .app .score{ font-size: 4rem; }
  .app .book-section{ grid-template-columns: 1fr; }
  .app .book-cover{ max-width: 200px; }
  .app .email-box, .app .share-card{ padding: 20px; }
}

/* ============================================================
   DESKTOP  1025px+
   ============================================================ */
@media (min-width: 1025px){
  .card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Nav fits comfortably from 1025px: tighten spacing until there is room */
@media (min-width: 981px) and (max-width: 1199px){
  header{ padding: 18px 28px; }
  nav{ gap: 22px; }
  nav a{ font-size: 0.72rem; letter-spacing: 1.2px; }
  .header-right{ gap: 18px; }
  .cta-header{ padding: 11px 18px; }
  .brand .name{ font-size: 1.8rem; }
}

/* ============================================================
   LARGE SCREENS  1440px+
   Keep line lengths readable and content centred.
   ============================================================ */
@media (min-width: 1440px){
  header{ padding-left: max(40px, calc((100vw - 1600px) / 2)); padding-right: max(40px, calc((100vw - 1600px) / 2)); }
  .site-footer{ padding-left: max(6vw, calc((100vw - 1440px) / 2)); padding-right: max(6vw, calc((100vw - 1440px) / 2)); }
  .page-hero, .newsletter, .quote-banner{ padding-left: max(6vw, calc((100vw - 1320px) / 2)); padding-right: max(6vw, calc((100vw - 1320px) / 2)); }
  .home-whispers .whispers-heading,
  .home-whispers .whisper-grid{ max-width: 1440px; margin-left: auto; margin-right: auto; }
  .home-book{ max-width: none; padding-left: max(7vw, calc((100vw - 1320px) / 2)); padding-right: max(7vw, calc((100vw - 1320px) / 2)); }
  .card-grid, .bk-grid, .bk-featured-inner, .contact-grid{ max-width: 1240px; }
}

/* ---------- Test page: result screen fixes ---------- */
.app .book-hook{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; }
.app .btn{ white-space: normal; }
@media (max-width: 480px){
  .app .email-row .btn{ width: 100%; text-align: center; }
  .app .actions .btn{ width: 100%; text-align: center; }
  .app .pattern{ font-size: 2rem; }
  .app .lead{ font-size: 1.02rem; }
  .app .quote{ font-size: 1.2rem; padding-left: 16px; }
  .app .book-section{ justify-items: center; text-align: center; }
  .app .book-copy{ text-align: left; }
}
.app .result-copy p{ margin-bottom: 14px; }
.app .result-copy h3, .app .screen > h3{ margin: 30px 0 10px; }
.app .screen > .small{ margin-bottom: 12px; }
.app .email-box h3{ margin-bottom: 8px; }
.app .email-box p{ margin-bottom: 8px; }
@media (max-width: 1024px){
  .app{ min-height: 0; }
  .app main{ align-items: flex-start; padding: 28px 0 40px; }
}

/* Homepage featured book: always show the whole cover (fixed 420px height cropped it on wide screens) */
.book-frame{ max-width: 380px; }
.book-frame img{ height: auto; object-fit: contain; box-shadow: 1px 1px 13px 11px #e3e3e3bd;}
.app .book-cover{ aspect-ratio: auto; height: auto; object-fit: contain; }



/* ============================================================
   FLUID SCALE
   Type, buttons and spacing grow smoothly with the screen width
   (clamp) instead of jumping at fixed breakpoints, so nothing is
   tiny on big monitors or oversized on phones.
   Replaces the earlier fixed-px type/button scale.
   ============================================================ */

/* Every rem-based size on the site scales with this:
   16px on phones/tablets -> ~17.5px on laptops -> 19px on big screens */
html{ font-size: clamp(16px, 14.5px + 0.2vw, 19px); }

:root{
  --edge: 40px;                                      /* page side gutter, shared by header + hero */
  --fs-btn: clamp(13px, 10.5px + 0.3vw, 19px);       /* button label */
  --btn-py: clamp(15px, 9px + 0.55vw, 24px);         /* button vertical padding */
  --btn-px: clamp(22px, 12px + 1.1vw, 48px);         /* button horizontal padding */
  --fs-hero: clamp(30px, 10px + 3.25vw, 86px);      /* homepage hero headline (overlay) */
  --fs-page-h1: clamp(28px, 18px + 2vw, 58px);       /* inner page hero headings */
  --fs-h2: clamp(26px, 18px + 1.35vw, 48px);         /* section headings */
  --fs-h2-lg: clamp(28px, 20px + 1.6vw, 54px);       /* large editorial headings */
  --fs-quote: clamp(18px, 15px + 0.5vw, 26px);       /* pull quotes */
}
@media (min-width: 481px) and (max-width: 1024px){ :root{ --edge: 28px; } }
@media (max-width: 480px){ :root{ --edge: 16px; } }
@media (min-width: 1440px){ :root{ --edge: max(40px, calc((100vw - 1600px) / 2)); } }
@media (min-width: 1920px){ :root{ --edge: max(40px, calc((100vw - 1760px) / 2)); } }
@media (min-width: 2400px){ :root{ --edge: max(40px, calc((100vw - 2080px) / 2)); } }
@media (min-width: 3200px){ :root{ --edge: max(40px, calc((100vw - 2400px) / 2)); } }

header{ padding-left: var(--edge); padding-right: var(--edge); }
.brand .tagline{ font-size: max(0.7rem, 12px);     color: #cbbba6;
    display: flex;
    justify-content: space-between; }
.cta-header{
  font-size: clamp(11px, 9px + 0.25vw, 16px);
  padding: clamp(9px, 5px + 0.45vw, 16px) clamp(12px, 6px + 1vw, 32px);
}

/* ---------- Homepage hero ----------
   901px+: headline and buttons sit on the photo, in the empty wall
   area left of the book, lined up with the logo.
   900px and below: photo on top, text and buttons underneath. */
@media (min-width: 901px){
  .hero{
    display: grid;
    grid-template-columns: var(--edge) minmax(0, calc(41vw - var(--edge))) 1fr;
    grid-template-rows: minmax(28px, 1fr) auto auto minmax(28px, 1.15fr);
    line-height: normal;
  }
  .hero-bg{
    grid-column: 1 / -1; grid-row: 1 / -1;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 70% center;
  }
  .hero-scrim{ grid-column: 1 / -1; grid-row: 1 / -1; }
  .hero-text{
    position: relative; left: auto; top: auto;
    grid-column: 2; grid-row: 2;
    width: 90%; min-width: 0; padding: 0; z-index: 2;
  }
  .hero-text h1{ font-size: var(--fs-hero); max-width: 13.5em; }
  .hero-buttons{
    position: relative; left: auto; top: auto;
    grid-column: 2 / -1; grid-row: 3; justify-self: start;
    max-width: calc(46vw - var(--edge));
    margin: clamp(24px, 14px + 1.2vw, 52px) 0 0; z-index: 2;
    display: flex; flex-wrap: wrap; gap: clamp(10px, 0.7vw, 18px);
  }
  .hero-kicker{ display: none; }
}
@media (max-width: 900px){
  .hero{ display: flex; flex-direction: column; line-height: normal; }
  .hero-bg{ width: 100%; height: auto; object-fit: initial; }
  .hero-scrim, .hero-kicker{ display: none; }
  .hero-text{ position: static; width: 100%; min-width: 0; padding: 32px var(--edge) 0; }
  .hero-text h1{ font-size: clamp(26px, 20px + 1.8vw, 36px); }
  .hero-buttons{
    position: static;
    margin: 24px var(--edge) 40px;
    display: flex; flex-wrap: wrap; gap: 10px;
  }
}

.hero-buttons .btn,
.hero-buttons .btn-solid,
.hero-buttons .btn-outline{
  width: auto; max-width: none;
  height: auto; min-height: 48px; max-height: none;
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--fs-btn); letter-spacing: 0.12em; line-height: 1.2;
}
@media (min-width: 481px) and (max-width: 900px){
  .hero-buttons .btn, .hero-buttons .btn-solid, .hero-buttons .btn-outline{ width: auto !important; }
}
@media (max-width: 480px){
  .hero-buttons{ flex-direction: column; align-items: stretch; }
  .hero-buttons .btn, .hero-buttons .btn-solid, .hero-buttons .btn-outline{ width: 100% !important; white-space: normal; }
}

/* ---------- Buttons across the site ---------- */
.btn,
.checkin-cta, .home-pill,
.bk-btn-solid, .bk-btn-outline,
.contact-form .send-btn, .newsletter-form button,
.book-info .buy-btn, .btn-rect, .app .btn{
  font-size: var(--fs-btn);
  letter-spacing: 0.12em;
}
.page-hero .btn, .section-wrap .btn,
.bk-btn-solid, .bk-btn-outline,
.contact-form .send-btn, .btn-rect, .app .btn{
  height: auto; max-height: none;
  min-height: 48px;
  padding: var(--btn-py) var(--btn-px);
}
.checkin-cta{ padding: var(--btn-py) 0; }
.home-pill{ min-height: 48px; padding: calc(var(--btn-py) - 2px) var(--btn-px); }
.book-info .buy-btn{ padding: calc(var(--btn-py) - 4px) var(--btn-px); }
.newsletter-form button{ min-height: 48px; padding: 0 var(--btn-px); }
.newsletter-form input, .form-row input, .contact-form textarea, .app .email-row input{ font-size: max(1rem, 16px); }  /* 16px+ stops iOS zooming on focus */

/* ---------- Headings & quotes ---------- */
.page-hero-text h1,
.ab-hero-text h1{ font-size: var(--fs-page-h1); }
.bk-featured-copy h2{ font-size: clamp(28px, 18px + 1.8vw, 54px); }
.checkin-left h2,
.section-heading,
.books-heading,
.ab-believe h2{ font-size: var(--fs-h2); }
.home-whispers h2,
.home-book-copy h2,
.home-discover-copy h2{ font-size: var(--fs-h2-lg); }
.checkin-highlight blockquote,
.quote-banner blockquote{ font-size: var(--fs-quote); }
.whisper-card p{ font-size: clamp(1.1rem, 0.9rem + 0.4vw, 1.4rem); }

/* ---------- Test page ---------- */
.app h1{ font-size: clamp(30px, 18px + 2.4vw, 60px); }
.app h2{ font-size: clamp(26px, 18px + 1.4vw, 42px); }
.app .question{ font-size: clamp(22px, 15px + 1.4vw, 38px); }
.app .score{ font-size: clamp(60px, 40px + 3.5vw, 110px); }
.app .pattern{ font-size: clamp(30px, 20px + 2vw, 56px); }
.app .book-hook{ font-size: clamp(24px, 18px + 1vw, 36px); }


/* ---------- Connect page: world map (Mumbai) ---------- */
.world-map{
  position: relative;
  width: 100%;
  max-width: 620px;
}
.page-hero-media .world-map img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  box-shadow: none;
}
.map-pin{
  position: absolute;
  width: 0;
  height: 0;
}
.map-dot{
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--rust);
  box-shadow: 0 1px 4px rgba(44,34,26,0.35);
}
.map-pulse{
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(193,88,58,0.35);
  animation: mapPulse 2.4s ease-out infinite;
}
.map-label{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  white-space: nowrap;
}
@keyframes mapPulse{
  0%   { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(1.6);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .map-pulse{ animation: none; opacity: 0.5; }
}
@media (max-width: 560px){
  .map-dot{ left: -5px; top: -5px; width: 10px; height: 10px; border-width: 3px; }
  .map-pulse{ left: -12px; top: -12px; width: 24px; height: 24px; }
  .map-label{ right: 12px; font-size: 0.7rem; }
}

/* ---------- Go to top arrow (all pages, injected by back-to-top.js) ---------- */
.back-to-top{
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  z-index: 1000;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent-brown);
  color: #fff;
  box-shadow: 0 4px 14px rgba(44,34,26,0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s ease;
}
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{ background: var(--accent-brown-dark); }
.back-to-top:focus-visible{ outline: 2px solid var(--text-dark); outline-offset: 3px; }
.back-to-top svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}
@media (max-width: 480px){
  .back-to-top{ width: 42px; height: 42px; }
  .back-to-top svg{ width: 20px; height: 20px; }
}