/* ============================================================
   Motivation with Elements — Portfolio Site
   Depends on tokens.css (import that first).
   ============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'Nemoy';
  src: url('../fonts/NemoyLight.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Nemoy';
  src: url('../fonts/NemoyBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Emoji';
  src: url('../fonts/NotoEmoji-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-warm);
  line-height: 1.6;
  /* Sticky footer: body is a full-height flex column, so the footer
     sits at the bottom on short pages (contact, comingsoon) instead
     of floating up, and never straddles the fold ("half-cut"). main
     grows to fill the gap. The sticky header is unaffected — a flex
     column adds no overflow ancestor, so position:sticky still works. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

/* --- Typography ---
   CHANGED: h1 and h2 now share ONE size (1rem, body font, sage) across both
   pages that use this sheet (index + journaling-timer). The old display-serif
   heading look survives in exactly one place — the index hero <h1> (see
   `.hero h1` below). In every section the visible heading is the
   `.section-eyebrow`, styled just beneath. */
h1, h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage);
  line-height: 1.6;
}
h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lila);
  line-height: 1.6;
}

p { margin-bottom: var(--space-sm); color: var(--text-mid); }

a { color: var(--coral); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--lila); }

/* --- Layout helpers --- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-md); }

section { padding: var(--space-xl) 0; }
section:nth-child(even) { background: var(--bg-tint); }

.section-eyebrow {
  /* This is the real section heading now (Nemoy display, lila). It pairs
     with the small body-font h1/h2 sitting above/below it in each section. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lila);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.section-eyebrow-hero {
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage);
  margin-bottom: var(--space-xs);
}

.section-eyebrow-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--lila);
  line-height: 1.2;
}


/* --- The h2/eyebrow "swap" that used to be .page-home-only now lives in the
   base typography rules above, so it applies to BOTH pages that load this
   sheet (index + journaling-timer). The old .page-home overrides were folded
   in and removed to keep one source of truth. --- */

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 242, 237, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lila);
}
.main-nav ul { list-style: none; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; align-items: stretch; }
.main-nav a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mid);
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-nav a { border: 2px solid transparent; }
.main-nav a:hover { border-color: var(--coral); background: transparent; color: var(--lila); }


.main-nav a.nav-cta {
  border: 1px solid var(--bridge);
  background: var(--bridge);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
}
.main-nav a.nav-cta:hover { background: transparent; border-color: var(--coral); border-width: 2px;
  color: var(--lila); }

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lila);
}

/* --- Hero --- */
.hero {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--bg-warm);
}
.hero h1 {
  /* The ONE exception to the unified 1rem heading size: the index hero keeps
     the large display-serif treatment. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  color: var(--lila);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.hero .lead {
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto var(--space-md);
  color: var(--text-mid);
}

.hero ul.lead {
  list-style: none;
  padding: 0;
}
.hero ul.lead li { margin-bottom: 0.35rem; }
/* Optional — if you want your "•" bullets back, centered: */
/* .hero ul.lead li::before { content: "• "; color: var(--sage); } */

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--bridge);
  background: var(--bridge);
  color: #fff;
  transition: all 0.2s;
}
.btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn.secondary { background: transparent; color: var(--lila); border:  2px solid var(--coral); }
/* was: background: var(--green-transparent); color: var(--lila); */
.btn.secondary:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn.small {
  font-size: 0.7rem;
  padding: 0.45rem 1rem;
  letter-spacing: 0.05em;
}

/* Standalone section CTAs (a .btn sitting directly in a section's .wrap)
   centre themselves. The hero is unaffected — its buttons live in
   .hero-actions, and the subscription CTA in its own centred box. */
.wrap > .btn {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* --- Tools Entry (two paths) --- */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.path-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.path-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(30, 77, 77, 0.1); }
.path-card h3 { margin-bottom: var(--space-xs); }


/* --- Coming-soon cards (horizontal icon + text layout) --------
   Used on comingsoon.html for both the "Upcoming" and "Already
   here" grids. minmax(0, 1fr) is deliberate: it stops long
   single words (SUBSCRIPTION, PERSONALIZED) from stretching a
   column past its share and forcing the whole grid into
   horizontal overflow — which was showing up as an uneven
   middle card AND a gap on the right of nav/footer at tablet.
   ------------------------------------------------------------ */
