/* join.css: /join's own look (docs/join-redesign/spec.md 2, 3, 5, 11). Linked after themes.css.
   join-live.css holds the device, the ticket, the rail, the building mark and every motion;
   join-pricing.css the pricing section. Every colour is a palette.css token, including /join's own
   measured steps (--jn-*); there is no raw colour here. */

:root { --dir: -1; }   /* the /join colour steps (--jn-*) live in palette.css with their ratios */
html[dir=rtl] { --dir: -1; }
html[dir=ltr] { --dir: 1; }

/* ---- the ad arrival (?src=ad): the inline script in <head> sets .from-ad before the first paint, so
   the default headline never flashes. display:none takes the other variant out of the a11y tree. */
html:not(.from-ad) .h-ad, html.from-ad .h-def { display: none; }

/* ---- page frame ---- */
#app { overflow-x: clip; }
.inner { max-width: 1080px; margin-inline: auto; padding-inline: var(--wrap-x); }
.noscript { text-align: center; padding: 12px; background: var(--soft); border-radius: var(--radius); margin: 6px 16px 14px; color: var(--tx); font-size: 0.9375rem; }
html { scroll-padding-block-end: 110px; }
/* below 900px the store ticket rides at the top (72px + 8px): a control brought into view by the
   keyboard lands under it, never behind it (WCAG 2.4.11) */
@media (max-width: 899px) { html { scroll-padding-block-start: 96px; } }

/* ---- legibility floor: nothing reads under 14px, no dim mono caption, and no Rubik 300 ---- */
#app .hint { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; }
#app label, #app .label { font-size: 0.9375rem; margin-bottom: 7px; }
#app .check { font-size: 0.9375rem; line-height: 1.55; }
#app .error-msg { font-size: 0.875rem; }
#app .chip { font-size: 0.90625rem; }
#app .chip.static { font-size: 0.875rem; min-height: 36px; }
#app .field .count { font-size: 0.875rem; color: var(--steel-text); }
#app .notice { font-size: 0.90625rem; }
#app .badge { font-size: 0.875rem; }
#app .small { font-size: 0.875rem; }
#app .mono-label { font-size: 0.875rem; letter-spacing: .06em; }
#app .kicker { font-size: 0.875rem; letter-spacing: .1em; }
#app .stamp { font-size: 0.875rem; letter-spacing: .06em; padding: 7px 13px; }
#app .pill.mono { font-size: 0.875rem; letter-spacing: .06em; }
/* the bar's pill is Hebrew words, not data: the body face, untracked (in IBM Plex Mono, which has no
   Hebrew, it fell back to a monospace face and read as typewriter spaced letters) */
#topbar .pill { font-family: var(--font-body); letter-spacing: 0; font-size: 0.875rem; }
#app .opt, #app ::placeholder, #app .role small { font-weight: 400; }
#app ::placeholder { color: var(--jn-ph); }
#app .step-label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--tx2); margin: 10px 0 0; min-block-size: 1.65em; }
#topbar .brand { min-inline-size: 44px; justify-content: center; }
#topbar .brand, .f-brand, #topbar .btn-sm, .f-links .btn-sm, .returning .btn-sm, #submitNotice .btn-sm, .geo .btn-sm,
.form-plate .chip, .gear-plate .chip { min-height: 44px; }
@media (max-width: 600px) {
  #topbar .sb-inner > .pill, #topbar .sb-inner > [data-feedback] { display: none; }
}

/* ---- nothing on the first screen moves when the module fills its hosts (CLS). Each box below is the
   height its filled state measured (2026-09-26, 390 and 1440): the bar is the site bar (--bar-h plus its
   1px edge), the rail 56px, the phone ticket's row 72px, and the folded picker at its narrowest per
   width band. The headline is two lines from 600px, so a web font arriving never re-wraps it. */
