/* ============================================================
   THERAPY THINGZ — shared design tokens & styles
   Hub for apps · book · courses · shop
   Palette: sunlit apothecary — plum ink, warm paper,
   marigold (Raya's signature), raspberry, grounded sage.
   Type: Bricolage Grotesque (display) · Figtree (body) ·
         Space Mono (hangtag / price labels = the signature)
   ============================================================ */

:root{
  /* color */
  --paper:      #FCF4EC;
  --paper-2:    #F6E8D8;
  --card:       #FFFDFA;
  --ink:        #2A2440;
  --ink-soft:   #5B5273;
  --ink-faint:  #8A82A0;
  --marigold:   #F79200;
  --marigold-d: #D97B00;
  --raspberry:  #D24B6A;
  --sage:       #5B7A6B;
  --sage-d:     #47614F;
  --line:       #EAD9C6;
  --line-2:     #E0CDB6;

  /* type */
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:    "Figtree", system-ui, -apple-system, sans-serif;
  --label:   "Space Mono", ui-monospace, monospace;

  /* scale */
  --step--1: clamp(.82rem,.78rem + .2vw,.9rem);
  --step-0:  clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:  clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:  clamp(1.5rem,1.3rem + 1vw,1.95rem);
  --step-3:  clamp(2rem,1.6rem + 2vw,3rem);
  --step-4:  clamp(2.7rem,2rem + 3.4vw,4.8rem);

  /* space + shape */
  --wrap: 1160px;
  --gutter: clamp(1.1rem,4vw,2.4rem);
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 0 rgba(42,36,64,.04), 0 18px 40px -24px rgba(42,36,64,.35);
  --shadow-lg: 0 30px 70px -34px rgba(42,36,64,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink); }
p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--marigold); color:#fff; }

.wrap{ width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.center{ text-align:center; }

/* ---------- shelf label (the signature device) ---------- */
.tag{
  font-family:var(--label);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--label); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--marigold-d); margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--marigold); }