.cs-section {
  padding: var(--space-lg) var(--space-md);
}
.cs-section:first-of-type { padding-top: var(--space-md); }

.cs-section .wrap { max-width: 960px; margin: 0 auto; }
.cs-section h1,
.cs-section h2 { text-align: center; margin-bottom: var(--space-xs); }
.cs-section .section-eyebrow { text-align: center; }
.cs-section > .wrap > p {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.cs-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.cs-card__icon {
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
  font-family: 'Noto Emoji', sans-serif;
  color: var(--coral);
}
.cs-card__body { flex: 1 1 auto;  min-width: 0; }
.cs-card__body h3 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  color: var(--lila);
}
.cs-card__body p { margin: 0; color: var(--text-mid); }

.cs-card--upcoming {
  background: var(--bg-tint);
  border-style: dashed;
  border-color: var(--border-mid);
}
a.cs-card:hover,
a.cs-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(30, 77, 77, 0.1);
  border-color: var(--border-mid);
  outline: none;
}
a.cs-card .cs-card__body h3 { color: var(--coral); }



/* --- Tools grid --- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.tool-card h3 { margin-bottom: var(--space-xs); }

/* --- Placeholder blocks --- */
.placeholder-block {
  background: var(--bg-card);
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
}

/* --- Email signup --- */
.signup { text-align: center; }
.signup-form {
  display: flex;
  gap: var(--space-xs);
  max-width: 440px;
  margin: var(--space-md) auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.signup-form input {
  flex: 1 1 240px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.signup-form input:focus { outline: 2px solid var(--sage); border-color: var(--sage); }

/* --- Footer sizing (variable-driven; each breakpoint redefines these at
   :root — see the FOOTER SCALE block at the bottom of this file) --- */
:root {
  --fs-footer-h4:   0.72rem;   /* col titles */
  --fs-footer:      0.8rem;    /* col links */
  --fs-footer-meta: 0.68rem;   /* CHANGED: copyright block, was 0.75rem hardcoded */
  --lh-footer:      1.4;       /* NEW: tighter interline than body's 1.6 */
}

/* --- Footer --- */
.site-footer {
  background: var(--bridge);
  color: #fff;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  flex-shrink: 0;   /* never compress the footer in the body flex column */
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: var(--content-max);
  margin: 0 auto var(--space-sm);
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--fs-footer-h4);   /* CHANGED: was 0.72rem */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  color: var(--pinky);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.2rem; }
.footer-col a { color: rgba(255,255,255,0.85); font-size: var(--fs-footer); }   /* CHANGED: was 0.8rem */
.footer-col a:hover { color: #fff; }
.footer-base {
  text-align: center;
  font-size: var(--fs-footer-meta);   /* CHANGED: was 0.75rem */
  line-height: var(--lh-footer);      /* NEW: tighter interline (1.4 → 1.25 across breakpoints) */
  color: rgba(255,255,255,0.6);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Footer padding at tablet -------------------------------
   Held in its OWN 1024 block, placed above the 768 block below,
   so the 768 override wins at exactly 768px. The general 1024
   rules still live near the bottom of the file — only the
   footer padding needs to cascade in strict largest-to-smallest
   source order (1024 → 768 → 480). Do not move this back down.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .site-footer { padding: var(--space-md) var(--space-sm) var(--space-sm); }
}

/* --- Responsive (phone) --- */
@media (max-width: 768px) {
  /* Nav → hamburger */
  .menu-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border-soft);
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: var(--space-sm); align-items: stretch; }
  .main-nav a { display: block; padding: 0.8rem; }
  .main-nav a.nav-cta { text-align: center; margin-top: 0.4rem; }
  .paths { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }

  /* Tighter spacing + type for phones */
  section { padding: var(--space-md) 0; }
  .hero { padding: var(--space-md) var(--space-sm); }
  h1, h2 { font-size: 0.8rem; letter-spacing: 0.12em; }
  p { font-size: 0.85rem; }
  .section-eyebrow { font-size: clamp(0.95rem, 2.5vw, 1.15rem); }
  .hero h1 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .btn { font-size: 0.75rem; padding: 0.65rem 1.4rem; }
  .deck-subscription { margin-top: var(--space-sm); }

 .site-footer { padding: var(--space-sm) var(--space-xs) var(--space-xs); }
  /* CHANGED: font-sizes + p margin removed — now driven by :root vars redefined
     in the FOOTER SCALE block at the bottom of this file. */
}

