/* /start. Loaded after who-its-for.css, whose steps4, wb-card, desk-card,
   ro-stage and role-fig rules this page reuses, and before observe-form.css
   (the form that closes the page). Rebuilt in site rebuild PR D (26 Oct 2026):
   five step cards, the report, the Tuesday loop, the licence line, the form. */
.sw-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.sw-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; }
@media (max-width: 860px) { .sw-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.sw-hero-title { font-size: var(--kf-fs-display); }
.sw-statement { font: 500 var(--kf-fs-h3)/1.25 var(--kf-serif); margin: 18px 0 0; max-width: 760px; color: var(--kf-sienna-text); text-wrap: balance; }
/* The grey line and the pill (site rebuild, 24 Oct 2026). */
.sw-grey { margin: 10px 0 0; font: 400 var(--kf-fs-body)/1.45 var(--kf-sans); color: var(--kf-muted); max-width: 40em; text-wrap: balance; }
.sw-actions { margin-top: 20px; }

/* The clay figure: a store, a warehouse and a truck on one ledge, the warehouse
   lit by the figure's glow (the one place on KarmanFlow). Every model draws at
   or above its release minimum at 1280 and 390 px. */
.sw-fig img.sw-l { left: 20%; translate: -50% 0; }
.sw-fig img.sw-m { left: 52%; translate: -50% 0; }
.sw-fig img.sw-r { left: 83%; translate: -50% 0; }

/* 1. Five steps: clay cards, the exit test as each card's second line. Steps 1
   and 2 share a row on a laptop; steps 3 and 4 carry their scene across the
   row; step 5 closes the list across the row. */
.steps5 { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
@media (max-width: 760px) { .steps5 { grid-template-columns: minmax(0, 1fr); } }
.step-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(14px, 2vw, 22px); align-items: center; padding: clamp(16px, 2.2vw, 24px); background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 24px; scroll-margin-top: calc(var(--site-header-h) + 16px); }
.step-card.is-wide, .step-card:last-child { grid-column: 1 / -1; }
.step-card.is-wide { grid-template-columns: minmax(0, 1fr); align-items: start; }
.step-fig { position: relative; width: 120px; height: 104px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 110% at 40% 0%, #fbf6ea 0%, #efe3cc 70%, #e6d7bd 100%); }
.step-fig > * { position: absolute; }
.step-fig .step-glow { left: 50%; bottom: -36px; width: 170px; height: 120px; margin-left: -85px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.5), rgba(247, 178, 90, 0.15) 55%, rgba(247, 178, 90, 0) 100%); }
/* Each clay figure shows whole in its box (final screenshot fixes, row S2): a
   model wider than the box draws at the box's width, less 8 px, at its own
   proportions, never cut by the box's rounded clip. */
.step-fig img { left: 50%; bottom: 4px; translate: -50% 0; max-width: calc(100% - 8px); height: auto; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--kf-sienna); color: #fff8ee; font: 600 var(--kf-fs-small)/1 var(--kf-sans); }
.step-head h3 { margin: 0; font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); }
.step-exit { margin: 10px 0 0; font-size: var(--kf-fs-body); line-height: 1.45; color: var(--kf-ink); }
/* Take over one place says, on its card, that you can hand back (site panel S3). */
.step-note { margin: 6px 0 0; font-size: var(--kf-fs-body); line-height: 1.45; color: var(--kf-ink); font-weight: 600; }
.step-done { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(156, 175, 136, 0.26); color: var(--lane-acts-ink); font: 600 var(--kf-fs-label)/1.6 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.step-card.is-wide .sw-scene { margin-top: 14px; }
/* On a phone the scene takes the card's padding too, so its clay keeps its
   release sizes at 390 px (scripts/check-public-clay-sizes.mjs). */
@media (max-width: 560px) { .step-card.is-wide .sw-scene { width: calc(100% + 24px); max-width: none; margin-left: -12px; margin-right: -12px; } }
.step-more { max-width: 1080px; }
.step-more p { margin: 0 0 12px; font-size: var(--kf-fs-body); max-width: 72ch; }
.step-detail { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: var(--kf-fs-body); line-height: 1.5; max-width: 72ch; }

/* 2. The Observe report: the clay folder, the example finding with written
   back 0, and the two windows (14 days free; 30 days of kept dates on the
   place you take over). */
.rp-grid { display: grid; grid-template-columns: auto minmax(0, 640px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; margin-top: clamp(20px, 3vw, 30px); }
@media (max-width: 1000px) { .rp-grid { grid-template-columns: auto minmax(0, 1fr); } .rp-time { grid-column: 1 / -1; } }
@media (max-width: 560px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } .rp-fig { display: none; } }
.rp-fig { position: relative; width: 132px; height: 132px; }
.rp-fig > * { position: absolute; }
.rp-fig .rp-glow { left: -24px; top: -10px; width: 180px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.55), rgba(247, 178, 90, 0.15) 55%, rgba(247, 178, 90, 0) 100%); }
.rp-fig img { left: 50%; bottom: 14px; translate: -50% 0; max-width: none; }
.rp-grid .wb-card { margin-top: 0; }
.wb-card .what { margin-top: 10px; }
.wb-card .rp-written { margin: 10px 0 0; }
.rp-written { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; background: rgba(156, 175, 136, 0.26); color: var(--lane-acts-ink); font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); font-variant-numeric: tabular-nums; }
.rp-time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--kf-line); }
.rp-time li { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--kf-panel); }
.rp-time li + li { border-left: 1px solid var(--kf-line); background: var(--kf-panel-solid); }
.rp-time .is-free { box-shadow: inset 0 4px 0 var(--lane-acts-ink); }
.rp-time li + li { box-shadow: inset 0 4px 0 var(--kf-sienna); }
.rp-days { font: 600 var(--kf-fs-title)/1.2 var(--kf-sans); color: var(--kf-ink); }
.rp-what { font-size: var(--kf-fs-small); line-height: 1.45; color: var(--kf-muted); }

