/* Meet Me Gently — The 10-Minute Closer Kit (free lead magnet, printable).
   Loaded after shared/cards.css + assets/site.css: reuses brand tokens
   (--steady/--open/--reach/--repair/--bg/--ink/--serif/--sans) and only adds
   what this one page needs. Self-contained: no external fonts/images/CDNs. */

:root {
  --k-ink: #14110E;         /* darker heading ink than the site default, per spec */
  --k-cream: #FBF7EF;
  --k-paper: #fffdf8;
  --k-line: #e7ddc9;
  --k-shadow: 0 30px 70px -36px rgba(20,16,10,.35), 0 2px 10px -4px rgba(20,16,10,.08);
}

/* ---- page shell: a soft "desk" the printable sheets sit on ---- */
body.kit-body {
  background: radial-gradient(120% 70% at 50% -8%, #fffef9, var(--bg) 55%),
              repeating-linear-gradient(180deg, rgba(20,16,10,.012) 0 2px, transparent 2px 4px);
  color: var(--k-ink);
}
main.kit { display: block; padding: clamp(1.2rem, 4vw, 2.6rem) clamp(.9rem, 4vw, 1.6rem) clamp(3rem, 8vw, 5rem); }

/* ---- screen-only print toolbar ---- */
.kit-toolbar {
  max-width: 900px; margin: 0 auto clamp(1.4rem, 4vw, 2rem); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: .9rem 1.4rem;
  background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 999px;
  padding: .7rem .7rem .7rem 1.3rem; box-shadow: 0 14px 30px -22px rgba(20,16,10,.3);
}
.kit-toolbar p { margin: 0; font-size: .86rem; color: var(--ink-soft); max-width: 46ch; }
.kit-toolbar .btn { flex: 0 0 auto; }

/* ---- one printable "sheet" ---- */
.kit-sheet {
  max-width: 900px; margin: 0 auto clamp(1.6rem, 4vw, 2.2rem); background: var(--k-paper);
  border: 1px solid var(--k-line); border-radius: 20px; box-shadow: var(--k-shadow);
  padding: clamp(1.8rem, 6vw, 3.6rem);
  position: relative; overflow: hidden;
}
.kit-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--ribbon); }
.kit-cards.kit-sheet { max-width: 980px; }
.kit-eyebrow { font: 700 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .8rem; }
.kit-sheet h1, .kit-sheet h2 { color: var(--k-ink); }
.kit-sheet h2 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); margin-bottom: .7rem; }
.kit-lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; margin: 0 0 1.6rem; }
.kit-sheet-foot { margin-top: clamp(1.6rem, 4vw, 2.4rem); padding-top: 1rem;
  border-top: 1px dashed var(--k-line); display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); }
.kit-sheet-foot b { font-family: var(--serif); font-weight: 600; letter-spacing: 0;
  text-transform: none; font-size: .82rem; color: var(--k-ink); }

/* ============================== COVER ============================== */
.kit-cover { text-align: left; }
.kit-cover-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 2.2rem; }
.kit-cover-top .brand-mark { width: 30px; height: 30px; }
.kit-cover-top .brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.kit-cover h1 { font-size: clamp(2rem, 5.6vw, 3.15rem); letter-spacing: -.01em; margin: 0 0 1.1rem; }
.kit-cover h1 em { font-style: italic; color: var(--steady); }
.kit-cover-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start; }
.kit-toc { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .55rem; counter-reset: kittoc; }
.kit-toc li { counter-increment: kittoc; display: flex; align-items: baseline; gap: .8rem;
  font-size: .95rem; color: var(--k-ink); }
.kit-toc li::before { content: counter(kittoc, decimal-leading-zero); font: 700 .72rem/1 var(--sans);
  color: var(--ink-soft); border: 1px solid var(--k-line); border-radius: 999px; padding: .3rem .5rem; }