@media (max-width: 480px) {
  /* Footer stays 2×2 on phones instead of collapsing to one long
     vertical list. Titles ("The method", "Free tools", "Work with me",
     "Read & watch") are short enough to sit two-up on any phone. */
  .footer-cols { gap: var(--space-xs); }
  .footer-col h4 { margin-bottom: 0.15rem; }   /* CHANGED: font-size now via :root var */
  .footer-col li { margin-bottom: 0.1rem; }
  /* CHANGED: footer-col a / footer-base / footer-base p font-sizes removed —
     driven by :root vars in the FOOTER SCALE block at the bottom of this file. */
  section { padding: var(--space-xs) 0; }
  .hero { padding: var(--space-xs) var(--space-xs); }
}


/* ============================================================
   Live Shuffle Stage — THREE equal columns:
   1. Deck + Shuffle button
   2. Toggle lines
   3. Journaling space with revealed text above
   ============================================================ */

.shuffle-stage {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
  margin-top: var(--space-md);
}

/* --- Shared column style --- */
.stage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px dotted var(--border-mid);
  border-radius: var(--radius);
  padding: var(--space-md);
  min-height: 380px;
}

/* --- Column 1: Deck --- */
.deck-visual { position: relative; width: 200px; height: 280px; }
.deck-card {
  position: absolute;
  width: 190px;
  height: 270px;
  border-radius: 8px;
  background: var(--green-transparent) url('../images/deck/back.webp') center / cover no-repeat;
  border: 1px solid var(--border-mid);
}
.deck-visual .deck-card:nth-child(1) { transform: rotate(-3deg) translateX(-4px); }
.deck-visual .deck-card:nth-child(2) { transform: rotate(1deg) translateX(2px); }
.deck-visual .deck-card:nth-child(3) { transform: rotate(3deg) translateX(5px); }
.deck-visual.drawing .deck-card { animation: deckPulse 0.5s ease; }
@keyframes deckPulse {
  50% { transform: translateY(-10px) rotate(0deg); opacity: 0.6; }
}

.drawn-card {
  width: 220px;
  height: 308px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  background: var(--bg-card);
  animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Per-column instruction (at top of each container) --- */
.col-instruction {
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sage);
  text-align: center;
  margin-bottom: var(--space-xs);
  line-height: 1.5;
  width: 100%;
}

/* --- Column 2: Toggle lines — semi-transparent --- */
.toggle-col {
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border-style: dashed;
}

/* --- Column 3: Journal --- */
.journal-col {
  justify-content: flex-start;
  padding-top: var(--space-sm);
}
.journal-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}


/* ============================================================
   SLIDER TOGGLES — horizontal radio-style, stacked vertically
   Each: a thin horizontal track with a circle (knob) sitting
   on it, centered vertically on the line. Dramatic size variation
   across the five toggles. Knob positions shift horizontally.
   ============================================================ */

/* --- Toggle lines: compact vertical spacing, always colored --- */
.slider-toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.slider-toggle {
  position: relative;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.slider-toggle .track {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border-soft);
  border-radius: 1px;
  transform-origin: center;
}
.slider-toggle .knob {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  top: 50%;
}

/* Per-toggle variation — always full color (no dimming) */
.slider-toggle[data-index="0"] .track { transform: rotate(2deg); }
.slider-toggle[data-index="0"] .knob {
  width: 24px; height: 24px;
  background: var(--lila);
  left: 30%;
  margin-top: -12px;
}
.slider-toggle[data-index="0"] { height: 28px; }