#connect, #tuesday, #report { scroll-margin-top: calc(var(--site-header-h) + 16px); }

/* 3. Try a new promise on Tuesday: six clay steps in a row on a laptop, three
   by two on a tablet, one under another on a phone. Each number sits on the
   first line of its title, however many lines the title takes (site panel). */
.tl6 { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
@media (max-width: 1100px) { .tl6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tl6 { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.tl6 li { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px 12px 16px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 18px; }
.tl-fig { position: relative; height: 112px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 110% at 40% 0%, #fbf6ea 0%, #efe3cc 70%, #e6d7bd 100%); }
.tl-fig > * { position: absolute; }
.tl-fig .tl-glow { left: 50%; bottom: -40px; width: 200px; height: 130px; margin-left: -100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.5), rgba(247, 178, 90, 0.15) 55%, rgba(247, 178, 90, 0) 100%); }
.tl-fig img { left: 50%; bottom: 8px; translate: -50% 0; max-width: calc(100% - 8px); height: auto; }
.tl-title { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; font: 600 var(--kf-fs-body)/1.25 var(--kf-sans); color: var(--kf-ink); }
.tl-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--kf-charcoal); color: #f6f1e6; font: 600 var(--kf-fs-label)/1 var(--kf-sans); }
.tl-line { margin: 0; font-size: var(--kf-fs-small); line-height: 1.45; color: var(--kf-muted); }
@media (max-width: 560px) {
  .tl6 li { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 10px; }
  .tl-fig { grid-row: span 2; height: 108px; }
  .tl-title { margin: 0; align-self: end; }
  .tl-line { align-self: start; }
}

/* 5. The licence line: no price on the site. */
.lc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
@media (max-width: 560px) { .lc-row { grid-template-columns: minmax(0, 1fr); } }
.lc-fig { position: relative; width: 132px; height: 120px; }
.lc-fig > * { position: absolute; }
.lc-fig .lc-glow { left: -20px; top: -10px; width: 172px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.5), rgba(247, 178, 90, 0.15) 55%, rgba(247, 178, 90, 0) 100%); }
.lc-fig img { left: 50%; bottom: 12px; translate: -50% 0; max-width: none; }
.lc-copy .kf-h2 { margin: 0; }
.lc-line { margin: 10px 0 0; font-size: var(--kf-fs-body); max-width: 60ch; }
.lc-talk { margin: 6px 0 0; }

/* 6. The form closes the page: the heading and the clay beside the card. */
.ob-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .ob-row { grid-template-columns: minmax(0, 1fr); } }
.ob-head .kf-h2 { margin: 0; }
/* Beside the form (site panel C2, 31 Oct 2026): the offer, then what an
   invitation opens, the disclosure /request-invitation carried (#opens). */
.ob-offer { margin: 12px 0 0; font: 600 var(--kf-fs-body)/1.4 var(--kf-sans); color: var(--kf-ink); }
.ob-head details.more { margin-top: 20px; }
.ob-opens > summary { scroll-margin-top: calc(var(--site-header-h) + 16px); }
.opens-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.opens-list h3 { margin: 0; font: 600 var(--kf-fs-body)/1.3 var(--kf-sans); }
.opens-list p { margin: 2px 0 0; font-size: var(--kf-fs-small); color: var(--kf-muted); line-height: 1.45; }
.ob-still { position: relative; height: 260px; margin-top: 24px; border-radius: 24px; overflow: hidden; border: 1px solid var(--kf-line);
  background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%); }
