/* ===========================================================================
   Increment — shared draft stylesheet
   ---------------------------------------------------------------------------
   The foundation below is lifted verbatim from index-draft.html, which was in
   turn lifted from my-app/src/index.css. Every draft page links this file so
   the tokens live in exactly one place and the pages cannot drift apart.

   NOTE: index-draft.html still carries its own inline copy of this block. That
   is a duplicate, and duplicates are how two pages end up different colours.
   Converting it to link this file instead is a one-line change and should
   happen before any of this ships.

   No framework, no webfont — the app runs on the system stack.
   =========================================================================== */

:root {
  /* --- App tokens, unchanged -------------------------------------------- */
  --ink: #1f2937;
  --ink-strong: #0f172a;
  --ink-muted: #6b7280;
  --ink-faint: #94a3b8;

  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --hairline: #eef1f5;
  --line: #e2e8f0;

  --event-tint: #eff6ff;  --event-accent: #3b82f6;
  --event-border: #dbeafe; --event-text: #1e3a8a;

  --task-tint: #f0fdfa;   --task-accent: #14b8a6;
  --task-border: #ccfbf1;  --task-text: #115e59;

  --goal-tint: #f5f3ff;   --goal-accent: #8b5cf6;
  --goal-border: #ede9fe;  --goal-text: #5b21b6;

  /* The one entity outside the trio (§3.1): a day-scale marker must not be
     mistaken for a timed event above the grid it sits over. */
  --allday-tint: #fffbeb;  --allday-accent: #f59e0b;
  --allday-border: #fde68a; --allday-text: #92400e;

  --priority-3: #fbbf24;
  --priority-4: #fb923c;
  --priority-5: #f43f5e;

  --action: #2563eb;
  --action-hover: #1d4ed8;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --meta-gap: 3px;

  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-pill: 999px;
  --row-pad-y: 10px;
  --row-pad-x: 14px;
  --stroke-w: 3px;

  --text-display: 20px;
  --text-primary: 14px;
  --text-secondary: 12px;
  --text-tertiary: 11px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;

  /* --- The page register -------------------------------------------------
     A marketing page is a document, not a fixed-density app surface, so the
     whole scale shifts up a register. VISUAL-LANGUAGE §2 permits exactly this
     as long as the *intervals* survive: each step still sits one notch above
     the one beneath it, and weight still never passes 500. The app's own four
     steps are kept above and used unshifted inside the product components
     embedded further down, which is what makes those read as the app rather
     than as a drawing of it. */
  --page-display: 40px;   /* the one headline */
  --page-title: 24px;     /* a section's own title */
  --page-lead: 18px;      /* the one paragraph under a title */
  --page-body: 16px;      /* everything else */
  --page-meta: 13px;      /* captions, footnotes, nav */

  /* Two widths on the page and no others. The frame is for media and grids;
     the measure is for anything that is read as prose — a section's own
     heading, the pricing pair, the questions. Both are left-aligned, so a
     narrow block lines up with the heading above it rather than floating. */
  --measure: 62ch;
  --frame: 1120px;

  color-scheme: light;
}

@media (max-width: 720px) {
  :root { --page-display: 30px; --page-title: 21px; --page-lead: 17px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: 400 var(--page-body)/1.55 var(--sans);
  letter-spacing: 0.18px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--event-border); color: var(--event-text); }

h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink-strong); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

.wrap { max-width: var(--frame); margin: 0 auto; padding: 0 var(--space-4); }

/* --- Controls ------------------------------------------------------------
   One primary action per surface (§3.5), at the app's control radius. The
   app's own buttons are 6px rectangles; a pill here would be the site
   inventing a shape the product does not have. */
.btn {
  display: inline-block;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.18px;
  padding: 11px 18px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-hover); }
.btn--quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--surface-raised); }