.kit-toc b { font-family: var(--serif); font-weight: 600; }
.kit-toc span { color: var(--ink-soft); font-size: .86rem; }
.kit-cover-fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; align-items: end; margin: 0; }
.kit-cover-fan .kit-jscard { margin: 0; transform-origin: bottom center; transition: transform .2s ease; }
.kit-cover-fan .kit-jscard:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.kit-cover-fan .kit-jscard:nth-child(2) { transform: rotate(0deg); z-index: 2; }
.kit-cover-fan .kit-jscard:nth-child(3) { transform: rotate(7deg) translateY(8px); }
.kit-cover-fan .mmg-card { box-shadow: 0 20px 40px -20px rgba(20,16,10,.5); }
.kit-cover-note { margin-top: 1.6rem; font-size: .86rem; color: var(--ink-soft); max-width: 40ch; }
.kit-cover-tag { display: inline-flex; align-items: center; gap: .5rem; font: 600 .74rem/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--steady-ink); background: var(--steady-tint);
  border: 1px solid var(--steady-line); border-radius: 999px; padding: .45rem .85rem; margin-bottom: 1.1rem; }
@media (max-width: 720px) { .kit-cover-grid { grid-template-columns: 1fr; } .kit-cover-fan { max-width: 320px; margin: 0 auto; } }

/* ============================== THE RULE ============================== */
.kit-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.kit-rule-item { border: 1px solid var(--line); border-left: 5px solid var(--rk, var(--steady));
  border-radius: 14px; padding: 1.3rem 1.4rem; background: linear-gradient(135deg, var(--rk-tint, var(--steady-tint)), var(--k-paper) 55%); }
.kit-rule-item h3 { font-family: var(--serif); font-size: 1.28rem; margin: 0 0 .35rem;
  color: var(--rk-ink, var(--steady-ink)); }
.kit-rule-item .kit-rule-sub { font-weight: 600; color: var(--k-ink); margin: 0 0 .55rem; font-size: .95rem; }
.kit-rule-item p:last-child { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.kit-rule-item--pass { --rk: var(--steady); --rk-ink: var(--steady-ink); --rk-tint: var(--steady-tint); }
.kit-rule-item--pause { --rk: var(--reach); --rk-ink: var(--reach-ink); --rk-tint: var(--reach-tint); }
.kit-rule-item--swap { --rk: var(--open); --rk-ink: var(--open-ink); --rk-tint: var(--open-tint); }
.kit-rule-item--stop { --rk: var(--repair); --rk-ink: var(--repair-ink); --rk-tint: var(--repair-tint); }
.kit-rule-script { margin-top: 1.6rem; border: 1px dashed var(--line); border-radius: 14px;
  padding: 1.3rem 1.5rem; background: var(--panel); }
.kit-rule-script p { margin: 0; }
.kit-rule-script .kit-eyebrow { margin-bottom: .5rem; }
.kit-rule-script blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem;
  line-height: 1.5; color: var(--k-ink); }
@media (max-width: 640px) { .kit-rule-grid { grid-template-columns: 1fr; } }

/* ============================== 12 CARDS ============================== */
.kit-cards-lede { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.4rem; margin-bottom: 1.6rem; }
.kit-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1rem; }
.kit-card { position: relative; margin: 0; padding: .55rem; border-radius: 20px; border: 1.5px dashed #cbbfa0; }
.kit-card::after { content: "✂ cut"; position: absolute; top: -.55rem; left: 50%; transform: translateX(-50%);
  background: var(--k-paper); padding: 0 .5rem; font: 600 .58rem/1.5 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: #a89a76; }
.kit-card .mmg-card { box-shadow: 0 16px 30px -18px rgba(20,16,10,.4); }
@media (max-width: 720px) { .kit-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kit-cards-grid { grid-template-columns: 1fr 1fr; gap: .8rem; } .kit-card { padding: .4rem; } }

/* Plain-text card face — real quoted card text in a fixed-size, non-shrinking
   card-shaped box. This is the face shown (a) before card-render.js has run,
   (b) if it never runs, and (c) ALWAYS in print — see the print block below for
   why print deliberately prefers this over the fancy auto-fit .mmg-card. Fixed
   rem sizing (not the illustrated card's cqi/--fit system) means it can never
   go stale when the container size changes between screen and print. */
.kit-card-fallback {
  margin: 0; aspect-ratio: 2.75 / 4.75; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .55rem; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--k-cream); padding: 9%; text-align: center; }
.kit-card-fallback__fam { font: 700 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fam-ink, var(--steady-ink)); }
.kit-card-fallback p { margin: 0; font-family: var(--serif); font-size: .88rem; line-height: 1.42; color: var(--k-ink); }
.kit-card-fallback cite { font: 600 .62rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-style: normal; }
.kit-card--steady .kit-card-fallback { --fam-ink: var(--steady-ink); border-color: var(--steady-line);
  background: linear-gradient(165deg, var(--steady-tint), var(--k-cream) 60%); }