#topbar { min-block-size: calc(var(--bar-h) + 1px); }
#topbar > .topbar { min-block-size: calc(var(--bar-h) + 1px); box-sizing: border-box; margin-block-end: 0; padding-inline: var(--wrap-x); }
.jn-rail { min-block-size: 56px; }
@media (max-width: 899px) { #jnTicketRow { min-block-size: 72px; } }
@media (min-width: 600px) { #head .fc-copy h1 .grad-text { display: block; } }
#capGrid { min-block-size: 647px; }
@media (min-width: 600px) { #capGrid { min-block-size: 409px; } }
@media (min-width: 900px) and (max-width: 999px) { #capGrid { min-block-size: 538px; } }
@media (min-width: 1000px) { #capGrid { min-block-size: 427px; } }

/* ---- the cover's copy column (the film is film-cover.css). On paper: the sign in link in the bar is
   --steel-text on --g, 6.91:1 with no pill; the H1 --tx 14.18:1; the lead --tx2 6.99:1; the
   grad-text's lightest stop (--pri) 4.50:1 (large text needs 3:1). */
#head .fc-copy h1 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1.1; color: var(--tx); text-wrap: balance; }
#head .fc-copy .lead-lg { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--tx2); max-width: 40ch; }
.head-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.head-facts .f { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--tx); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.head-facts .f::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pri); }
@keyframes pulse-soft { 50% { box-shadow: 0 0 0 6px rgba(31,162,148,0); } }
.head-facts .f .num { font-weight: 600; font-family: var(--font-mono); }
/* the free pill (tiers-ui freePillHtml): its box is held from the first paint, measured on 2026-09-24
   (a 1.03rem and a 0.875rem line at 1.65, 20px padding, 2px border), so nothing under it moves */
.head-pill { margin-top: 18px; min-block-size: calc(3.15rem + 22px); }
/* the pill was drawn for the navy cover; on paper it takes the paper's inks (--tx 14.18, --tx2 6.99 on --g) */
#freePill .tp-freepill { background: var(--card); border-color: var(--line); color: var(--tx); -webkit-backdrop-filter: none; backdrop-filter: none; }
#freePill .tp-freepill small { color: var(--tx2); }
#freePill .tp-zero path { stroke: var(--pri); }
@media (max-width: 369px) { .head-pill { min-block-size: calc(4.6rem + 22px); } }
@media (max-width: 339px) { .head-pill { min-block-size: calc(6.3rem + 22px); } }
@media (max-width: 599px) { #head .head-facts, #head .head-pill { display: none; } }
/* beside the film from 600px the copy column is narrow: the pill wraps to two lines below about 657px
   (measured in Rubik, 2026-09-26), so that band holds the two line box */
@media (min-width: 600px) and (max-width: 669px) { .head-pill { min-block-size: calc(4.6rem + 22px); } }
@media (min-width: 900px) {
  /* the film's mat (8px + 1px, a box shadow outside the frame) clears the bar by 24px or more at every
     width: without this it sat 1 to 4px under the bar's buttons from 1280 to 2560 */
  #head .fc-in { padding-block-start: clamp(24px, 3vw, 40px); }
  #head .fc-copy h1 { font-size: 3.5rem; line-height: 1.05; }
  #head .fc-copy .lead-lg { font-size: 1.125rem; max-width: 46ch; }
}
@media (min-width: 900px) and (max-width: 1099px) { #head .fc-copy h1 { font-size: 2.75rem; } }
/* a tablet: the words and the film side by side from 600px, as on a desktop, so the first question is on
   the first screen (a full width 16:9 window alone was 414px tall at 768) */
@media (min-width: 600px) and (max-width: 899px) {
  #head .fc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); column-gap: 24px; }
  /* the facts row holds two rows from the first paint: in the fallback font the two pills are 395px
     and wrap, in Rubik 378px and fit from about 750px, so the font arriving moved the film and the
     stage (CLS 0.158 under reduced motion at 768). Two pill rows (41px each, 8px apart, measured),
     which the live count fills when it arrives */
  #head .head-facts { min-block-size: 90px; align-content: flex-start; }
  #head .fc-copy { grid-column: 1; grid-row: 1; }
  #head .fc-film { grid-column: 2; grid-row: 1; max-inline-size: none; margin-inline: 0; }
}
/* a short phone (under 780px tall): the window shrinks whole, framed and centred, so the first question
   still clears the dock. Its shape never changes, so nothing of the film is cut */
@media (max-width: 599px) and (max-height: 779px) {
  #head .fc-film { margin-inline: auto; inline-size: 64%; }
  #head .fc-frame { border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
}

/* ---- the stage: the card and, at 900px and up, the store building itself beside it ---- */
.join-band { position: relative; padding-bottom: clamp(34px, 5vw, 60px); background: var(--g); }
.join-wrap { position: relative; }
.jn-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.jn-stage > * { min-width: 0; }
.jn-preview { display: none; }
@media (min-width: 900px) {
  .join-wrap.inner { max-width: 1200px; }
  .jn-stage { grid-template-columns: minmax(0, 600px) 300px; column-gap: 40px; justify-content: center; }
  .jn-preview { display: block; position: sticky; top: 24px; }
}
@media (min-width: 1100px) { .jn-stage { grid-template-columns: minmax(0, 660px) 340px; column-gap: 72px; } }

/* ---- referral: a row above the ticket on a phone, a tab on the card's top edge on a desktop ---- */
.ref-banner { display: flex; align-items: center; gap: 11px; border-radius: 16px; padding: 8px 12px; font-size: 0.9375rem;
  background: var(--card); border: 1px solid var(--line); color: var(--tx); }
.ref-banner .rb-t { line-height: 1.35; flex: 1; min-width: 0; }
.ref-banner .rb-t .small { display: block; margin-top: 2px; color: var(--tx2); }
.ref-banner .dismiss { font-size: 0.875rem; color: var(--tx2); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 6px; flex: none; background: none; border: 0; cursor: pointer; }
@media (min-width: 900px) {
  #refBanner:not([hidden]) { position: relative; z-index: 2; margin-inline-start: 28px; margin-bottom: -1px; }
  .ref-banner { display: inline-flex; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 4px 12px; }
}

/* ---- the card ---- */
.form-plate { padding: 20px 18px 22px; border-radius: 28px; }
/* .plate clips with overflow hidden, which makes the card a scroll container and pins the desktop dock
   to the card's foot instead of the screen's. clip rounds the corners the same way without that */
#formCard.plate { overflow: clip; }
@media (min-width: 900px) { .form-plate { padding: 26px 30px 26px; } }
@media (max-width: 400px) { .form-plate { padding: 18px 14px 20px; } }
.form-plate .step-title { font-size: 1.75rem; margin: 14px 0 6px; outline: none; }
@media (min-width: 900px) { .form-plate .step-title { font-size: 2rem; } }
.step-lead { color: var(--tx2); font-size: 1rem; margin-bottom: 18px; line-height: 1.55; }
.form-plate .field label, .form-plate .field .label { color: var(--tx); font-weight: 600; }
.form-plate input[type=text], .form-plate input[type=tel], .form-plate input[type=email], .form-plate select {
  border-color: var(--jn-edge); min-height: 56px; font-size: 1.0625rem; border-radius: 14px; }
@media (min-width: 900px) { .form-plate .field input, .form-plate .field select { max-inline-size: 560px; } }
.form-plate .field .error-msg { color: var(--err); }
.returning, .jn-draft { margin-bottom: 14px; }
.returning .grow { min-width: 200px; }
.returning .actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.returning .badge { vertical-align: middle; margin-inline-start: 4px; }
.returning .btn svg { width: 16px; height: 16px; margin: 0; }
.jn-back { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 14px; border-radius: 18px; background: var(--g); border: 1px solid var(--line); }
.jn-back .tp-fac { width: 44px; flex: none; }
.jn-back b { font-weight: 600; }
.jn-back .small { color: var(--tx2); }
.jn-draft { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: var(--soft); color: var(--soft-tx); font-weight: 500; }
.jn-draft .btn { min-height: 44px; }

/* ---- screen 1: the picker and its folds ---- */
.cap-stack-field { margin-top: 18px; }
#fServices .craft-host { display: block; }
#fServices > .error-msg { margin: 0 0 10px; }
/* the picker's primary-craft line keeps its box from the first paint (the picker itself only holds it
   after the first pick), so the first tap never pushes the tile under the finger down */
#fServices .cp-hint[hidden] { display: block !important; visibility: hidden; }   /* over toolpath's [hidden] !important */
#fServices .cp-count { font-size: 0.875rem; }
/* the folded grid hides every tile's sub-line; on /join a tile that holds several crafts keeps it, so the
   printing tile says חולצות, כוסות, כובעים ומגבות to the maker who prints mugs (spec 3.3), at the 14px floor */
#fServices .cp-folded .cp-pop .cp-tile.multi .cp-sub { display: -webkit-box; font-size: 0.875rem; -webkit-line-clamp: 2; }
.jn-fold { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 16px;
  background: var(--g); border: 1px solid var(--jn-tile-edge); text-align: start; cursor: pointer; font: inherit; color: var(--tx); }
.jn-fold:hover { background: var(--soft); }
.jn-fold:focus-visible { outline: 2px solid var(--pri-sh); outline-offset: 3px; }
.jn-fold .t { flex: 1; min-width: 0; }
.jn-fold .t > span:first-child { font-weight: 600; font-size: 0.9375rem; }
.jn-fold small { display: block; color: var(--tx2); font-size: 0.875rem; margin-top: 2px; }
.jn-fold .chev { flex: none; transition: transform .2s; }
.jn-fold[aria-expanded="true"] .chev { transform: rotate(180deg); }
.jn-fold .chev svg { width: 18px; height: 18px; }
#capCards { margin-top: 12px; }
.turn-other { margin-top: 10px; max-width: 220px; }
.turn-other .input-row { align-items: center; }
.turn-other input { font-size: max(16px, 1rem); }

/* the store picture: the character offer restyled as a warm card, the yes tonal and never a second gold
   button (the card's own main button is the one strong action) */
.avatar-field { margin-top: 16px; }
#fAvatar .avp-prompt { margin-top: 0; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 30px -18px rgba(60,36,18,.35); }
#fAvatar .avp-prompt img { width: 64px; height: 64px; }
#fAvatar .avp-prompt .btn-gold, #fAvatar .avp-prompt [data-avp="use"] { background: var(--soft); color: var(--soft-tx); border: 1px solid var(--pri); box-shadow: none; }
#fAvatar .avp-prompt .btn { min-height: 44px; }
.av-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.9375rem; color: var(--ink-soft); }
.av-current .av-pic { flex: none; display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: contain; }
.av-current span { flex: 1 1 200px; line-height: 1.5; }
.av-current .link-btn { min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; }
.av-current.av-now { margin-top: 10px; }
.av-current.av-now .av-pic { width: 32px; height: 32px; }

/* ---- the two big choices: kind (screen 2) and who sees the number (screen 4). The literal chip
   button stays in each card (the tests pin it) and its ::after stretches over the whole card. ---- */
.jn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jn-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 96px; padding: 14px;
  border-radius: 18px; background: var(--card); border: 1px solid var(--jn-tile-edge); transition: border-color .15s, box-shadow .15s, background .15s; }
.jn-card .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--g); color: var(--tx2); margin-bottom: 4px; }
.jn-card .ic svg { width: 20px; height: 20px; }
.jn-card .key { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; font-family: var(--font-mono); font-size: 0.875rem; color: var(--tx2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; display: none; }
@media (min-width: 900px) and (hover: hover) {
  .jn-card .key { display: inline-block; }
}
.jn-card .chip { position: static; border: 0; background: none; padding: 0; min-height: 0; font-weight: 600; font-size: 1rem; color: var(--tx); text-align: start; box-shadow: none; }
.jn-card .chip::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
/* toolpath.css scales a pressed .chip; a transform makes the chip the containing block of its ::after,
   which then shrinks to the label and a tap on the rest of the card lands nowhere. The press is shown on
   the card instead. */
.jn-card .chip:active { transform: none; }
.jn-card:has(.chip:active) { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .jn-card:has(.chip:active) { transform: none; } }
.jn-card .chip:focus-visible { outline: none; }
.jn-card .line { font-size: 0.9375rem; color: var(--tx2); line-height: 1.45; }
.jn-card:has(.chip[aria-pressed="true"]) { border-color: var(--pri); border-width: 1.5px; background: linear-gradient(180deg, var(--card), var(--soft)); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.jn-card:has(.chip[aria-pressed="true"]) .ic { background: var(--card); color: var(--pri-sh); }
.jn-card:has(.chip[aria-pressed="true"]) .chip { color: var(--pri-sh); }
/* the keyboard's ring, after the pressed rule so a picked card still shows where focus is (WCAG 2.4.7);
   keyed on :focus-visible, so a tap never rings */
.jn-card:has(.chip:focus-visible), .jn-card:has(.chip[aria-pressed="true"]):has(.chip:focus-visible) {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--pri-sh); }
.field.invalid .jn-cards .jn-card { border-color: var(--err); }
/* the WhatsApp cards are the kind cards' twins: an icon, the choice, one line (Daniel, 2026-09-26:
   the drawn mini request bar read as broken, and the key hint sat on its WhatsApp tile) */
#waPublicSeg.seg { background: none; padding: 0; }
.jn-wa .ic.wa, .jn-card.jn-wa:has(.chip[aria-pressed="true"]) .ic.wa { background: var(--wa); color: var(--jn-wa-ink); }
.btn.is-quiet { opacity: .78; }

/* the kind line and its gift chip (--tx on butter 45% into --card: between the ribbon's 11.64 and
   the card's 15.69) */
.kind-row { margin-top: 0; }
.kind-tier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 0.9375rem; color: var(--ink-soft); }
.kind-tier .k-gift { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tx); background: color-mix(in srgb, var(--pop-butter) 45%, var(--card)); border-radius: 999px; padding: 2px 10px; }
.kind-tier .k-gift svg { width: 15px; height: 15px; flex: none; }
.kind-tier #kindBizLine { flex-basis: 100%; line-height: 1.55; }
.kind-tier #kindBizLine:empty { display: none; }