.slider-toggle[data-index="1"] .track { transform: rotate(-1.5deg); }
.slider-toggle[data-index="1"] .knob {
  width: 60px; height: 60px;
  background: var(--coral);
  left: 55%;
  margin-top: -35px;
}
.slider-toggle[data-index="1"] { height: 56px; }

.slider-toggle[data-index="2"] .track { transform: rotate(3deg); }
.slider-toggle[data-index="2"] .knob {
  width: 50px; height: 50px;
  background: var(--warm-amber);
  left: 18%;
  margin-top: -25px;
}
.slider-toggle[data-index="2"] { height: 30px; }

.slider-toggle[data-index="3"] .track { transform: rotate(-2.5deg); }
.slider-toggle[data-index="3"] .knob {
  width: 75px; height: 75px;
  background: var(--bridge);
  left: 60%;
  margin-top: -35px;
}
.slider-toggle[data-index="3"] { height: 68px; }

.slider-toggle[data-index="4"] .track { transform: rotate(1deg); }
.slider-toggle[data-index="4"] .knob {
  width: 26px; height: 26px;
  background: var(--accent-purple);
  left: 42%;
  margin-top: -13px;
}
.slider-toggle[data-index="4"] { height: 38px; }

.slider-toggle:hover .knob { transform: scale(1.15); }
.slider-toggle.active .knob {
  transform: scale(1.2);
}
/* No opacity reduction — all toggles stay fully colored */
.slider-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px; }

.toggle-hint {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  text-align: center;
  margin-bottom: 4px;
}


/* --- Journaling lines (with reveal sitting on first line) --- */
.output-lines {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.output-lines .line {
  position: relative;
  height: 2px;
  background: var(--border-soft);
  border-radius: 2px;
  display: block;
}
.output-lines .line-1 { width: 100%; }
.output-lines .line-2 { width: 95%; margin-left: 5%; }
.output-lines .line-3 { width: 88%; }
.output-lines .line-4 { width: 92%; margin-left: 4%; }
.output-lines .line-5 { width: 70%; }

/* Reveal — sits on the first line, as if written in */
.line-reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-dark);
  padding: 0 4px;
  animation: fadeIn 0.5s ease;
}
/* Title gets the display font, slightly larger + tinted */
.line-reveal.is-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--lila);
  text-transform: uppercase;
}

/* Labeled prompt pills — indicator only, light up on reveal */
.prompt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--border-soft);
  margin-top: auto;
}
.prompt-pills span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  color: var(--text-light);
  transition: all 0.2s;
}
.prompt-pills span.active {
  background: var(--lila);
  border-color: var(--lila);
  color: #fff;
}

/* Note for friend-link arrivals */
.shared-note {
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--sage);
  margin: 0;
}


/* --- Share CTAs — 2 primary side-by-side on desktop --- */
.share-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* --- Tertiary CTA: "Share the shuffle" — paler, always visible --- */
.share-tool-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
}
.btn-tertiary {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border: 1px dashed var(--border-soft);
  border-radius: 20px;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-tertiary:hover {
  color: var(--lila);
  border-color: var(--sage);
  background: rgba(255, 255, 255, 0.5);
}

.btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Copy-to-clipboard toast */
.copy-toast {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--sage);
  font-style: italic;
  margin-left: 8px;
  animation: fadeIn 0.3s ease;
}

/* --- Subtle signal --- */
.subtle-signal {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: var(--space-md);
}

