/* =========================================================================
   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-beta-signpost,
.gs-beta-block-group,
.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; }
/* On /getting-started/beta the first section follows the light header, not another
   section, so it takes no rule above it — same reasoning as .gs-quickstart's on the
   public page. The header is a <header>, so the first <section> is :first-of-type. */
.gs-beta-block-group:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- SETUP / USE part labels (/getting-started quick start) -------------
   .mono-eyebrow (site.css) supplies the type; these rules only place it. The
   label sits tight to the list it introduces and loose from the one above. */
.gs-part-label { margin: 0 0 0.55rem; }
.gs-steps + .gs-part-label { margin-top: 1.5rem; }

/* ---- 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; }

/* ---- The floating button ------------------------------------------------ */
.gs-floating-block > p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.9rem; }
/* The walkthrough is an <ol> because its seven steps are sequential; the <ul>
   below it is not (placement and hiding are independent facts, in no order).
   Same measure and colour as the list so the two read as one section rather
   than two devices stacked, just a little more air between numbered steps. */
.gs-floating-steps { margin: 0 0 1.1rem; padding-left: 1.35rem; color: var(--text); }
.gs-floating-steps li { margin: 0.45rem 0; line-height: var(--lh-doc); }
.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);
}

/* ---- Testing the beta --------------------------------------------------
   .gs-beta-block's h3 matches .gs-step-body h3 above; .gs-beta-list matches
   .gs-floating-list below, both new names because neither original selector
   is about this section's content. .gs-callout borrows site.css's
   .warning-callout tier (--warn-bg/--warn-line/--warn-ink, loaded ahead of
   this file via _MarketingLayout) rather than the calm var(--panel-2) plate
   .gs-promise and every closed .gs-faq-item already use — these three lines
   carry the most weight in the section and need to read as a different tier,
   not the reassuring one. Design confirmed --warn-bg/--warn-ink clears AA at
   --fs-sm in both themes. */
/* ---- /getting-started/beta: the light header --------------------------
   A HEADER, not a second hero. The difference is the FURNITURE, not the type
   size: no promise callout, no trust disclosure, no download CTA — an eyebrow,
   a title, a subhead, and the way back.

   The type deliberately matches .legal-title, which is this site's existing
   answer to "a document page that opens with a header rather than a hero" —
   same --font-display / --fs-display / .mono-eyebrow shape, unified with
   Getting Started's hero in the 2026-08 typography pass (see legal.css:15-19).
   An invented intermediate size was tried first and was correctly rejected by
   LandingStyleContractTests.TokensConsumed_ResolveToADefinition: there is no
   --fs-doc-h1, and adding one to serve a single heading is exactly the token
   sprawl that gate exists to stop. Replaces .gs-beta-intro, which went with
   the old in-page section. */
.gs-beta-header {
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.gs-beta-header .mono-eyebrow { margin: 0 0 0.5rem; }
.gs-beta-header-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-beta-header-subhead {
  font-size: var(--fs-lg);
  color: var(--text);
  line-height: var(--lh-doc);
  margin: 0 0 0.9rem;
}
/* The way back. Both halves are one guide, so this is part of the header
   rather than stranded at the foot of the page. */
.gs-beta-backlink { margin: 0; font-size: var(--fs-sm); }
.gs-beta-backlink a { color: var(--accent); }

.gs-beta-block-group > p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.9rem; }
.gs-beta-block-group > p:last-of-type { margin-bottom: 0; }

/* The one line on "Your 30 days" that reframes everything under it. */
.gs-beta-lede { font-weight: 600; color: var(--ink) !important; }

.gs-beta-block { margin-top: 1.3rem; }
.gs-beta-block:first-of-type { margin-top: 0; }
.gs-beta-block h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.gs-beta-block p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.75rem; }
.gs-beta-block p:last-child { margin-bottom: 0; }

.gs-beta-list { margin: 0; padding-left: 1.2rem; color: var(--text); }
.gs-beta-list li { margin: 0.3rem 0; line-height: var(--lh-doc); }

.gs-callout-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.3rem; }
.gs-callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: var(--r);
  padding: 0.85rem 1.05rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.gs-callout p { margin: 0; }
.gs-callout strong { color: var(--warn-ink); }