/* ---- ideas: name ideas, address ideas, city chips (offered, never pressed for the maker) ---- */
.jn-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9375rem; color: var(--tx2); }
.jn-ideas[hidden] { display: none; }
.chip.jn-idea { min-height: 44px; background: var(--card); border-color: var(--jn-tile-edge); }
.chip.jn-idea.ltr { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.jn-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jn-cities .chip { min-height: 44px; background: var(--card); border-color: var(--jn-tile-edge); }
.jn-cities .chip[aria-pressed="true"] { border-color: var(--pri); background: var(--soft); color: var(--pri-sh); }

/* ---- the address: one big LTR ticket that reads as a single URL ---- */
.addr { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; min-height: 60px;
  border: 1.5px solid var(--jn-edge); border-radius: 14px; background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.addr:focus-within { border-color: var(--pri); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.addr .pre { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.875rem; color: var(--steel-text); background: var(--g);
  border-bottom: 1px solid var(--line); padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr input { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-width: 0; min-height: 52px;
  font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: .01em; text-align: start; padding: 10px 12px; }
.addr input:focus { box-shadow: none; border: 0; }
.addr .state { display: grid; place-items: center; width: 44px; height: 44px; }
.addr .state .spinner { width: 17px; height: 17px; border-width: 2px; margin: 0; }
.addr .state svg { width: 18px; height: 18px; }
.addr .state.ok svg { color: var(--jn-ok-text); }
.addr .state.bad svg { color: var(--err); }
@media (min-width: 400px) {
  .addr { grid-template-columns: auto minmax(0, 1fr) 44px; }
  .addr .pre { grid-column: auto; align-self: stretch; display: flex; align-items: center; border-bottom: 0; border-inline-end: 1px solid var(--line); padding: 0 12px; }
}
@media (min-width: 900px) { .addr { max-inline-size: 560px; } }
.field.invalid .addr { border-color: var(--err); }
.addr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.addr-state { display: flex; align-items: center; gap: 7px; font-size: 0.9375rem; color: var(--steel-text); }
.addr-state.ok { color: var(--jn-ok-text); font-weight: 600; }
.addr-state svg { width: 16px; height: 16px; }
.addr-state .spinner { width: 14px; height: 14px; border-width: 2px; margin: 0; }
.addr-row .sep { color: var(--line); }
.link { background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer; font: inherit; font-weight: 600; color: var(--pri-sh);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.slug-sug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; font-size: 0.9375rem; color: var(--ink-soft); }
.slug-sug .chip { font-family: var(--font-mono); direction: ltr; min-height: 44px; }
.jn-more { display: inline-flex; align-items: center; min-height: 44px; }
#hint-slug[hidden] { display: none; }

/* ---- screen 3: the pin row and the city ---- */
.geo .row { gap: 12px; }
.geo .ok { color: var(--ok-deep); font-weight: 500; }
#fPin .jn-fold { margin-top: 4px; }

/* ---- screen 4: the switch row and the folded e-mail ---- */
#fWaSame .switch { min-height: 48px; font-size: 1rem; }
#fEmail .jn-fold-body[hidden] { display: none; }
#fEmail .jn-fold-body { margin-top: 12px; }

/* ---- screen 5: consents, each whole row a label ---- */
.consents { gap: 10px; margin-top: 6px; }
.consents .field { margin-bottom: 0; }
.consents .check { min-height: 56px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--tx); }
.consents .check input { width: 22px; height: 22px; }
.consents .check b { font-weight: 600; color: var(--tx); }
.consents .field.invalid .check { border-color: var(--err); }
.jn-last { margin: 0 0 14px; color: var(--tx2); font-size: 1rem; }
.jn-look { display: block; margin: -8px 0 12px; }
.jn-look[hidden] { display: none; }
.privacy { margin-top: 16px; line-height: 1.6; }
#submitNotice { margin-top: 14px; }
#submitNotice .notice { flex-wrap: wrap; }
#submitNotice .notice .grow { flex: 1 1 220px; }
#submitNotice .actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
#submitNotice .actions .btn svg { width: 16px; height: 16px; margin: 0; }

/* ---- the dock: fixed above the thumb on a phone, the card's own foot on a desktop ---- */
.step-nav { display: flex; gap: 10px; align-items: center; }
.step-nav #nextBtn { flex: 1; min-height: 56px; }
.step-nav #backBtn { flex: 0 0 96px; min-height: 56px; border-radius: 15px; }
.step-nav .kbd { display: none; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; opacity: .8; margin-inline-start: 10px; }
@media (max-width: 899px) {
  .step-nav { position: fixed; z-index: 40; inset-inline: 0; inset-block-end: 0; min-height: 76px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(var(--powder-rgb), .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 var(--line), 0 -18px 30px -18px rgba(60, 36, 18, .25); }
  body:not(.jn-docked) .step-nav { visibility: hidden; transform: translateY(110%); }
  body.jn-docked { padding-block-end: 96px; }
  .step-nav { transition: transform .2s, visibility .2s; }
}
@media (min-width: 900px) {
  .step-nav { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
  /* always sticky: whenever the card's foot is below the fold the main button rides at the screen's
     foot, and where the foot is in view sticky changes nothing (the card is no scroll container, #formCard) */
  .step-nav { position: sticky; bottom: 16px; z-index: 5; background: rgba(var(--paper-rgb), .96); border-radius: 0 0 22px 22px; padding-bottom: 8px; }
  .step-nav .kbd { display: inline-block; }
}
body.is-joined .step-nav, body.jn-building .step-nav { display: none; }
.field.invalid > .chips, .field.invalid > .check, .field.invalid .seg { outline: 2px solid var(--err); outline-offset: 5px; border-radius: 8px; }

/* ---- the buyer line: one quiet sentence, never a form ---- */
.buyer-line { margin: 14px 6px 0; font-size: 1rem; color: var(--tx2); line-height: 1.6; }
.buyer-line a { color: var(--pri-sh); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.is-joined .buyer-line { display: none; }

/* ---- the gear panel (row 03 of the finish): the old optional step, inline ---- */
.gear-plate { padding: 16px 0 0; }
.gear-plate .gear-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.gear-plate .gear-top b { font-size: 1.0625rem; }
.gear-plate .gear-nav { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.gear-plate .gear-nav .btn-gold { flex: 1 1 220px; }
.gear-plate .gear-nav .btn-ghost { flex: 1 1 140px; }
.price-field { max-width: 150px; }
.price-row { position: relative; }
.price-row .cur { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--steel-text); font-size: 1rem; pointer-events: none; }
.price-row input { text-align: end; padding-inline-start: 30px; padding-inline-end: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.swatch i { width: 28px; height: 28px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(var(--graphite-rgb),.12); transition: transform .15s var(--ease), box-shadow .15s; }
.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--graphite); transform: scale(.92); }
.swatch-name { display: block; font-size: 0.9375rem; color: var(--ink-soft); margin-top: 8px; }
.swatch-name b { color: var(--graphite); font-weight: 500; }
.rowwrap { flex-wrap: wrap; }
.mlist { display: grid; gap: 6px; margin-top: 10px; }
.mrow { display: flex; align-items: center; gap: 8px; background: var(--glass); border-radius: 11px; padding: 4px 6px; padding-inline-start: 12px; font-size: 0.9375rem; min-height: 44px; }
.mrow .bed { font-size: 0.875rem; color: var(--ink-soft); margin-inline-start: 6px; }
.mrow .btn-icon { width: 44px; min-height: 44px; }
.mrow .btn-icon svg { width: 16px; height: 16px; }

/* "חבילה במחיר קבוע": the package block. Open it and it lays down like a print: it rises, and one
   extruded line draws under its name. Ink on paper throughout: --graphite on --paper 15.69:1,
   --gold-deep on --paper 7.18:1, 6.28:1 on the add row's hover tint. */
.pk-block { margin-bottom: 18px; }
.pk-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 10px 16px; border-radius: 16px; border: 1.5px dashed var(--gold); background: var(--paper);
  font: inherit; font-size: 0.96875rem; font-weight: 500; color: var(--gold-deep); cursor: pointer; }
.pk-add:hover, .pk-add:focus-visible { background: var(--gold-soft); }
.pk-add svg { width: 20px; height: 20px; flex: none; }
.pk-fields { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.pk-fields.pk-in { animation: pk-rise .36s var(--ease) both; }
.pk-head { display: grid; justify-items: start; gap: 2px; margin-bottom: 10px; }
.pk-head .label { margin: 0; }
.pk-draw { display: block; width: 132px; height: 8px; overflow: visible; }
.pk-draw path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pk-fields.pk-in .pk-draw path { animation: pk-draw .7s var(--ease) .12s forwards; }
.pk-fields:not(.pk-in) .pk-draw path { stroke-dashoffset: 0; }
#app .pk-fields .pk-head + .hint { margin-bottom: 14px; }
.pk-close { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px; background: none; border: 0;
  cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; }
.inc-list { display: grid; gap: 8px; }
.pk-dur-other { display: flex; gap: 8px; align-items: center; margin-top: 8px; max-width: 220px; }
.pk-dur-other input { font-size: max(16px, 1rem); }
@keyframes pk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pk-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pk-fields.pk-in { animation: none; }
  .pk-fields.pk-in .pk-draw path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 400px) { .pk-fields { padding: 14px 12px; } }

/* ---- the finish ---- */
.success { scroll-margin-block-start: 14px; padding: 22px 18px 24px; border-radius: 28px; }
@media (min-width: 900px) { .success { padding: 30px 32px 30px; } }
.success .s-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: start; }
.success .s-head .jn-fin-art { display: grid; justify-items: center; gap: 6px; }
/* the headline takes focus at the finish (tabindex -1) so a screen reader starts there; like the step titles it draws no ring */
.success .s-head h2:focus { outline: none; }
.success .timeline-h { margin: 18px 0 22px; }
.success .timeline-h .st { font-size: 0.875rem; }
.success .stack > * { min-width: 0; }
.success .btn-lg { white-space: normal; text-align: center; line-height: 1.3; }
.success .jn-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.success .jn-acts .btn { flex: 1 1 220px; }
.success .linkblock { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 16px; background: var(--card); }
.success .tier-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.9375rem; color: var(--ink-soft); margin-top: 12px; }
.success .tier-line s { font-family: var(--font-mono); color: var(--gold-deep); }
.success .gate-notes p + p { margin-top: 6px; }
.success .jbiz-plate { margin-bottom: 18px; flex-wrap: wrap; }
.success .jbiz-plate .grow { flex: 1 1 220px; min-width: 0; }
.success .jbiz-plate .grow b { display: block; font-size: 1rem; margin-bottom: 3px; }
.success .jbiz-plate .jbiz-acts { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.success .jbiz-plate .jbiz-acts .btn { min-height: 44px; }
.jn-gift { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: var(--enc); color: var(--on-enc); }
/* the mark on the navy takes its cream plate (CLAUDE.md: a mark on a coloured ground), the same tile
   the pricing card's pro floor stands on, or its navy outlines vanish into the ground */
.jn-gift .tp-fac { flex: none; width: 108px; box-sizing: border-box; padding: 12px 12px 10px; border-radius: 22px; background: var(--mark-tile);
  box-shadow: 0 0 0 1px rgba(var(--powder-rgb), .18), 0 14px 28px -16px rgba(0, 0, 0, .7); }
.jn-gift b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; }
.jn-gift p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--on-enc-soft); }
.jn-gift .win { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.9375rem; color: var(--on-enc); }
.jn-gift .win::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--dark-1); box-shadow: 0 0 0 1.5px var(--pop-butter); }
.keybox { display: flex; align-items: center; gap: 8px; background: var(--glass); border-radius: 11px; padding: 4px; padding-inline-start: 12px; color: var(--graphite); min-height: 52px; }
.keybox:hover { text-decoration: none; }
.keybox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; font-size: 0.9375rem; direction: ltr; unicode-bidi: isolate; text-align: start; }
.keybox svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); }
.keybox .btn-icon { width: 44px; min-height: 44px; background: var(--paper); }
.keybox .btn-icon svg { width: 16px; height: 16px; color: var(--graphite); }
.jn-bound { display: flex; align-items: center; gap: 8px; color: var(--jn-ok-text); font-weight: 600; margin-bottom: 10px; }
.jn-bound svg { width: 18px; height: 18px; }
.linkblock details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }

/* "מה עכשיו": the pricing path again, with 01 already done */
.jn-path { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 900px) { .jn-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jn-path li.is-open { grid-column: 1 / -1; } }
.jn-path li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.jn-path li .tp-fac { width: 40px; grid-row: span 3; }
.jn-path .n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--tx2); }
.jn-path b { display: block; font-weight: 600; font-size: 1rem; }
.jn-path p { font-size: 0.9375rem; color: var(--tx2); line-height: 1.45; margin: 0; }
.jn-path .go { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 44px; }
.jn-path .done { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--jn-ok-text); font-weight: 600; font-size: 0.9375rem; margin-top: 4px; }
.jn-path .done svg { width: 16px; height: 16px; }
.jn-path li.is-done { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 8%, var(--card)), var(--card)); }
.jn-path .gear-host, .jn-path .invite { grid-column: 1 / -1; }

/* ---- footer ---- */
footer.site { padding: clamp(34px, 6vw, 60px) var(--wrap-x) calc(26px + var(--safe-b)); font-size: 0.9375rem; color: var(--on-enc-soft); text-align: start; }
footer.site .f-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer.site .f-brand { display: flex; align-items: center; gap: 12px; color: var(--on-enc); font-weight: 600; font-size: 1.0625rem; }
footer.site .f-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
footer.site .f-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
footer.site .privacy { max-width: 46em; margin-top: 22px; color: var(--on-enc-soft); font-size: 0.875rem; line-height: 1.6; }
footer.site .f-bottom { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--enc-line-soft); }
footer.site .m { margin: 0; color: var(--on-enc-soft); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .06em; }