/* --- Subscription upsell link --- */
.shuffle-upgrade {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--lila);
  margin-top: var(--space-xs);
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.2s;
}
.shuffle-upgrade:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* --- Responsive: stack shuffle stage --- */
@media (max-width: 600px) {
  .shuffle-stage { grid-template-columns: 1fr; }
  .stage-col { min-height: auto; }
  .drawn-card { width: 200px; height: 280px; }
  .deck-visual { width: 170px; height: 238px; }
  .deck-card { width: 160px; height: 228px; }
  .slider-toggle[data-index="3"] .knob { width: 44px; height: 44px; margin-top: -22px; }
  .slider-toggle[data-index="3"] { height: 58px; }
  .slider-toggle[data-index="1"] .knob { width: 36px; height: 36px; margin-top: -18px; }
  .slider-toggle[data-index="1"] { height: 50px; }
  .share-ctas { flex-direction: column; }

  /* Reserve room above the first line so a 2-line answer (which is
     absolutely positioned and grows upward) can't reach the instruction. */
  .journal-area { padding-top: 0; }
  .output-lines { margin-top: 2.75rem; }

  /* Slightly smaller answer text on mobile = less wrapping */
  .line-reveal { font-size: 0.82rem; }
  .line-reveal.is-title { font-size: 0.95rem; }

  /* Softer journaling lines + drop one to reduce clutter */
  .output-lines .line { background: var(--border-soft); opacity: 0.45; }
  .output-lines .line-5 { display: none; }
}


/* ============================================================
   Deck subscription blurb (below the share CTAs)
   ============================================================ */

.deck-subscription {
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  /* CHANGED: tighter inner padding, especially the bottom, so the button
     doesn't float above a big gap (was --space-md on all four sides). */
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  border: 2px solid var(--coral);
  border-radius: var(--radius);
    background: transparent;
}
.deck-subscription p { max-width: 600px; margin-left: auto; margin-right: auto; }
.deck-subscription .shuffle-upgrade { margin-top: var(--space-sm); }


/* ============================================================
   FAQ — native <details> accordion
   ============================================================ */

.faq-list {
  max-width: 720px;
  margin: var(--space-md) auto 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: background 0.2s;
}
.faq-item[open] {
  background: var(--bg-warm);
}

.faq-item summary {
  font-family: var(--font-body);
    text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--lila);
 /* was: padding: var(--space-sm) var(--space-md);   (1rem 2rem) */
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  list-style: none;          /* hide default arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--sage);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 var(--space-md) var(--space-sm);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-mid);
}

.faq-item summary:hover { color: var(--coral); }

/* ============================================================
   MWE — INDEX ADDITIONS  ·  2026-07-25
   Append to the END of style.css
. Nothing above is edited,
   no tokens renamed. Everything here is either a new class or a
   deliberate late-cascade override (marked OVERRIDE).
   ============================================================ */


/* --- Separators ---------------------------------------------
   Two kinds, as you marked in the shuffle section:
   .separator      = breathing room only, no visible mark
   .separator-line = a hairline rule at 80% width, centred
   ------------------------------------------------------------ */
.separator {
  height: var(--space-lg);
}

.separator-line {
  width: 100%;
  height: 1px;
  margin: var(--space-md) auto;
  background: var(--coral);
  border: 0;
}

/* A shorter, quieter variant for inside cards or tight stacks */
.separator-line--short {
  width: 40%;
  margin: var(--space-md) auto;
  background: var(--border-soft);
}


/* --- Hero actions -------------------------------------------
   The hero now carries two tool buttons plus one quiet text
   link. Without this they collide on narrow screens.
   ------------------------------------------------------------ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.hero-aside {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0;
}
.hero-aside a { color: var(--sage); }
.hero-aside a:hover { color: var(--lila); }


/* --- Logo is now a link, not a div --------------------------- */
.logo { text-decoration: none; }
a.logo:hover { color: var(--lila); }


/* --- Three paths --------------------------------------------
   OVERRIDE: .paths was `1fr 1fr`, built when there were two
   tools. There are three now. The mobile rule is restated
   because these lines sit after the original media query and
   would otherwise win at every width.
   ------------------------------------------------------------ */