.link {
  color: var(--action);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link:hover { border-bottom-color: currentColor; }

/* --- Nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  max-width: var(--frame); margin: 0 auto; padding: 0 var(--space-4);
  height: 56px; display: flex; align-items: center; gap: var(--space-4);
}
.nav__mark {
  font-weight: 500; font-size: 17px; color: var(--ink-strong);
  letter-spacing: -0.2px; text-decoration: none; margin-right: auto;
}
.nav__links { display: flex; gap: 20px; }
.nav__links a {
  font-size: var(--page-meta); color: var(--ink-muted); text-decoration: none;
}
.nav__links a:hover { color: var(--ink-strong); }
.nav .btn { padding: 7px 13px; font-size: var(--page-meta); }
@media (max-width: 780px) { .nav__links { display: none; } }

.shot {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.shot--clip { cursor: pointer; }

.foot {
  border-top: 1px solid var(--hairline);
  padding: 24px 0 40px;
  font-size: var(--page-meta); color: var(--ink-muted);
}
.foot__inner {
  max-width: var(--frame); margin: 0 auto; padding: 0 var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) 20px;
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink-strong); }
.foot__mark { font-weight: 500; color: var(--ink-strong); margin-right: auto; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   Page furniture shared by the article and legal pages
   =========================================================================== */

.page { padding: 56px 0 72px; }
@media (max-width: 720px) { .page { padding: 40px 0 56px; } }

.page__back {
  display: inline-block; margin-bottom: 28px;
  font-size: var(--page-meta); color: var(--ink-muted); text-decoration: none;
}
.page__back:hover { color: var(--ink-strong); }

.page__head { max-width: var(--measure); margin-bottom: 36px; }
.page__eyebrow {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--page-meta); color: var(--ink-muted);
}
.page__head h1 {
  font-size: var(--page-display); line-height: 1.12; letter-spacing: -1.2px;
}
.page__dateline {
  margin-top: var(--space-3);
  font-size: var(--page-meta); color: var(--ink-faint);
}

/* A screenshot between two runs of prose, at the frame rather than the
   measure. The two widths are not interchangeable: text is read at 62ch, and
   a 1500px screenshot scaled into 62ch is decoration, because the thing it
   was taken to show cannot be made out. Sits outside `.prose` — a child
   cannot escape that container's max-width — so it carries its own rhythm. */
.page__media { margin: 36px 0; }
@media (max-width: 720px) { .page__media { margin: 28px 0; } }

/* ---------------------------------------------------------------------------
   Prose. One measure, one scale, and weight stays scarce: a heading is 500 and
   body copy is 400, separating by size and colour rather than by boldness.
   --------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
/* 20px, not 16: at a 16px body size on a 1.55 line, one spacing step is not
   quite enough air to separate two paragraphs — they read as one block. */
.prose > * + * { margin-top: 20px; }
/* A figure is not a paragraph and should not be spaced like one. */
.prose > img { margin-top: 28px; }
.prose > img + * { margin-top: 28px; }
.prose p { color: var(--ink); }
.prose h2 {
  margin-top: 40px; font-size: var(--page-title);
  letter-spacing: -0.24px; line-height: 1.2; scroll-margin-top: 72px;
}
.prose h3 { margin-top: 28px; font-size: var(--page-lead); scroll-margin-top: 72px; }
/* One level under an h3 group (e.g. one named product inside "Full
   Auto-Schedulers") — same weight, a size down, same scroll offset so a
   table-of-contents link lands the heading below the sticky nav rather
   than under it. */