@media (max-width: 900px) { .ob-still { display: none; } }
.ob-still > * { position: absolute; }
.ob-still .sglow { left: 50%; bottom: -60px; width: 420px; height: 280px; margin-left: -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.55), rgba(247, 178, 90, 0.16) 55%, rgba(247, 178, 90, 0) 100%); }
.ob-still .shadow { left: 22%; right: 22%; bottom: 22px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 96, 56, 0.4), rgba(150, 96, 56, 0) 100%); }
.ob-still img { left: 50%; bottom: 30px; translate: -50% 0; max-width: none; }
/* No scroll margin of its own: html's scroll-padding-top (site.css) already
   keeps #open under the sticky header, and the two added together landed the
   section about 150 px down at 390, the licence line cut above it (row S3). */
#open { scroll-margin-top: 0; }
/* The sent landing (/start?sent=1#open, final screenshot fixes, row S3): the
   form gives way to one short card, so the section keeps a screen's height
   under the header. The browser can then bring #open to the top, and no line
   of the licence section above sits cut under the sticky header. */
#open.is-sent { min-height: calc(100svh - var(--site-header-h) - 8px); }

/* What connects: a table on a laptop; on a phone each row stacks as a card,
   its cells labelled from the column heads. The explicit ARIA table roles in
   the markup keep the row and column relationship for screen readers after
   display: block drops the native table semantics. */
.sw-table-wrap { margin-top: 22px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 22px; padding: clamp(6px, 1.2vw, 12px) clamp(12px, 2vw, 22px); }
.sw-table { width: 100%; border-collapse: collapse; font-size: var(--kf-fs-body); line-height: 1.4; }
.sw-table th, .sw-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; }
.sw-table thead th { font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); border-bottom: 1px solid var(--kf-line); }
.sw-table tbody th { font-weight: 600; width: 36%; }
.sw-table tbody tr + tr > * { border-top: 1px solid var(--kf-line); }
@media (max-width: 640px) {
  .sw-table-wrap { background: none; border: 0; padding: 0; }
  .sw-table, .sw-table tbody, .sw-table tr, .sw-table th, .sw-table td { display: block; width: auto; }
  .sw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sw-table tbody { display: grid; gap: 10px; }
  .sw-table tbody tr { padding: 14px 16px; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); border-radius: 16px; }
  .sw-table tbody tr + tr > * { border-top: 0; }
  .sw-table tbody th { width: auto; padding: 0 0 8px; }
  .sw-table td { padding: 4px 0 0; }
  .sw-table td::before { content: attr(data-label); display: block; font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); margin-bottom: 2px; }
}
/* 4. What connects: seven clay tiles, the caption, and the table and the four
   steps behind the section's one disclosure. */
.conn7 { list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .conn7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .conn7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.conn-tile { display: grid; gap: 8px; justify-items: center; align-content: start; padding: 12px 10px 14px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 18px; text-align: center; font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); color: var(--kf-ink); }
.conn-fig { display: flex; align-items: flex-end; justify-content: center; height: 80px; }
.conn-fig img { max-width: none; }
.conn-cap { margin: 14px 0 0; font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); }
.conn-more .sw-table-wrap { margin-top: 4px; }

/* The two clay scenes (studio refresh, 23 Oct 2026; one 5.0 s pass each since
   site rebuild PR D): the Observe flow in step 3 and the one-place loop in
   step 4. switching.js draws each stage at 1000 px wide, or 600 px
   tall-drawn at 860 px and below, where the stage stops at 600 px so its words
   never draw larger than written. Each stage reserves its height before it
   builds. The step card carries the words, so there is no caption strip. */
.sw-scene { margin: 0; max-width: 1000px; }
.sw-flow-stage { aspect-ratio: 1000 / 420; }
.sw-loop-stage { aspect-ratio: 1000 / 430; }
@media (max-width: 860px) {
  .sw-flow-stage { aspect-ratio: 600 / 960; }
  .sw-loop-stage { aspect-ratio: 600 / 920; }
  /* width: 100%: inside a step card (a grid item) auto margins alone would
     shrink the scene to its chip's width. */
  .sw-scene { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
}
/* A sheet still on its way: shown only in the reduced-motion still. */
.sw-scene .sw-poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sw-scene .sw-poster { opacity: 1 !important; } }
.sw-scene .sw-example { margin: 10px 0 0; }

