/* Massage Scribe — homepage only. Loaded after style.css on index.html.

   The page is built from three surfaces: warm paper (--bg), a sand band for
   alternating sections, and one deep ink color for the moments that should
   feel heavier (the problem statement, the Pro plan, the closing call to
   action). Display type is Instrument Serif; the italic carries emphasis. */

.home {
  --sand: #efece5;
  --tile: #eff0ea;
  --on-ink: #eef3f1;
  --on-ink-muted: rgba(238, 243, 241, 0.68);
  --accent-on-ink: #f0b39f;
  --radius-xl: 28px;
}

.section-sand {
  background: var(--sand);
}

/* Shared section head: centered by default, left-aligned where the content
   below reads as a list. */
.head {
  max-width: 780px;
  margin: 0 auto clamp(44px, 6vw, 76px);
  text-align: center;
}
.head h2 {
  margin-bottom: 18px;
}
.head p {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.08rem;
}
.head-left {
  margin-inline: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 20px clamp(32px, 6vw, 88px);
  align-items: end;
  max-width: none;
}
.head-left h2,
.head-left p {
  margin: 0;
}
.head-left h2 {
  max-width: 17ch;
}

/* ---------- Nav ---------- */
.home .nav-links {
  gap: 28px;
}
.home .nav-links a {
  font-size: 0.93rem;
}
.nav-signin {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
}
.nav-signin:hover {
  color: var(--teal-dark);
}
.home .nav-cta .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* ---------- Hero ---------- */
/* Split: the promise on the left, the product large on the right, sitting
   on a sand panel that runs off the right edge of the page. */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  min-height: min(calc(100vh - 68px), 860px);
  /* Left edge matches the nav's container; the right side is left loose so
     the product can run wide. */
  padding: clamp(40px, 5vw, 72px) max(24px, calc((100vw - 1640px) / 2))
    clamp(48px, 6vw, 88px) max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero h1 em {
  display: block;
  color: var(--terracotta);
}
.hero .lead {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-secondary);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero .store-row {
  margin-top: 18px;
}
.hero-note {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.hero-visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.hero-visual::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 8%;
  right: -50vw;
  border-radius: 40px 0 0 40px;
  background: linear-gradient(160deg, #e9efe9 0%, var(--sand) 70%);
}
.hero-visual picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 118%;
  max-width: none;
  margin-left: -4%;
}
.hero-devices {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 44px rgba(23, 32, 30, 0.14));
  /* The page's one authored motion: the devices settle, then the chip lands. */
  animation: devicesIn 1.2s var(--ease-out) both;
}
@keyframes devicesIn {
  from {
    opacity: 0.3;
    transform: translateY(32px) scale(0.97);
  }
}
.float-chip {
  position: absolute;
  z-index: 2;
  left: 44%;
  bottom: 20%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -12px rgba(23, 32, 30, 0.28);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal-dark);
  white-space: nowrap;
  animation: chipIn 0.7s var(--ease-out) 0.8s both;
}
.float-chip svg {
  width: 16px;
  height: 16px;
  fill: var(--success);
}
@keyframes chipIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- Store buttons ---------- */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  transition: transform 0.2s var(--ease-out), background 0.2s ease;
}
.store-btn:hover {
  color: #fff;
  background: #000;
  transform: translateY(-1px);
}
.store-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.store-btn span {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.store-btn small {
  font-size: 0.69rem;
  opacity: 0.78;
}
.store-btn strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.store-btn-light {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.store-btn-light:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- Problem statement ---------- */
.statement {
  background: var(--ink);
  padding: clamp(96px, 13vw, 176px) 0;
  text-align: center;
}
.statement-text {
  max-width: 27ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink-muted);
  text-wrap: balance;
}
.statement-text em {
  font-style: italic;
  color: var(--accent-on-ink);
}

/* ---------- How it works ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.step-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(23, 32, 30, 0.05);
}
.step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out);
}
.tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out);
}
.step:hover .step-media img,
.tile:hover .tile-media img {
  transform: translateY(-6px);
}
.step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 10px;
  font-size: 1.16rem;
}
.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--terracotta-ink);
}
.step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}

/* ---------- Feature tiles ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  height: 560px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(23, 32, 30, 0.05);
}
.tile-text {
  padding: 34px 34px 0;
}
.tile h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tile p {
  margin: 0;
  max-width: 32ch;
  color: var(--text-secondary);
  font-size: 0.97rem;
}
/* The screen bleeds off the bottom of the tile; its top edge fades into the
   tile so the store render's own background never shows a seam. */
.tile-media {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  margin-top: 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.tile-wide {
  grid-column: span 2;
  flex-direction: row;
  height: 560px;
}
.tile-wide .tile-text {
  flex: 1;
  align-self: center;
  padding: 48px;
}
.tile-wide h3 {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
}
.tile-wide .tile-media {
  flex: 0 0 52%;
  margin-top: 36px;
}

/* The six core tools, as a quiet list under the tiles. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
  margin-top: clamp(56px, 7vw, 96px);
}
.feature {
  padding-top: 22px;
  border-top: 1px solid #d9d4ca;
}
.feature h3,
.privacy-list h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 1.02rem;
}
.feature p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: 0.94rem;
}
.ico {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 0.08em;
  fill: none;
  stroke: var(--teal-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag-pro {
  align-self: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--terracotta-ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 4vw, 44px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.plan-badge {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--terracotta-ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.plan .price {
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan .price span {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--text-muted);
}
.plan .annual {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--teal-dark);
}
.plan .annual s {
  margin-right: 4px;
  color: var(--text-muted);
  font-weight: 400;
}
.plan .annual-alt {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.plan ul {
  flex: 1;
  list-style: none;
  margin: 28px 0 32px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.plan li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 17px;
  height: 17px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan li strong {
  color: var(--text);
  font-weight: 600;
}
.plan .btn {
  width: 100%;
}
.plan-pro {
  background: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(23, 32, 30, 0.55);
  color: var(--on-ink);
}
.plan-pro h3,
.plan-pro .price {
  color: #fff;
}
.plan-pro .price span,
.plan-pro .annual s,
.plan-pro .annual-alt {
  color: var(--on-ink-muted);
}
.plan-pro .annual {
  color: #9fd8cf;
}
.plan-pro ul,
.plan-pro li {
  border-color: rgba(255, 255, 255, 0.1);
}
.plan-pro li {
  color: var(--on-ink);
}
.plan-pro li strong {
  color: #fff;
}
.plan-pro li::before {
  background: #7fcdc3;
}
.trial-note {
  max-width: 60ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- Privacy (and FAQ) split ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.split-aside {
  position: sticky;
  top: 108px;
}
.split-aside h2 {
  max-width: 12ch;
  margin-bottom: 20px;
}
.split-aside p {
  max-width: 36ch;
  color: var(--text-secondary);
  font-size: 1.04rem;
}
.split-aside .privacy-more {
  margin-top: 28px;
  font-size: 0.93rem;
}
.privacy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
}
.privacy-list li {
  padding-top: 22px;
  border-top: 1px solid #d9d4ca;
}
.privacy-list p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ---------- About ---------- */
.about {
  text-align: center;
}
.about h2 {
  max-width: 16ch;
  margin: 0 auto 24px;
}
.about h2 em {
  color: var(--teal-dark);
}
.about p {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* ---------- Guides ---------- */
.all-guides {
  white-space: nowrap;
  font-weight: 600;
}
.guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d9d4ca;
}
.guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 8px clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid #d9d4ca;
  color: inherit;
}
.guide-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  line-height: 1.15;
  transition: color 0.2s ease;
}
.guide-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.guide-arrow {
  color: var(--teal-dark);
  font-size: 1.2rem;
  transition: transform 0.3s var(--ease-out);
}
.guide-row:hover {
  color: inherit;
}
.guide-row:hover h3 {
  color: var(--teal-dark);
}
.guide-row:hover .guide-arrow {
  transform: translateX(6px);
}