.prose h4 { margin-top: 20px; font-size: var(--page-body); scroll-margin-top: 72px; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: var(--space-2); color: var(--ink); }
.prose li::marker { color: var(--ink-faint); }
.prose strong { font-weight: 500; color: var(--ink-strong); }
.prose a {
  color: var(--action); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.prose a:hover { border-bottom-color: currentColor; }
/* A button inside prose is a button, not a link. `.prose a` is one class more
   specific than `.btn--primary`, so without this the label took the link
   colour and went blue-on-blue — invisible. */
.prose a.btn { border-bottom: 0; }
.prose a.btn--primary { color: #fff; }
.prose a.btn--primary:hover { color: #fff; }
/* Natural width, capped to the column — never stretched past what it was
   captured at. These screenshots run from 478px to 1330px wide; forcing them
   all to fill the measure blew the small ones up by a third and left them
   soft. Anything wider than the column still scales down to fit. */
.prose img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-panel);
}
.prose figure { margin: 0; }
.prose figcaption {
  margin-top: var(--space-3);
  font-size: var(--page-meta); color: var(--ink-muted);
}

/* A markdown pull-quote (`>`), styled as the same pulled-out aside as
   .callout below rather than the browser default italic indent — one visual
   language for "this is set apart from the running text," not two. */
.prose blockquote {
  margin: 0; padding: var(--space-3) 0 var(--space-3) 18px;
  border-left: var(--stroke-w) solid var(--line);
}
.prose blockquote p { color: var(--ink-muted); font-style: italic; }

/* A markdown table (comparing several named things on shared attributes —
   price, limits, whatever the post calls for). Same hairline-separated look
   as .legal table below; `display: block` + scroll keeps a wide comparison
   from forcing the whole page to scroll sideways on a narrow screen. */
.prose table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  width: 100%; border-collapse: collapse; font-size: var(--page-meta);
}
.prose th {
  text-align: left; font-weight: 500; color: var(--ink-strong);
  padding: var(--row-pad-y) var(--space-3) var(--row-pad-y) 0;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.prose td {
  color: var(--ink); vertical-align: top;
  padding: var(--row-pad-y) var(--space-3) var(--row-pad-y) 0;
  border-bottom: 1px solid var(--hairline);
}

/* A pulled-out aside. In the app a left stroke is how a row says which group
   it belongs to, so an aside borrows the same mark rather than a tinted card:
   the entity hues are reserved and an aside is not an entity. */
.callout {
  padding: var(--space-3) 0 var(--space-3) 18px;
  border-left: var(--stroke-w) solid var(--line);
}
.callout > * + * { margin-top: var(--space-3); }
.callout p { color: var(--ink-muted); }

/* The one call to action inside an article. */
.cta {
  padding: 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.cta > * + * { margin-top: var(--space-3); }
.cta p { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Legal pages
   --------------------------------------------------------------------------- */
.legal { max-width: var(--measure); }
.legal > * + * { margin-top: var(--space-4); }
.legal h2 {
  margin-top: 44px; font-size: var(--page-title);
  letter-spacing: -0.24px; scroll-margin-top: 72px;
}
.legal h3 { margin-top: 28px; font-size: var(--page-lead); }
.legal h2 + p, .legal h3 + p { margin-top: var(--space-3); }
.legal p, .legal li { color: var(--ink); }
.legal ul { list-style: disc; padding-left: 1.25em; }
.legal li { margin-top: var(--space-2); }
.legal li::marker { color: var(--ink-faint); }
.legal strong { font-weight: 500; color: var(--ink-strong); }
.legal a {
  color: var(--action); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal a:hover { border-bottom-color: currentColor; }

/* A table is a list with two columns; it separates with hairlines, like one. */
.legal table {
  width: 100%; border-collapse: collapse;
  font-size: var(--page-meta);
}
.legal th {
  text-align: left; font-weight: 500; color: var(--ink-strong);
  padding: var(--row-pad-y) var(--space-3) var(--row-pad-y) 0;
  border-bottom: 1px solid var(--line);
}
.legal td {
  color: var(--ink); vertical-align: top;
  padding: var(--row-pad-y) var(--space-3) var(--row-pad-y) 0;
  border-bottom: 1px solid var(--hairline);
}

/* The summary panel at the top of a policy. */
.summary {
  padding: 20px 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.summary h2 {
  margin: 0 0 var(--space-3); font-size: var(--page-body);
  letter-spacing: 0; scroll-margin-top: 72px;
}
.summary ul { margin: 0; list-style: disc; padding-left: 1.25em; }
.summary li {
  margin-top: var(--space-2);
  font-size: var(--page-meta); color: var(--ink-muted);
}
.summary li:first-child { margin-top: 0; }
.summary li::marker { color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   The blog index. Cards, because each one is a thing you act on as a unit
   (rule 7) — not rows, which is what a list of facts would be.
   --------------------------------------------------------------------------- */
.posts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }

.post {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  overflow: hidden;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.post:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
@media (prefers-reduced-motion: reduce) {
  .post, .post:hover { transition: none; transform: none; }
}
/* `scale-down`, not `cover`: three of these thumbnails are wide captures
   (1.78–2.00) that a 2:1 box barely crops, but the fourth is a 160px square
   logo, which `cover` blew up and cut in half. scale-down fits what is too
   big and leaves what is already small alone — so nothing is cropped and
   nothing is upscaled past what it was drawn at. */
.post__thumb {
  display: block; width: 100%; aspect-ratio: 2 / 1;
  object-fit: scale-down;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--hairline);
}
.post__body { display: block; padding: 18px 20px 20px; }
.post__meta { display: block; font-size: var(--page-meta); color: var(--ink-muted); }
.post__title {
  display: block; margin-top: var(--space-2);
  font-size: var(--page-lead); font-weight: 500; color: var(--ink-strong);
  line-height: 1.25;
}
.post__excerpt { display: block; margin-top: var(--space-2); color: var(--ink-muted); }
.post__more {
  display: block; margin-top: var(--space-3);
  font-size: var(--page-meta); color: var(--action);
}

/* Carried over from the source markup, where a pull-quote was set in italic.
   Preserved because the slant is part of what marks it as quoted speech. */
.i { font-style: italic; }

/* ===========================================================================
   Tutorial page
   ---------------------------------------------------------------------------
   Numbered steps, and reconstructions of two dialogs there is no screenshot
   of. Those are built from the app's own tokens and its real field labels —
   read off the source, not remembered — so they show what is actually on
   screen rather than an invented picture of it.
   =========================================================================== */

.toc {
  padding: 20px 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  max-width: var(--measure);
}
.toc h2 { margin: 0 0 var(--space-3); font-size: var(--page-body); }
.toc ol { margin: 0; padding-left: 1.25em; list-style: decimal; }
.toc li { margin-top: var(--space-2); font-size: var(--page-meta); }
.toc li::marker { color: var(--ink-faint); }
.toc a { color: var(--action); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* A step owns its number the way a list row owns its name. */
.step { max-width: var(--measure); margin-top: 56px; scroll-margin-top: 72px; }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: var(--space-3);
  font-size: var(--page-meta); font-variant-numeric: tabular-nums;
  color: #fff; background: var(--action);
  border-radius: var(--radius-pill);
}
.step h2 {
  margin: 0; font-size: var(--page-title);
  letter-spacing: -0.24px; line-height: 1.2;
}
.step > * + * { margin-top: 20px; }
.step > .step__n + h2 { margin-top: 0; }

/* Lists in a step are lists. The base reset strips markers globally, and the
   .prose rules that put them back do not reach in here. */
.step ul, .step ol { padding-left: 1.25em; }
.step ul { list-style: disc; }
.step ol { list-style: decimal; }
.step li { margin-top: var(--space-2); }
.step li::marker { color: var(--ink-faint); }
.step strong { font-weight: 500; color: var(--ink-strong); }
.step a { color: var(--action); text-decoration: none; border-bottom: 1px solid transparent; }
.step a:hover { border-bottom-color: currentColor; }
.step a.btn { border-bottom: 0; color: #fff; }

/* Wide media may leave the measure — a screenshot is not prose. The margin
   reset is not cosmetic: browsers default <figure> to `margin: 1em 40px`, so
   without it every figure sat 40px in and overflowed the viewport by 40px. */
.step figure, .wide { max-width: none; width: 100%; margin: 0; }
.step figure img, .step figure video {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-panel);
}

/* A caution the reader must not skip. Warning is a status colour and §3.3
   reserves it for meaning — a gate that will stop you dead is meaning. */
.note {
  padding: var(--space-3) 0 var(--space-3) 18px;
  border-left: var(--stroke-w) solid var(--line);
}
.note--warn { border-left-color: var(--warning); }
.note strong { font-weight: 500; color: var(--ink-strong); }
.note p { color: var(--ink-muted); }
.note > * + * { margin-top: var(--space-2); }

/* The price, stated once, plainly. */
.price {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  max-width: var(--measure);
}
.price__card {
  flex: 1 1 200px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--radius-panel);
}
.price__card--pick { background: var(--surface-raised); border-color: var(--ink-faint); }
.price__amt {
  font-size: 28px; font-weight: 500; color: var(--ink-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -0.6px;
}
.price__amt span { font-size: var(--page-meta); font-weight: 400; color: var(--ink-muted); }
.price__note { margin-top: var(--space-2); font-size: var(--page-meta); color: var(--ink-muted); }