/* =========================================================================
   ClearHarbor — /getting-started (task-based quick start + FAQ)
   Page-specific: only loaded by Pages/GettingStarted.cshtml (via the
   _Layout "Styles" section), same pattern as legal.css. Token-driven — see
   tokens.css for the palette this reads from. Shares .mono-eyebrow,
   .secondary-button from site.css rather than redefining them.
   ========================================================================= */

.gs-shell {
  max-width: var(--measure-doc);
  margin: 0 auto;
}

/* Print-only heading — see the @media print block at the bottom; invisible
   on screen because the hero below already does this job there. */
.gs-print-title,
.gs-print-footer { display: none; }

/* ---- Hero ------------------------------------------------------------- */
.gs-hero { margin-bottom: 2rem; }
.gs-hero .mono-eyebrow { margin: 0 0 0.5rem; }

.gs-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.gs-hero-subhead {
  font-size: var(--fs-lg);
  color: var(--text);
  margin: 0 0 1.25rem;
}

/* ALIGNMENT AUDIT: was background: var(--mint-soft); color: var(--mint-ink) —
   Sea Cliff Blue's pale tint, a real token but a COOL BLUE panel on a page
   that is otherwise warm cream/slate throughout (Landing never uses mint-soft
   as a fill; its own callout device — .landing-demo-note — is var(--panel-2)
   on var(--text)). Swapped to that same device so this reads as the same
   site's callout, not a different one. Icon keeps a spot of colour via
   var(--accent) rather than tinting the whole plate. */
.gs-promise {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.gs-promise-icon { flex: 0 0 auto; display: inline-flex; margin-top: 0.15rem; font-size: 1.05rem; color: var(--accent); }
.gs-promise p { margin: 0; font-weight: 500; color: var(--ink); }

/* Itemisation disclosure, directly under the promise callout — uses the
   shared .trust-disclosure component (site.css). Hidden from print (see the
   @media print block below) along with the FAQ it's structurally closer to
   than the quick-start guide: a printed one-pager showing a collapsed "+"
   question with no answer underneath it would be worse than not showing it
   at all. */
.gs-promise-disclosure { margin: 0.75rem 0 0; }

/* ---- Section title (shared by Quick start / floating button / FAQ) ----
   Same --fs-doc-h2 / --doc-h2-* scale as legal.css's h2 — see that file and
   tokens.css for why this is a shared token now, not two hand-typed copies. */
.gs-section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-doc-h2);
  color: var(--ink);
  margin: 0 0 var(--doc-h2-gap-bottom);
}

.gs-quickstart,
.gs-floating-block,
.gs-faq {
  margin: var(--doc-h2-gap-top) 0 0;
  padding-top: var(--doc-h2-pad-top);
  border-top: 1px solid var(--line);
}
.gs-quickstart { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- Quick start steps ------------------------------------------------- */
.gs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.gs-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.gs-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.gs-step-body h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  margin: 0.15rem 0 0.3rem;
}
.gs-step-body p { color: var(--text); line-height: var(--lh-doc); margin: 0; }

/* ---- Meet the floating button ------------------------------------------ */
.gs-floating-block > p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.9rem; }
.gs-floating-list { margin: 0; padding-left: 1.2rem; color: var(--text); }
.gs-floating-list li { margin: 0.3rem 0; line-height: var(--lh-doc); }

kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.05em 0.4em;
  color: var(--ink);
}

/* ---- FAQ ----------------------------------------------------------------- */
.gs-faq-list { display: flex; flex-direction: column; gap: 0.6rem; }

.gs-faq-item {
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 0.2rem 1.05rem;
}
.gs-faq-item + .gs-faq-item { margin-top: 0; }
.gs-faq-item p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.9rem; }
.gs-faq-item p:last-child { margin-bottom: 1rem; }

/* font-weight 700 — was 600, the one place this page disagreed with itself:
   a FAQ question is the same h3-rank as a Quick start step title
   (.gs-step-body h3, below) and read one weight lighter for no reason. */
.gs-faq-item summary {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  cursor: pointer;
  padding: 0.85rem 0;
  list-style: none;
}
.gs-faq-item summary::-webkit-details-marker { display: none; }
.gs-faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--muted);
}
.gs-faq-item[open] summary::after { content: "\2212"; } /* minus sign */
.gs-faq-item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.gs-faq-groups { margin: 0 0 0.9rem; padding-left: 1.2rem; color: var(--text); }
.gs-faq-groups li { margin: 0.3rem 0; line-height: var(--lh-doc); }
.gs-faq-groups strong { color: var(--ink); }

/* ---- Actions (print / download) ----------------------------------------- */
.gs-actions {
  margin-top: var(--doc-h2-gap-top);
  padding-top: var(--doc-h2-pad-top);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.gs-actions .secondary-button { width: auto; }
.gs-download-line { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.gs-download-line a { color: var(--accent); }

@media (max-width: 640px) {
  .gs-actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* =========================================================================
   Printable one-pager — "Print this page" calls window.print(); this is the
   whole one-sheet layout. Not a PDF (see plan: PDF drifts, print-to-PDF
   already gives users a file). Keeps: print-title, hero, quick start, and
   the floating-button block. Hides: nav/theme toggle, FAQ, print/download
   actions, and the site footer — none of that belongs on a fridge magnet.
   ALIGNMENT AUDIT NOTE — the hex values below (#fff/#000/#999/#444) are
   DELIBERATELY not tokens. Print must read as black ink on white paper no
   matter which theme was active on screen; var(--ink)/var(--bg) resolve to
   pale-on-dark when the reader is in dark theme, which would print
   near-invisible text on a white page. Left as literal, out of scope for the
   raw-hex sweep below, which is about screen surfaces.
   ========================================================================= */
@media print {
  @page { margin: 0.6in; }

  .skip-link,
  .topbar,
  .site-footer,
  .site-nav,
  .marketing-footer,
  .gs-faq,
  .gs-promise-disclosure,
  .gs-actions { display: none !important; }

  .gs-print-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 0.9rem;
  }

  .gs-print-footer {
    display: block;
    margin-top: 1.1rem;
    padding-top: 0.6rem;
    border-top: 1px solid #999;
    font-size: 0.78rem;
    color: #444;
  }

  body { background: #fff; color: #000; }
  .gs-shell { max-width: 100%; margin: 0; }
  .gs-promise { background: transparent; border: 1px solid #999; color: #000; }
  .gs-hero, .gs-quickstart { break-inside: avoid; }
  .gs-step { break-inside: avoid; }
  .gs-step-num { background: #000; color: #fff; }
  .gs-floating-block { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}