/* Intimate Plus page (/plus/). Uses the shared tokens from styles.css. */

.pp-micro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* The plan card ---------------------------------------------------------- */
.pp {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lift);
  overflow: hidden;
}
.pp::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--me), var(--dusk), var(--partner));
}
.pp__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.pp__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pp__tag {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Segmented control: yearly / monthly, works without JavaScript */
.pp__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pp__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-full);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast, 0.15s), color var(--t-fast, 0.15s), box-shadow var(--t-fast, 0.15s);
}
.pp__opt i {
  font-style: normal;
  font-size: var(--fs-xs);
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-full);
  background: var(--sage-soft);
  color: var(--sage-ink);
  white-space: nowrap;
}
#pp-yearly:checked ~ .pp__switch label[for="pp-yearly"],
#pp-monthly:checked ~ .pp__switch label[for="pp-monthly"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-card);
}
.pp__radio:focus-visible ~ .pp__switch {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Prices */
.pp__price { display: none; }
#pp-yearly:checked ~ .pp__prices .pp__price--yearly,
#pp-monthly:checked ~ .pp__prices .pp__price--monthly { display: block; }
.pp__amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pp__amount span {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  color: var(--muted);
  letter-spacing: 0;
}
.pp__sub { margin: var(--s-2) 0 0; color: var(--ink-2); }

/* Tick lists */
.pp__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pp__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}
.pp-tick {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.pp-tick svg { width: 0.85rem; height: 0.85rem; }
.pp__fine { margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.pp__fine--muted { font-size: var(--fs-xs); color: var(--muted); }

/* Comparison table */
.pp-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.pp-table { width: 100%; min-width: 0; border-collapse: collapse; }
.pp-table thead th:not(:first-child), .pp-table td { width: 3.6rem; padding-inline: 0.2rem; }
.pp-table th, .pp-table td { padding: 0.95rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.pp-table tbody tr:last-child th, .pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table thead th { font-weight: 600; background: var(--surface-2); }
.pp-table thead th:last-child { color: var(--accent-ink); }
.pp-table tbody th { text-align: left; font-weight: 500; }
.pp-table .pp-tick { margin-inline: auto; }
.pp-dash { color: var(--muted); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .pp__opt { flex-direction: column; gap: 0.15rem; padding-inline: 0.5rem; }
}

/* Plus gold, as on the feature pages (features.css sets the same on body.feat) */
body.plus { --plus: #9a6a12; --plus-soft: #f6ead2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.plus { --plus: #e2b75c; --plus-soft: #3a2f1a; } }
:root[data-theme="dark"] body.plus { --plus: #e2b75c; --plus-soft: #3a2f1a; }


/* ==========================================================================
   Sales page layout (Oct 2026): hero with a phone, three proof rows, an icon grid, price, table, gifts, FAQ.
   Rows reuse the home page's Spark rows (.sp-row, .sp-copy, .sp-chips and their motion in styles.css, section 21).
   ========================================================================== */
body.plus .section { padding-block: clamp(2rem, 3.4vw, 3rem); }
body.plus .section--tight { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); }
body.plus .section-head { margin-bottom: var(--s-4); }
body.plus .section-head .h2 { margin: 0; }

/* Hero */
.pp-hero { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.pp-hero__grid { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-4); }
.pp-hero__copy { display: grid; gap: var(--s-4); align-content: center; min-width: 0; }
.pp-hero__copy > * { margin: 0; }
.pp-hero .cluster { margin-top: var(--s-3); }
.pp-hero .pp-micro { margin-top: calc(var(--s-2) * -1); }
.pp-from { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.5rem; min-height: 3rem; font-size: var(--fs-base); color: var(--ink-2); text-decoration: none; }
.pp-from:hover { color: var(--accent-ink); }
.pp-from b { color: var(--ink); font-weight: 650; }
.pp-hero__scene { min-height: 0; padding: var(--s-5) var(--s-4) 0; align-items: start; }
@media (min-width: 52rem) {
  .pp-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
}

/* Phones: one size per place. Peek = the phone sits in a window and fades out at the foot, so a phone is never cut by a hard edge. */
.pp-peek { position: relative; width: 100%; display: grid; justify-items: center; overflow: hidden; }
.pp-peek .phone { --phone-w: var(--phone-w-sm); margin: 0 auto; }

.pp-hero__scene .pp-peek, .pp-row .scene .pp-peek { max-height: 15rem; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.pp-row .scene { min-height: 0; padding: var(--s-5) var(--s-4) 0; align-items: start; }
@media (min-width: 40rem) {
  .pp-peek .phone { --phone-w: var(--phone-w-md); }
}
@media (min-width: 52rem) {

  .pp-hero__scene .pp-peek { max-height: 30rem; }
  .pp-row .scene .pp-peek { max-height: 23rem; }
  .pp-hero__scene, .pp-row .scene { padding: var(--s-6) var(--s-5) 0; }
}

/* Proof rows */
.pp-proof { padding-block: clamp(1.5rem, 3.5vw, 3rem); }
.pp-rows { display: grid; gap: clamp(2rem, 5vw, 4rem); }
body.plus .pp-row { gap: var(--s-5) var(--s-8); }
.pp-row .sp-copy { max-width: 32rem; }
.pp-row .phone--fit .phone__screen { min-height: calc(var(--phone-w) * 1.55); }
.pp-more { margin: 0; }
.pp-more a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.sp-row--rit .scene { --scene-a: #f1c27a; --scene-b: #9cc58f; }

/* Spark: with the reduced-motion switch (?motion=reduce) the first idea must still show */
.reduce-motion .js .sp-stack > .fs-idea:first-child { opacity: 1; transform: none; }
.reduce-motion .js .sp-stack > .fs-idea:not(:first-child) { display: none; }

/* Rituals: the candles light up one by one when the row comes into view */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.reduce-motion) .sp-row--rit.is-in .fs-rit--lit { animation: pp-rise 0.7s var(--ease) both; }
  .js:not(.reduce-motion) .sp-row--rit.is-in .fs-rit--lit:nth-of-type(2) { animation-delay: 0.35s; }
  .js:not(.reduce-motion) .sp-row--rit.is-in .fs-rit--lit:nth-of-type(3) { animation-delay: 0.7s; }
  @keyframes pp-rise { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
}

/* Also included: icon grid, 2 across on phones, 4 across from 48rem, never an orphan */
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.pp-tile { display: grid; align-content: start; gap: 0.4rem; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pp-tile h3, .pp-tile p { margin: 0; }
.pp-tile h3 { font-size: var(--fs-lg); line-height: 1.2; }
.pp-tile { min-width: 0; }
.pp-tile p { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.pp-tile__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.25rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); }
.pp-tile__icon svg { width: 1.4rem; height: 1.4rem; }
.pp-tile:nth-child(3n + 2) .pp-tile__icon { background: color-mix(in srgb, var(--dusk) 24%, var(--surface)); color: var(--ink); }
.pp-tile:nth-child(3n) .pp-tile__icon { background: var(--sage-soft); color: var(--sage-ink); }
.pp-note { max-width: 40rem; margin: var(--s-5) auto 0; text-align: center; }
@media (min-width: 48rem) {
  .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
}
@media (max-width: 30rem) { .pp-tile { padding: var(--s-3); } }

/* Price card beside the Free and Plus table (stacked on narrower screens) */
.pp-plans__grid { display: grid; gap: var(--s-7) var(--s-6); align-items: start; }
.pp-col { min-width: 0; }
@media (min-width: 64rem) { .pp-plans__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.pp-col .pp-note { margin: var(--s-3) 0 0; text-align: left; max-width: none; }
.pp { gap: var(--s-4); }
.pp__list { padding-top: var(--s-4); gap: var(--s-2); }

/* Gifts: one compact band */
.pp-gift { display: grid; gap: var(--s-5); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.pp-gift__copy { display: grid; gap: var(--s-2); }
.pp-gift__copy > * { margin: 0; }
.pp-gift__copy p:not(.eyebrow) { color: var(--ink-2); }
.pp-gift__prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: stretch; }
.pp-gift__price { display: grid; align-content: center; gap: 0.2rem; padding: var(--s-3) var(--s-3); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; }
.pp-gift__price > * { margin: 0; }
.pp-gift__price .pp__amount { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.pp-gift__btn { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .pp-gift { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); }
}

/* Table: a little tighter */
.pp-table th, .pp-table td { padding: 0.8rem 1rem; }

/* Closing band: one calm line and one button */
.plus .cta-band { padding-block: var(--s-6); }

.pp-nowrap { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .pp-row .sp-chips li:nth-child(3) { display: none; }
  .pp-row .sp-chips { gap: 0.4rem; }
}
@media (min-width: 70rem) { .pp-peek--hero .phone { --phone-w: var(--phone-w-lg); } }
.pp-hero .crumbs a { display: inline-flex; align-items: center; min-height: 3rem; }
.pp-hero .crumbs { margin: 0; }

/* ---- Tighter on phones (Oct 2026 pass): fewer pixels to scroll, same facts ---- */
.pp-faq .section-head { margin-bottom: var(--s-4); }
.pp-faq .faq { max-width: 48rem; margin-inline: auto; }
.pp-hero .crumbs a { min-width: 3rem; justify-content: center; }
@media (max-width: 39.99rem) {
  .pp-hero .crumbs { display: none; }
  .pp-hero { padding-top: var(--s-5); }
  .pp-row .sp-chips { display: none; }
  .pp-rows { gap: var(--s-7); }
  .pp-row { gap: var(--s-4); }
  .pp-row .sp-copy { gap: var(--s-2); }
  .pp-row .sp-line { font-size: var(--fs-base); }
  .pp-hero .lead { font-size: var(--fs-base); }
  .pp-row .scene { padding-top: var(--s-4); }
  .pp-hero__scene .pp-peek, .pp-row .scene .pp-peek { max-height: 15rem; }
  .pp-tile { gap: 0.3rem; padding: var(--s-3); }
  .pp-tile__icon { width: 2.25rem; height: 2.25rem; margin: 0; }
  .pp-tile h3 { font-size: var(--fs-base); }
  .pp__head { display: none; }
  .pp { padding: var(--s-4); gap: var(--s-3); padding-top: var(--s-5); }
  .pp-table { font-size: var(--fs-sm); }
  .pp-table th, .pp-table td { padding-block: 0.6rem; }
  .pp-table thead th:not(:first-child), .pp-table td { width: 3.1rem; }
  .pp-table tbody th { padding-inline: 0.75rem 0.25rem; }
  .pp-gift { padding: var(--s-4); gap: var(--s-4); }
  .plus .cta-band { padding-block: var(--s-5); }
  .plus .cta-band__threads { display: none; }
  .plus .cta-band > * + * { margin-top: var(--s-3); }
}
@media (min-width: 52rem) {
  .pp-hero__scene .pp-peek { max-height: 31rem; }
  .pp-row .scene .pp-peek { max-height: 27rem; }
  .pp-hero { padding-bottom: var(--s-6); }
}
.pp-gift__price .eyebrow::before { display: none; }
.pp-gift__price .eyebrow { white-space: nowrap; }
.sp-row .sp-line { font-size: var(--fs-base); }
@media (min-width: 40rem) { .pp-row .sp-line { font-size: var(--fs-lg); } }
@media (max-width: 39.99rem) { body.plus .section { padding-block: 1.6rem; } body.plus .section--tight { padding-block: 1.25rem; } }

/* Tablets (46 to 52rem): copy and phone side by side with a smaller phone */
@media (min-width: 46rem) and (max-width: 51.99rem) {
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
  body.plus .pp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
  .pp-row.split--flip > :first-child { order: 2; }
  .pp-peek .phone { --phone-w: 15rem; }
  .pp-hero__scene .pp-peek { max-height: 26rem; }
  .pp-row .scene .pp-peek { max-height: 21rem; }
  .pp-row .sp-chips li:nth-child(3) { display: none; }
}
.pp-hero .crumbs ol { align-items: center; }
.pp-hero .crumbs li { display: flex; align-items: center; }
@media (min-width: 40rem) { .pp-table thead th:not(:first-child), .pp-table td { width: 4.75rem; } }
.pp-gift__price .eyebrow { display: block; text-align: center; }

/* ---- Reports band: Forecast, Month by month and Connection patterns ---- */
.pp-reports { padding-block: clamp(1.5rem, 3.5vw, 3rem); }
.pp-rcards { display: grid; gap: var(--s-6) var(--s-5); }
.pp-rcard { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.pp-rcard__scene { min-height: 0; padding: var(--s-4) var(--s-4) 0; align-items: start; }
.pp-peek--rep { container-type: inline-size; max-height: 15rem; }
.pp-rcard .pp-peek .phone { --phone-w: min(15rem, 100cqw); }
.pp-rcard .demo__bar { display: none; }
.pp-rcard .demo { gap: 0; }
.pp-rcard__copy { display: grid; gap: var(--s-2); align-content: start; }
.pp-rcard__copy > * { margin: 0; }
.pp-rcard__copy .eyebrow { margin-bottom: 0; }
.pp-rcard__copy p:not(.eyebrow):not(.pp-more):not(.pp-rcard__when) { color: var(--ink-2); font-size: var(--fs-base); }
.pp-rcard__when { font-size: var(--fs-sm); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .pp-rcard { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: center; gap: var(--s-5); }
  .pp-peek--rep { max-height: 17rem; }
}
@media (min-width: 64rem) {
  .pp-rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .pp-rcard__scene { padding: var(--s-5) var(--s-4) 0; }
  .pp-peek--rep { max-height: 24rem; }
  .pp-rcard .pp-peek .phone { --phone-w: min(20rem, 100cqw); }
}
@media (max-width: 47.99rem) { .pp-tile:last-child { grid-column: 1 / -1; } }

/* ---- design audit, features pass: the phone layout of /plus/ ---- */
@media (max-width: 39.99rem) {
  /* hero buttons: one width, stacked */
  .pp-hero .cluster { display: grid; gap: var(--s-3); }
  .pp-hero .cluster .btn { width: 100%; justify-content: center; }
  /* Reports: three phones become a swipe row (the next card peeks in), 1,300px less to scroll */
  .pp-rcards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--s-3); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pp-rcards::-webkit-scrollbar { display: none; }
  .pp-rcard { scroll-snap-align: start; align-content: start; }
  .js .pp-rcard.reveal { opacity: 1; transform: none; }
  .pp-rcard__copy { gap: var(--s-2); }
  .pp-rcard .pp-more a { min-height: 2.75rem; }
  /* Also included: one tile per row, icon on the left, so every title and text start on the same lines */
  .pp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pp-tile, .pp-tile:last-child { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0.1rem; align-items: center; align-content: center; padding: var(--s-3); }
  .pp-tile__icon { grid-row: 1 / span 2; }
  .pp-tile h3 { align-self: end; }
  .pp-tile p { align-self: start; }
}
@media (max-width: 30rem) {
  /* the price switch: Yearly gets the wider half so its label and chip share one line */
  .pp__switch { grid-template-columns: 1.4fr 1fr; }
  .pp__opt { flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; padding-inline: 0.5rem; }
  .pp__opt i { padding-inline: 0.4rem; }
}
/* the two price options are 13px radio inputs hidden behind their labels, so the labels (48px tall) are the tap target */