.paths {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/* Push each card's button to the bottom so the row lines up
   even when the headings wrap to different heights */
.path-card {
  display: flex;
  flex-direction: column;
}
.path-card p { flex: 1 1 auto; }
.path-card .btn { align-self: center; }

@media (max-width: 1024px) {
  .paths { gap: var(--space-xs); }
  .path-card { padding: var(--space-xs); }
}
@media (max-width: 600px) {
  .paths { grid-template-columns: 1fr; }
}


/* --- Intensive tier cards ------------------------------------
   The three module cards carry copy only (no button). Keep them as flex
   columns, but don't stretch the paragraph, and pull the bottom in so the
   text doesn't sit above a big empty gap.
   ------------------------------------------------------------ */
.tool-card {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-sm);   /* CHANGED: tighter bottom (base is --space-md all round) */
}
.tool-card p { flex: 0 0 auto; }     /* CHANGED: was 1 1 auto — no vertical stretch */
.tool-card p:last-child { margin-bottom: 0; }
.tool-card .btn { align-self: flex-start; margin-top: var(--space-xs); }


/* --- Inline placeholder --------------------------------------
   For a single unknown value inside a sentence — [XXX] prompts —
   rather than blocking out the whole paragraph.
   ------------------------------------------------------------ */
.placeholder-inline {
  border-bottom: 1px dashed var(--border-mid);
  color: var(--text-light);
}


/* --- Timer mount ---------------------------------------------
   Reserves the slot until the widget is dropped in, so the
   section doesn't collapse in the meantime.
   ------------------------------------------------------------ */
#timer-mount {
  margin: var(--space-md) 0;
  min-height: 200px;
}

/* The timer's share row sits directly under the widget and is
   always visible — unlike the shuffle's, which is revealed. */
#timer-share-ctas { margin-top: var(--space-sm); }

/* On the journaling-timer page the two share buttons stack, one under the
   other (the index shuffle's share row stays side-by-side). Scoped to
   .page-timer so it doesn't touch the shuffle. */
.page-timer .share-ctas {
  flex-direction: column;
  align-items: center;
}


/* --- FAQ inline link ------------------------------------------ */
.faq-more-link {
  color: var(--coral);
  border-bottom: 1px solid var(--border-soft);
}
.faq-more-link:hover {
  color: var(--lila);
  border-bottom-color: var(--lila);
}

/* Timer page — explicit section backgrounds (the widget div breaks the
   nth-child alternation that works on index). */
.page-timer .timer-stage { background: var(--bg-tint); }
.page-timer #timer-intro  { background: var(--bg-warm); }
.page-timer #timer-faq    { background: var(--bg-tint); }

/* --- Footer separators ---------------------------------------
   Hairlines between the four columns, drawn only where a real
   neighbour exists — so nothing dangles on the last column or
   after the grid reflows to two-up and one-up.
   ------------------------------------------------------------ */
.footer-col + .footer-col {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: var(--space-md);
}

@media (max-width: 768px) {
  /* two-up: only the right-hand column of each row keeps its rule */
  .footer-col + .footer-col { border-left: 0; padding-left: 0; }
  .footer-col:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: var(--space-md);
  }
}

@media (max-width: 480px) {
  /* one-up: vertical rules become horizontal ones between blocks */
  .footer-col:nth-child(even) { border-left: 0; padding-left: 0; }
  .footer-col + .footer-col {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-sm);
  }
}


/* --- Footer base ---------------------------------------------
   Was raw line breaks; now three <p> lines that need spacing.
   ------------------------------------------------------------ */
.footer-base p { margin-bottom: 0.2em; color: inherit; }   /* CHANGED: was 0.35rem; em unit means it scales with font-size at each breakpoint */
.footer-base p:last-child { margin-bottom: 0; }

/* ============================================================
   TABLET — iPad Mini (768px) / iPad Air (820px) portrait
   Mirrors the spacing approach from the IW reference style.css:
   tighter section padding, smaller type, narrower footer.
   ============================================================ */