.kit-card--open .kit-card-fallback { --fam-ink: var(--open-ink); border-color: var(--open-line);
  background: linear-gradient(165deg, var(--open-tint), var(--k-cream) 60%); }
.kit-card--reach .kit-card-fallback { --fam-ink: var(--reach-ink); border-color: var(--reach-line);
  background: linear-gradient(165deg, var(--reach-tint), var(--k-cream) 60%); }
/* Once card-render.js has appended a real .mmg-card next to it, the fallback
   steps aside ON SCREEN only (print always shows the fallback — see below). */
.kit-card:has(.mmg-card) .kit-card-fallback,
.kit-jscard:has(.mmg-card) .kit-card-fallback { display: none; }

/* ============================== RITUALS ============================== */
.kit-rituals-grid { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.kit-ritual { border: 1px solid var(--line); border-top: 4px solid var(--rk, var(--steady));
  border-radius: 16px; padding: 1.5rem 1.6rem; background: var(--k-paper); }
.kit-ritual--checkin { --rk: var(--steady); }
.kit-ritual--repair { --rk: var(--repair); }
.kit-ritual--date { --rk: var(--open); }
.kit-ritual-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; margin-bottom: .3rem; }
.kit-ritual h3 { font-family: var(--serif); font-size: 1.32rem; margin: 0; }
.kit-chip { display: inline-flex; align-items: center; gap: .35rem; font: 700 .68rem/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--rk-ink, var(--steady-ink));
  border: 1px solid currentColor; border-radius: 999px; padding: .3rem .6rem; }
.kit-ritual--checkin .kit-chip { color: var(--steady-ink); }
.kit-ritual--repair .kit-chip { color: var(--repair-ink); }
.kit-ritual--date .kit-chip { color: var(--open-ink); }
.kit-ritual-purpose { margin: .3rem 0 1rem; color: var(--ink-soft); font-style: italic; font-family: var(--serif); }
.kit-ritual ol { margin: 0; padding-left: 1.35rem; display: grid; gap: .55rem; }
.kit-ritual ol li { color: var(--k-ink); font-size: .94rem; line-height: 1.55; }
.kit-ritual ol li b { color: var(--rk-ink, inherit); }

/* ============================== HOW TO ============================== */
.kit-tips { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; margin-top: 1.6rem; }
.kit-tip { display: flex; gap: .8rem; border: 1px solid var(--line); border-radius: 14px;
  padding: 1.05rem 1.15rem; background: var(--panel); }
.kit-tip b.kit-tip-n { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--steady-tint); color: var(--steady-ink); font-family: var(--serif);
  font-weight: 600; font-size: .95rem; }
.kit-tip p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--k-ink); }
.kit-tip p b { color: var(--k-ink); }
@media (max-width: 640px) { .kit-tips { grid-template-columns: 1fr; } }