/* Words inside the stages, in stage pixels (the stage scales them). */
.swl .sw-slab { font: 600 21px/1 var(--kf-sans); letter-spacing: 0.02em; color: #fff3e2; white-space: nowrap; text-shadow: 0 1px 0 rgba(60, 28, 10, 0.45); }
.swl .sw-place { font: 600 18px/1.2 var(--kf-sans); color: var(--kf-ink); white-space: nowrap; }
.swl .sw-status { font: 600 15px/1.2 var(--kf-sans); letter-spacing: 0.04em; color: var(--kf-muted); white-space: nowrap; }
.swl .sw-status.is-on { color: var(--kf-sienna-text); }
.swl .sw-counter { font-size: 16px; padding: 6px 12px; font-variant-numeric: tabular-nums; }
.swl .sw-chip { font-size: 16px; padding: 6px 12px; }
.swl.is-narrow .sw-slab { font-size: 26px; }
.swl.is-narrow .sw-place { font-size: 28px; }
.swl.is-narrow .sw-status { font-size: 24px; }
.swl.is-narrow .sw-counter, .swl.is-narrow .sw-chip { font-size: 24px; padding: 8px 16px; }

.swf .sw-group { font: 600 17px/1.25 var(--kf-sans); color: var(--kf-muted); text-align: center; white-space: normal; }
.swf .sw-gate { font: 600 15px/1.3 var(--kf-sans); color: var(--kf-sienna-text); text-align: center; white-space: normal; }
.swf .sw-sheet { width: 26px; height: 32px; border-radius: 4px; background: #fffaf0 linear-gradient(to bottom, transparent 8px, rgba(60, 44, 24, 0.28) 8px, rgba(60, 44, 24, 0.28) 10px, transparent 10px, transparent 15px, rgba(60, 44, 24, 0.28) 15px, rgba(60, 44, 24, 0.28) 17px, transparent 17px, transparent 22px, rgba(60, 44, 24, 0.28) 22px, rgba(60, 44, 24, 0.28) 24px, transparent 24px); box-shadow: 0 4px 10px rgba(60, 40, 20, 0.18), 0 0 0 1px rgba(80, 52, 24, 0.12); }
.swf .sw-map { padding: 12px 16px; white-space: normal; }
.swf .sw-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 62px; font: 600 17px/1.2 var(--kf-sans); white-space: nowrap; }
.swf .sw-row + .sw-row { border-top: 1px solid var(--kf-line); }
.swf .sw-from { color: var(--kf-muted); font-weight: 400; }
.swf .sw-arrow { color: var(--kf-sienna-text); }
.swf .sw-conf { padding: 3px 9px; border-radius: 999px; background: rgba(156, 175, 136, 0.28); color: var(--lane-acts-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.swf .sw-conf.is-low { background: rgba(210, 122, 74, 0.22); color: var(--lane-asks-ink); }
.swf .sw-ck { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--lane-acts-ink); }
.swf .sw-ck::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border: solid #fff8ee; border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.swf .sw-tag { font-size: 16px; }
.swf .sw-finding { white-space: normal; padding: 12px 14px; }
.swf .sw-fp { font: 400 14px/1.3 var(--kf-sans); color: var(--kf-muted); }
.swf .sw-fw { font: 600 16px/1.3 var(--kf-sans); margin-top: 6px; }
.swf .sw-fs { display: inline-flex; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(60, 44, 24, 0.22); font: 600 15px/1.3 var(--kf-sans); }
.swf.is-narrow .sw-group { font-size: 25px; }
.swf.is-narrow .sw-gate { font-size: 23px; text-align: right; }
.swf.is-narrow .sw-map { padding: 14px 22px; }
.swf.is-narrow .sw-row { font-size: 25px; min-height: 76px; gap: 14px; }
.swf.is-narrow .sw-conf { font-size: 22px; padding: 4px 12px; }
.swf.is-narrow .sw-ck { width: 32px; height: 32px; }
.swf.is-narrow .sw-ck::after { left: 11px; top: 6px; width: 8px; height: 15px; border-width: 0 3.5px 3.5px 0; }
.swf.is-narrow .sw-tag { font-size: 24px; }
.swf.is-narrow .sw-finding { padding: 16px 20px; }
.swf.is-narrow .sw-fp { font-size: 22px; }
.swf.is-narrow .sw-fw { font-size: 25px; }
.swf.is-narrow .sw-fs { font-size: 23px; }
.sw-kit { margin: 18px 0 0; max-width: 760px; font-size: var(--kf-fs-body); }