/* ---------- FAQ ---------- */
/* Native <details>: answers stay in the DOM for crawlers and work without JS. */
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  position: relative;
  padding: 24px 48px 24px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--teal-dark);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 4px;
}
/* A plus that turns into a minus. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--teal-dark);
  transition: transform 0.3s var(--ease-out);
}
.faq-item summary::after {
  transform: rotate(90deg);
}
.faq-item[open] summary::after {
  transform: rotate(0deg);
}
.faq-answer {
  max-width: 62ch;
  padding: 0 0 26px;
  color: var(--text-secondary);
}
.faq-answer p {
  margin: 0;
}
.faq-answer a {
  color: var(--teal-dark);
}

/* ---------- Closing call to action ---------- */
.cta {
  padding: 0 0 clamp(56px, 8vw, 104px);
}
.cta-panel {
  padding: clamp(64px, 9vw, 120px) 24px;
  border-radius: 36px;
  background: var(--ink);
  text-align: center;
  color: var(--on-ink);
}
.cta-panel h2 {
  max-width: 15ch;
  margin: 0 auto 20px;
  color: #fff;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
}
.cta-panel h2 em {
  color: var(--accent-on-ink);
}
.cta-panel p {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--on-ink-muted);
  font-size: 1.05rem;
}
.cta-panel .hero-actions {
  justify-content: center;
  margin-top: 32px;
}
.cta-panel .store-row {
  justify-content: center;
  margin-top: 20px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.form-field {
  margin-bottom: 18px;
}
.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 500;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #d9d4ca;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(31, 138, 130, 0.14);
}
.honeypot {
  position: absolute;
  left: -9999px;
}
.form-status {
  min-height: 1.2em;
  margin-top: 12px;
  font-size: 0.9rem;
}
.contact-aside {
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--sand);
}
.contact-aside h3 {
  margin-bottom: 12px;
}
.contact-aside p {
  color: var(--text-secondary);
}
.contact-aside a {
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-wrap {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 48px 24px 56px;
    text-align: center;
  }
  .hero .lead {
    margin-inline: auto;
  }
  .hero-actions,
  .hero .store-row {
    justify-content: center;
  }
  .hero-visual::before {
    left: -24px;
    right: -24px;
    top: 14%;
    bottom: -56px;
    border-radius: 0;
  }
  .hero-visual picture {
    width: 100%;
    margin: 12px 0 0;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile-wide {
    grid-column: span 2;
  }
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .head-left,
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .split-aside {
    position: static;
  }
  .steps {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2.7rem, 12vw, 3.6rem);
  }
  .hero-actions .btn {
    flex: 1 1 100%;
  }
  .hero .store-row,
  .cta-panel .store-row {
    gap: 8px;
  }
  .float-chip {
    display: none;
  }
  .bento,
  .feature-list,
  .plans,
  .privacy-list {
    grid-template-columns: 1fr;
  }
  .tile-wide {
    grid-column: auto;
    flex-direction: column;
  }
  .tile-wide .tile-text {
    flex: none;
    align-self: stretch;
    padding: 30px 28px 0;
  }
  .tile-wide h3 {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
  }
  /* On a phone the tile follows its screenshot instead of a fixed height,
     so the screen shows down past its floating card. */
  .tile,
  .tile-wide {
    height: auto;
  }
  .tile-text {
    padding: 30px 28px 0;
  }
  .tile-media,
  .tile-wide .tile-media {
    flex: none;
    aspect-ratio: 4 / 5;
    margin-top: 20px;
  }
  .guide-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .guide-row p {
    grid-column: 1;
  }
  .guide-arrow {
    grid-row: 1;
    grid-column: 2;
  }
  .cta-panel {
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-devices,
  .float-chip {
    animation: none;
  }
  .step-media img,
  .tile-media img {
    transition: none;
  }
}