/* hangtag — used for prices & category flags everywhere */
.hangtag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--label); font-size:.8rem; font-weight:700;
  color:var(--ink); background:var(--paper);
  border:1.5px solid var(--ink); border-radius:999px;
  padding:.28rem .7rem .28rem .5rem; position:relative;
}
.hangtag::before{ /* the punch-hole */
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--ink);
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:var(--step--1);
  letter-spacing:.01em; line-height:1;
  padding:.85rem 1.35rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1.6px solid var(--bd);
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(42,36,64,.6); }
.btn:active{ transform:translateY(0); }
.btn--primary{ --bg:var(--marigold); --fg:#3a2600; --bd:var(--marigold); }
.btn--primary:hover{ background:var(--marigold-d); --bd:var(--marigold-d); }
.btn--berry{ --bg:var(--raspberry); --fg:#fff; --bd:var(--raspberry); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2); }
.btn--ghost:hover{ --bd:var(--ink); }
.btn--sm{ padding:.6rem 1rem; }
.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; border-radius:6px; }

/* ============================================================
   HEADER / NAV  (injected by js/script.js)
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s; }
.site-header.is-stuck{ border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; gap:1.2rem;
  height:70px; width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; font-family:var(--display);
  font-weight:800; font-size:1.22rem; letter-spacing:-.02em; color:var(--ink); }
.brand .mark{ width:30px; height:30px; flex:0 0 auto; }
.brand .z{ color:var(--marigold); }
.nav__links{ display:flex; align-items:center; gap:.35rem; }
.nav__links a{ font-size:.94rem; font-weight:600; color:var(--ink-soft);
  padding:.5rem .7rem; border-radius:999px; transition:color .18s, background .18s; }
.nav__links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav__links a[aria-current="page"]{ color:var(--ink); background:var(--paper-2); }
.nav__cta{ margin-left:.4rem; }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem;
  color:var(--ink); }
.nav__toggle svg{ width:26px; height:26px; }

@media (max-width:860px){
  .nav__cta{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__links{ position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:.2rem; padding:1rem var(--gutter) 1.6rem; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s, transform .2s, visibility .2s; }
  .nav__links.open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav__links a{ font-size:1.05rem; padding:.75rem .6rem; }
  .nav__links .nav__cta{ display:inline-flex; margin:.5rem 0 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center; }
.hero__title{ font-size:var(--step-4); margin:0 0 1.1rem; }
.hero__title .hl{ color:var(--marigold); }
.hero__lead{ font-size:var(--step-1); color:var(--ink-soft); max-width:34ch; margin:0 0 1.6rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }
.hero__art{ position:relative; }
.hero__art img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); aspect-ratio:16/10; object-fit:cover; background:var(--paper-2); }
.hero__badge{ position:absolute; bottom:-14px; left:-14px; background:var(--card);
  border:1.5px solid var(--ink); border-radius:14px; padding:.6rem .85rem; box-shadow:var(--shadow);
  transform:rotate(-4deg); font-family:var(--label); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; max-width:190px; line-height:1.35; }
.hero__badge b{ color:var(--marigold-d); }

/* value chips (Compassionate / Grounded / ...) */
.values{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.values .chip{ font-family:var(--label); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--card); border:1px solid var(--line-2);
  border-radius:999px; padding:.4rem .8rem; }

@media (max-width:820px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; }
  .hero__lead{ max-width:46ch; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(3rem,6vw,5rem) 0; }
.section--alt{ background:var(--paper-2); }
.section__head{ max-width:60ch; margin:0 0 2.2rem; }
.section__head.center{ margin-inline:auto; }
.section__title{ font-size:var(--step-3); margin:0 0 .5rem; }
.section__sub{ color:var(--ink-soft); font-size:var(--step-1); margin:0; }
.section__head .btn{ margin-top:1.2rem; }

/* directory (the four worlds) */
.dir{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.dir__card{ position:relative; display:flex; flex-direction:column; gap:.5rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.2rem 1.4rem; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.dir__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.dir__num{ font-family:var(--label); font-size:.72rem; color:var(--marigold-d); letter-spacing:.1em; }
.dir__card h3{ font-size:var(--step-1); }
.dir__card p{ color:var(--ink-soft); font-size:var(--step--1); margin:0; }
.dir__card .arrow{ margin-top:auto; font-family:var(--label); font-size:.8rem; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem; }
.dir__card:hover .arrow{ color:var(--marigold-d); }
@media (max-width:900px){ .dir{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dir{ grid-template-columns:1fr; } }

/* card grid (apps / courses / products share this) */
.grid{ display:grid; gap:1.4rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--auto{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
@media (max-width:820px){ .grid--3{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card__media{ aspect-ratio:1/1; background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__media.contain img{ object-fit:contain; padding:1.4rem; }
.card__body{ padding:1.2rem 1.2rem 1.35rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card__row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.card__body h3{ font-size:var(--step-1); }
.card__body p{ color:var(--ink-soft); font-size:var(--step--1); margin:0; }
.card__foot{ margin-top:auto; padding-top:.4rem; }
.badge{ font-family:var(--label); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:999px; }
.badge--live{ background:var(--sage); color:#fff; }
.badge--soon{ background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line-2); }
.badge--best{ background:var(--raspberry); color:#fff; }

/* ============================================================
   BOOK FEATURE
   ============================================================ */
.book{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3.2rem); align-items:center; }
.book__cover{ position:relative; }
.book__cover img{ width:100%; border-radius:8px; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); aspect-ratio:2/3; object-fit:cover; background:var(--paper-2); }
.book__cover::after{ content:""; position:absolute; inset:0 auto 0 0; width:8px; border-radius:8px 0 0 8px;
  background:linear-gradient(var(--ink),transparent); opacity:.12; }
.book h2{ font-size:var(--step-3); margin:0 0 .8rem; }
.book blockquote{ margin:1.4rem 0; padding-left:1.2rem; border-left:3px solid var(--marigold);
  font-family:var(--display); font-size:var(--step-1); font-weight:600; color:var(--ink); font-style:italic; }
@media (max-width:760px){ .book{ grid-template-columns:1fr; } .book__cover{ max-width:260px; } }

/* ============================================================
   QUOTE BAND
   ============================================================ */
.quote{ padding:clamp(3rem,7vw,5.5rem) 0; text-align:center; }
.quote p{ font-family:var(--display); font-weight:700; font-size:var(--step-2); line-height:1.25;
  max-width:24ch; margin:0 auto 1.2rem; letter-spacing:-.02em; }
.quote cite{ font-family:var(--label); font-style:normal; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form{ display:grid; gap:1rem; max-width:560px; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--label); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field textarea{ font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line-2); border-radius:12px; padding:.8rem .9rem; width:100%; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--marigold); }
.field textarea{ min-height:140px; resize:vertical; }
.form__note{ font-size:var(--step--1); color:var(--ink-faint); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.contact-lines{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.contact-lines a{ display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:600; }
.contact-lines .lab{ font-family:var(--label); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:block; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER  (injected)
   ============================================================ */
.site-footer{ background:var(--ink); color:#EFE9F5; padding:clamp(2.6rem,5vw,3.6rem) 0 2rem; margin-top:2rem; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.foot-brand{ font-family:var(--display); font-weight:800; font-size:1.4rem; display:flex; align-items:center; gap:.5rem; }
.foot-brand .z{ color:var(--marigold); }
.site-footer p{ color:#C9C1DA; font-size:var(--step--1); max-width:34ch; }
.foot-col h4{ font-family:var(--label); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marigold); margin:0 0 .9rem; }
.foot-col a{ display:block; color:#D6CFE6; font-size:.94rem; padding:.22rem 0; }
.foot-col a:hover{ color:#fff; }
.foot-socials{ display:flex; gap:.6rem; margin-top:1rem; }
.foot-socials a{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); color:#EFE9F5; }
.foot-socials a:hover{ background:var(--marigold); border-color:var(--marigold); color:#3a2600; }
.foot-socials svg{ width:18px; height:18px; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.2rem; padding-top:1.3rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.foot-bottom small{ color:#9A92AE; font-size:.8rem; }
.foot-bottom .dot{ color:#5F5877; }
@media (max-width:760px){ .site-footer .wrap{ grid-template-columns:1fr 1fr; } .foot-brand-col{ grid-column:1/-1; } }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* small helpers */
.mt-0{ margin-top:0; } .lead{ color:var(--ink-soft); font-size:var(--step-1); }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }