/* ─────────────────────────────────────────────────────────────────────────────
   Free preview page — custom-nakasendo-free-preview.hbs (+ the free-preview
   branch of partials/members/cta.hbs). Loaded after nakasendo-sales.css, whose
   .nk-look-inside / .nk-faq rules this page reuses.
   Everything is scoped to .nkfp (the template's <article>), .nks-preview (the
   form) or .nkfp-form-card — never .tag-nakasendo or .members-cta alone, which
   the day posts' own gates also carry. Same token convention as
   nakasendo-sales.css: site colour tokens that flip for dark mode, button
   colour from .global-button (Ghost accent), no new literal colours.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Inline sign-up form (hero + gate) ──
   The form reuses the /signup/ page's .custom-content styles from screen.css
   (labels, stacked 470px pill fields, centred .global-button, success/error
   states) and both copies sit in a .members-cta card. Only what the card
   context needs is overridden here. */
.nks-preview.custom-content { margin: 0 auto; }            /* drop the full-page 10vh/12vh bottom margin */
.nks-preview .nks-preview-form { margin-bottom: 0; }
.nks-preview input[type=hidden] { display: none; }         /* .custom-content input sets display:block */
/* The card is --color-one, the same fill as .custom-content inputs, so use the
   page colour for the fields; hover/focus still go to --color-two (screen.css). */
.nks-preview input { margin: 8px 0 20px; background-color: var(--color-body); }
.nks-preview .global-button { margin-top: 4px; }
.nks-preview-form.loading .global-button { opacity: .6; pointer-events: none; }
.nks-preview .nks-note { display: block; margin-top: 14px; font-size: 13px; opacity: .7; }
.nks-preview .alert-error { margin-top: 16px; }
.post-content .nks-preview .alert-success { margin: 0; font-size: 18px; line-height: 1.5; }

/* Hero card: .members-cta's look, without the gate's 12vh bottom margin */
.post-content .nkfp-form-card { margin: 32px 0 0; }

/* ── Sections ── */
/* Each section's <h2> is its first child, so screen.css zeroes its top margin;
   space the sections themselves instead (covers the cards before/after too). */
.nkfp .nkfp-section { margin: 48px 0 0; }
.post-content .nkfp-section h2 { scroll-margin-top: 80px; }
.post-content .nkfp-formats { font-size: 16px; color: var(--color-font-one); opacity: .75; }

/* Look inside: nakasendo-sales.css styles the strip; here it has a real <h2>
   and <figure>s instead of the product page's <p> label and <div>s */
.nkfp .nk-look-inside { text-align: left; }
.post-content .nkfp .nk-look-inside-item { margin: 0; }

/* Day list: one list, two columns on desktop */
.post-content .nkfp-days { list-style: none; margin: 0; padding: 0; font-size: 16px; }
/* Hanging indent rather than flex: route, distance and note are loose inline
   nodes, so a wrapped line lines up under the route, not under "Day N" */
.post-content .nkfp-days li { position: relative; margin: 0; padding: 8px 0 8px 64px; border-bottom: 1px dotted var(--color-three); }
.nkfp-day-num { position: absolute; left: 0; opacity: .6; font-variant-numeric: tabular-nums; }
.nkfp-km { white-space: nowrap; }
.nkfp-day-note { font-size: 14px; opacity: .65; }
@media (min-width: 960px) {
  .post-content .nkfp-days { columns: 2; column-gap: 32px; }
  .post-content .nkfp-days li { break-inside: avoid; }
}

/* Closing line: no rules here on purpose. It reuses the day posts' compact
   callout markup (kg-callout-card-blue from screen.css, .nk-cta-compact
   .nk-cta-fx from nakasendo-sales.css), so it looks the same as the cards in
   the Nakasendo articles. */