@media (max-width: 1024px) {
  section { padding: var(--space-sm) 0; }
  .hero { padding: var(--space-sm) var(--space-sm); }
  .wrap { padding: 0 var(--space-sm); }
  h1, h2 { font-size: 0.85rem; letter-spacing: 0.15em; }
  p { font-size: 0.9rem; }
  .section-eyebrow { font-size: clamp(1rem, 2.5vw, 1.3rem); }
  .section-eyebrow-hero { font-size: 0.85rem; }
  .separator { height: var(--space-md); }
  .separator-line { margin: var(--space-md) auto; }
  .tool-card { padding: var(--space-sm); }
  .path-card { padding: var(--space-sm); }
  .shuffle-stage { gap: var(--space-sm); }
  .stage-col { padding: var(--space-sm); min-height: 300px; }
  .cs-card__body {
  flex: 1 1 auto;
  min-width: 0;   /* let the text column shrink inside the flex card so it
                     wraps instead of overflowing past the card edge (the
                     "falling out" on iPad Mini's narrow 3-across) */
  overflow-wrap: break-word;
}
  
  /* .site-footer padding is defined in its own 1024 block earlier in
     the file (just above the 768 responsive block), so the 768 rule
     can win at 768px. Do not re-add it here. */
  .footer-col li { margin-bottom: 0.15rem; }
  /* CHANGED: font-sizes removed — driven by :root vars in the FOOTER SCALE
     block at the bottom of this file. */

  /* Coming-soon cards: tighter type + padding to prevent text overflow */
  .cs-card { padding-left: 0.45rem; }
  .cs-card__body {
    overflow-wrap: break-word;
  }
  .cs-card__body h3 {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
  }
}

/* Coming-soon cards: phone reset — restore centred stacked layout.
   Placed AFTER the 1024 block so source order wins at ≤480px. */
@media (max-width: 480px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: var(--space-md);
  }
  .cs-card__icon { font-size: 2.25rem; }
  .cs-card__body h3 {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
}

/* --- Accessibility floor -------------------------------------- */
:focus-visible {
  outline: 2px solid var(--warm-amber);
  outline-offset: 2px;
}

/* ============================================================
   CONTACT PAGE — form styling only
   Everything else on this page reuses existing classes
   (.site-header, .hero, .section-eyebrow-hero, .wrap, .btn,
   .site-footer, .footer-cols, .footer-col, .footer-base) so
   it inherits the site's look automatically.
   ============================================================ */

.page-contact main { padding-bottom: var(--space-lg); }

/* Small intro paragraph above the form — the mailto fallback line */
.contact-intro {
  max-width: 620px;
  margin: 0 auto var(--space-md);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-mid);
}
.contact-intro a {
  color: var(--coral);
  border-bottom: 1px solid var(--border-soft);
}
.contact-intro a:hover {
  color: var(--lila);
  border-bottom-color: var(--lila);
}

/* Success message (revealed after successful POST) */
.form-success {
  max-width: 620px;
  margin: 0 auto var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  background: var(--green-transparent);
  color: var(--text-dark);
  text-align: center;
  font-size: 0.9rem;
}

/* The form itself — stacked labels + inputs, single-column, centred */
.contact-form {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.contact-form label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lila);
  margin-top: var(--space-xs);
}
.contact-form .label-hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-light);
  margin-left: 0.4rem;
}
.contact-form .label-req {
  color: var(--coral);
  margin-left: 0.15rem;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-dark);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--green-transparent);
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.contact-form .btn {
  align-self: center;
  margin-top: var(--space-sm);
}

/* Honeypot fields — off-screen, never focusable */
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Error line under the button (populated by contact-form.js) */
.contact-form .form-error {
  min-height: 1.2em;
  margin-top: var(--space-xs);
  text-align: center;
  color: var(--coral);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FOOTER SCALE — narrowest-wins order (max-width descending).
   Only redefines the four :root vars set near the top of the file.
   Do NOT add hardcoded footer font-size rules elsewhere in the
   sheet; they will shadow these and break the pattern.
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --fs-footer-h4:   0.7rem;
    --fs-footer:      0.75rem;
    --fs-footer-meta: 0.6rem;
    --lh-footer:      1.35;
  }
}
@media (max-width: 768px) {
  :root {
    --fs-footer-h4:   0.68rem;
    --fs-footer:      0.72rem;
    --fs-footer-meta: 0.58rem;
    --lh-footer:      1.3;
  }
}
@media (max-width: 480px) {
  :root {
    --fs-footer-h4:   0.65rem;
    --fs-footer:      0.68rem;
    --fs-footer-meta: 0.54rem;
    --lh-footer:      1.25;
  }
}