/* ==========================================================================
   Adesse — /start companion-guide stylesheet (extends styles.css, same
   tokens). This is a calm, functional support page, not a marketing page:
   no reveal-on-scroll, no signature color-return moment, no persuasion copy.
   The only motion is the quiet open/close of native <details>-free toggles.
   Loaded AFTER styles.css, on /start/ only.
   ========================================================================== */

/* ---- Breadcrumb (mirrors articles.css .crumb — duplicated here since this
   page doesn't load articles.css) ---- */
.crumb {
  font-family: var(--sans);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--taupe); text-decoration: none; }
.crumb a:hover { color: var(--amber-ink); }

/* ---- Intro ---- */
.start-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.start-hero h1 { max-width: 18ch; }
.start-hero .lede { margin-top: 1.25rem; }
.start-hero p + p { margin-top: 1rem; }

/* ---- Tools band: OS toggle + jump-to nav ---- */
.section--tools { padding-block: 0 clamp(2rem, 5vw, 3rem); }

.os-toggle,
.wa-toggle {
  /* Progressive disclosure: hidden until body.js confirms JS is driving the
     page. With JS off, these controls never appear — every branch below
     simply stays visible and labeled, so nothing here is ever a dead button. */
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}
.js .os-toggle,
.js .wa-toggle { display: flex; }
.wa-toggle { margin-top: 1.25rem; margin-bottom: 0.5rem; }

.os-toggle-label {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--taupe);
  margin-right: 0.25rem;
}

.os-btn {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--taupe);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.os-btn:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.os-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.os-btn[aria-pressed="true"]:hover { color: var(--paper); }

.step-toc {
  margin-top: 1.5rem;
  line-height: 1.9;
}
.step-toc a { color: var(--taupe); text-decoration: none; }
.step-toc a:hover { color: var(--amber-ink); }

/* ---- Step cards ---- */
.start-step { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.start-step .container > * + *,
.checklist-section .container > * + * { margin-top: 1rem; }

.step-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.step-head h2 { margin: 0; }
.step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
}

.start-step h3 {
  margin-top: 2rem;
  margin-bottom: 0.25rem;
}

/* ---- Branch blocks (iPhone / Android / WhatsApp-answer variants) ---- */
.branch {
  border-left: 3px solid var(--hairline);
  padding: 0.9rem 0 0.9rem 1.1rem;
  margin-top: 1rem;
}
.branch .branch {
  /* nested branch, e.g. WhatsApp "now" → Android/iPhone sub-branch */
  margin-top: 0.9rem;
}
.branch-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--amber-ink);
  background: var(--warm-field);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  margin-bottom: 0.4rem;
}
.branch p { font-family: var(--sans); font-size: 1.0625rem; }
.branch p + p { margin-top: 0.5rem; }

/* Filtered views: only applied once JS adds these classes to body */
body.os-filter-iphone [data-os="android"] { display: none; }
body.os-filter-android [data-os="iphone"] { display: none; }
body.wa-filter-now [data-wa="later"],
body.wa-filter-now [data-wa="no"] { display: none; }
body.wa-filter-later [data-wa="now"],
body.wa-filter-later [data-wa="no"] { display: none; }
body.wa-filter-no [data-wa="now"],
body.wa-filter-no [data-wa="later"] { display: none; }

/* ---- Step checkbox + stuck fallback ---- */
.step-check,
.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  cursor: pointer;
}
.step-check input,
.checklist-item input {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--amber-ink);
  flex: none;
}
.step-check { margin-top: 1.5rem; }

.stuck { margin-top: 0.75rem; }
.stuck a { color: var(--amber-ink); }

/* ---- Pre-goodbye checklist ---- */
.checklist-section { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--warm-field); }
.checklist {
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: grid;
  gap: 1.1rem;
  max-width: 40rem;
}
.checklist-progress { margin-top: 1rem; }

/* ---- Goodbye step: ritual, two lines, first call ---- */
.goodbye-section { padding-block: clamp(2.5rem, 6vw, 4rem); }

.two-lines {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  max-width: 40rem;
}
.intention-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
}
.intention-label {
  font-size: 1rem;
  color: var(--taupe);
  flex: none;
}
.intention-input {
  flex: 1 1 12rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--taupe);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}
.intention-input::placeholder { color: var(--taupe); opacity: 0.7; }

.goodbye-section .closing-line { margin-top: 2rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
  .step-head { align-items: flex-start; }
  .intention-row { flex-direction: column; align-items: stretch; }
  .intention-label { margin-top: 0.25rem; }
}