/* ---- Callout hierarchy (/getting-started/beta) --------------------------
   Three identically-styled callouts read as three equal shouts, which leaves the
   reader to work out for themselves which one actually protects a patient. The
   "read it yourself" line is the one that does, so it leads and the other two
   demote to a lighter pair.

   The tiers differ by WEIGHT and RULE THICKNESS, not only by fill, so the
   hierarchy survives a monochrome print — see the @media print block below,
   where the fills drop out entirely and the 4px/2px left rules are what is
   left carrying it.

   MEASURED CONTRAST (not inherited — the existing --warn-bg/--warn-ink pairing
   passes AA at 4.83:1 with little headroom, so the new fill was checked rather
   than assumed):
     .gs-callout-lead   --warn-bg / --warn-ink   4.83:1 light · 7.64:1 dark
       (unchanged — this tier keeps the treatment that already ships)
     .gs-callout-minor  --panel-2 / --text       7.53:1 light · 10.36:1 dark
     .gs-callout-minor strong  --panel-2 / --ink 12.01:1 light · 14.07:1 dark
   The demoted tier is the HIGHER-contrast of the two on purpose: it is demoted
   by warmth and weight, never by legibility. Nothing here is dimmed to make
   something else look louder. */
.gs-callout-lead {
  border-left: 4px solid var(--warn-ink);
  font-size: var(--fs-base);
  padding: 1rem 1.15rem;
}
.gs-callout-lead p { line-height: var(--lh-doc); }

.gs-callout-minor-list { margin-top: 0.6rem; }
.gs-callout-minor {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  color: var(--text);
}
.gs-callout-minor strong { color: var(--ink); }

/* The Terms/Privacy note, on BOTH pages. It used to exist only inside the
   in-page beta section, so lifting that section out would have left
   /getting-started with no Terms/Privacy line at all. Replaces .gs-beta-legal. */
.gs-legal-note {
  margin-top: var(--doc-h2-gap-top);
  padding-top: var(--doc-h2-pad-top);
  border-top: 1px solid var(--line);
  line-height: var(--lh-doc);
}
.gs-legal-note a { color: var(--accent); }

/* ---- "Are you one of our beta testers?" signpost (/getting-started) ------
   Built from furniture the page already owns: .gs-section-title for the
   heading, and the same calm var(--panel-2) plate .gs-promise and every closed
   .gs-faq-item use. No new design tokens. Deliberately NOT badged "BETA" — a
   prospective customer should not be told they have landed on unfinished
   software, which is most of why the beta content moved off this page. */
.gs-beta-signpost > p { color: var(--text); line-height: var(--lh-doc); margin: 0 0 0.75rem; }
.gs-beta-signpost-link {
  margin: 0;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: var(--fs-sm);
}
.gs-beta-signpost-link a { color: var(--accent); font-weight: 600; }

/* ---- 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; }
  /* NOT break-inside: avoid any more. That was right when this section was a
     four-line bullet list; it is now a seven-step walkthrough, and holding a
     block that tall together shunts the whole thing to a fresh sheet and leaves
     most of the previous one blank. Keep the individual steps unbroken instead,
     which is what actually hurts to read across a page boundary. */
  .gs-floating-steps li, .gs-floating-list li { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }

  /* ---- /getting-started/beta ------------------------------------------
     THE BUG THIS FIXES: the hide list above used to carry .gs-beta, so
     printing took all three safety callouts off the sheet — including
     "read the cleaned document yourself", the one line that stands between
     a tester and a mis-shared note — with nothing on the page to say
     anything had been omitted. That section is now its own page, it now
     carries those callouts, and it prints.

     The screen hierarchy is a warm fill against a calm one. Print has no
     warm fill, so the 4px-vs-2px left rules and the type weight are what
     carry it on paper. That is why the tiers were built on more than
     colour in the first place. */
  .gs-beta-header { break-inside: avoid; }
  .gs-beta-header-subhead, .gs-beta-backlink { color: #000; }

  .gs-callout {
    background: transparent;
    color: #000;
    border: 1px solid #999;
    break-inside: avoid;
  }
  .gs-callout strong { color: #000; }
  .gs-callout-lead { border-left: 4px solid #000; }
  .gs-callout-minor { border-left: 2px solid #999; }
  .gs-beta-block { break-inside: avoid; }

  /* The signpost on /getting-started prints too — its link text is the full
     URL precisely so it still works on paper. */
  .gs-beta-signpost-link { background: transparent; border: 1px solid #999; }
}