/* ============================== CLOSING / SIX NEEDS ============================== */
.kit-needs-grid { display: grid; gap: .8rem; margin: 1.6rem 0 2rem; }
.kit-need { display: grid; grid-template-columns: 9rem 1fr; gap: 0 1.1rem; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; background: var(--panel); }
.kit-need__tag { font: 700 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.kit-need__tag small { display: block; font: 500 .68rem/1.5 var(--sans); letter-spacing: .06em;
  color: var(--ink-soft); text-transform: none; margin-top: .25rem; }
.kit-need--steady .kit-need__tag { color: var(--steady-ink); }
.kit-need--open .kit-need__tag { color: var(--open-ink); }
.kit-need--reach .kit-need__tag { color: var(--reach-ink); }
.kit-need--repair .kit-need__tag { color: var(--repair-ink); }
.kit-need p { margin: 0; font-size: .92rem; color: var(--k-ink); line-height: 1.5; }
.kit-need p em { font-style: italic; color: var(--ink-soft); }
@media (max-width: 620px) { .kit-need { grid-template-columns: 1fr; gap: .35rem; } }

.kit-afterdark { border: 1px solid var(--repair-line); border-left: 5px solid var(--repair);
  background: linear-gradient(135deg, var(--repair-tint), var(--k-paper) 60%);
  border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1.8rem; }
.kit-afterdark .kit-eyebrow { color: var(--repair-ink); margin-bottom: .5rem; }
.kit-afterdark p { margin: 0; color: var(--k-ink); line-height: 1.65; }
.kit-afterdark p + p { margin-top: .6rem; color: var(--ink-soft); font-size: .88rem; }

.kit-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: .4rem 0 1.8rem; }
.kit-disclaimer { border-top: 1px solid var(--k-line); padding-top: 1.2rem; font-size: .82rem;
  line-height: 1.65; color: var(--ink-soft); }

/* ================================================================
   PRINT — @page margins, hide chrome, force sensible page breaks,
   keep colors, never clip a card. Works for A4 and US Letter alike
   because nothing below assumes a fixed page width in inches/mm.
   ================================================================ */
@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
  .site-header, .site-footer, .skip, .cta-dock, .no-print, .kit-toolbar { display: none !important; }
  main.kit { padding: 0; }
  .kit-sheet { box-shadow: none; border: none; border-radius: 0; max-width: none;
    margin: 0; padding: 0; page-break-after: always; break-after: page; }
  .kit-sheet:last-of-type { page-break-after: auto; break-after: auto; }
  .kit-sheet::before { display: none; }
  .kit-sheet, .kit-sheet * { background-image: none; }
  .kit-sheet { background: #fff; }
  .kit-rule-item, .kit-ritual, .kit-tip, .kit-need, .kit-afterdark, .kit-rule-script {
    background: #fff !important; break-inside: avoid; }
  /* Print ALWAYS shows the fixed-size plain-text card face, never the illustrated
     .mmg-card — its size is computed for the on-screen grid via a live
     ResizeObserver, and that computation does not reliably re-run for the
     browser's separate print/PDF layout pass, so what fit the screen can
     silently overflow (and clip) on paper. The fallback's fixed rem sizing has
     no such dependency, which is exactly why every card here is guaranteed
     never to clip. See the render script's comment for the full rationale. */
  .kit-card .mmg-card { display: none !important; }
  .kit-card .kit-card-fallback { display: flex !important; }
  .kit-card { break-inside: avoid; page-break-inside: avoid; border-color: #999; }
  .kit-cards-grid { grid-template-columns: repeat(3, 1fr); gap: .5cm .4cm; }
  /* No hardcoded "break after card N" — page height varies with paper size
     (A4 vs US Letter) and printer margins, so a fixed split point can leave a
     near-empty trailing page on shorter paper. Each card keeps break-inside:
     avoid and the browser fills every page with as many whole cards as fit,
     continuing the rest onto however many pages it actually takes. */
  .kit-rituals-grid, .kit-tips, .kit-needs-grid { break-inside: auto; }
  a[href]:not(.btn)::after { content: ""; }
  .kit-sheet-foot { break-inside: avoid; }
  .kit-cover-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .kit-sheet { transition: none; } }