/* חוגגים - "the atelier" design system (v0.3). One stylesheet for the site and the app. Mobile first, RTL, no inline styles.
   Brand signatures (use them, do not invent new ones): the ARCH (balloon-arch top on the hero card, service marks, photos)
   and the gold SPARK (logo, section dividers, bullets, loading). Colours: plum ink, sage, blush, champagne gold on porcelain.
   Type: Noto Serif Hebrew (display) + IBM Plex Sans Hebrew (everything else, money). */
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Heebo'; font-weight: 100 900; font-display: swap; src: url(fonts/heebo-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 100 900; font-display: swap; src: url(fonts/heebo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
	--deep: #1f0b3d; --plum: #2a1250; --plum-2: #3f1d78; --rose: #d81b6a; --rose-2: #b8135a; --violet: #7c3aed; --sage: #0b8a6c; --sage-soft: #d6f7ec;
	--tangerine: #ff6b2c; --sun: #ffc233; --sky: #1e88e5; --mint: #12b886; --grape: #3b1678;
	--blush: #ff9fbd; --blush-soft: #ffe7f1; --gold: #f0a30a; --gold-soft: #fff1cc; --gold-line: #f3c768; --violet-soft: #f0e7ff;
	--bg: #fdf9fc; --paper: #ffffff; --tint: #f4eef7; --ink: #2a1546; --ink-2: #5c4d72; --ink-3: #716585; --line: #ece4f0; --line-2: #dccfe4;
	--ok: #0d7a5f; --ok-soft: #daf4ec; --warn: #8f5b00; --warn-soft: #fff1cf; --bad: #b3264f; --bad-soft: #ffe4ec; --info: #5a2f99; --info-soft: #efe5fb;
	--glow-1: #ffd6e4; --glow-2: #e6d6ff; --glow-3: #fff0c6; --shadow: rgba(42, 21, 70, .28);
	--r-xs: 8px; --r-s: 12px; --r: 20px; --r-l: 28px;
	--focus: #a86a00; --rose-solid: #d81b6a; --cta-grad: linear-gradient(135deg, #d81b6a, #d42a5a 55%, #c43c1e);
	--ease-out: cubic-bezier(.32, .72, 0, 1); --ease-in: cubic-bezier(1, 0, .68, .28); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms;
	--text: 'Rubik', system-ui, 'Segoe UI', Arial, sans-serif; --serif: 'Fredoka', 'Rubik', system-ui, sans-serif;   /* --serif = the display face */
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
	color-scheme: light;
}
:root[data-theme=dark] {
	--deep: #0b0614; --plum: #f7f0fc; --plum-2: #ffffff; --rose: #ff4d8f; --rose-2: #ff6fa5; --violet: #a98bff; --sage: #3fe0b0; --sage-soft: #0f3329;
	--tangerine: #ff8a4c; --sun: #ffd25e; --sky: #5cb3ff; --mint: #3fe0b0; --grape: #1c0b3a;
	--blush: #ff9fbd; --blush-soft: #3a1529; --gold: #f3c34f; --gold-soft: #3a2b0e; --gold-line: #7d6123; --violet-soft: #2a1a47;
	--bg: #110a1d; --paper: #1b112c; --tint: #24173a; --ink: #f7f0fc; --ink-2: #cfc1de; --ink-3: #9d8fb3; --line: #2f2247; --line-2: #42305f;
	--ok: #5fe0b4; --ok-soft: #113328; --warn: #f6c76a; --warn-soft: #382b10; --bad: #ff8aa8; --bad-soft: #3d1524; --info: #c9a8ff; --info-soft: #2a1a47;
	--glow-1: #5b1238; --glow-2: #3a1d6e; --glow-3: #4a3410; --shadow: rgba(0, 0, 0, .55); --focus: #f3c34f; --rose-solid: #db1f6c; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
	--deep: #0b0614; --plum: #f7f0fc; --plum-2: #ffffff; --rose: #ff4d8f; --rose-2: #ff6fa5; --violet: #a98bff; --sage: #3fe0b0; --sage-soft: #0f3329;
	--tangerine: #ff8a4c; --sun: #ffd25e; --sky: #5cb3ff; --mint: #3fe0b0; --grape: #1c0b3a;
	--blush: #ff9fbd; --blush-soft: #3a1529; --gold: #f3c34f; --gold-soft: #3a2b0e; --gold-line: #7d6123; --violet-soft: #2a1a47;
	--bg: #110a1d; --paper: #1b112c; --tint: #24173a; --ink: #f7f0fc; --ink-2: #cfc1de; --ink-3: #9d8fb3; --line: #2f2247; --line-2: #42305f;
	--ok: #5fe0b4; --ok-soft: #113328; --warn: #f6c76a; --warn-soft: #382b10; --bad: #ff8aa8; --bad-soft: #3d1524; --info: #c9a8ff; --info-soft: #2a1a47;
	--glow-1: #5b1238; --glow-2: #3a1d6e; --glow-3: #4a3410; --shadow: rgba(0, 0, 0, .55); --focus: #f3c34f; --rose-solid: #db1f6c; color-scheme: dark;
	}
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.7 var(--text); -webkit-font-smoothing: antialiased; }
/* type scale (perfect fourth from 16): 16 / 21 / 28 / 38 / 50 */
h1, h2, h3 { margin: 0 0 .4em; color: var(--ink); text-wrap: balance; }
h1 { font: 600 clamp(2rem, 6vw, 3.1rem)/1.15 var(--serif); letter-spacing: -.01em; }
h2 { font: 600 clamp(1.5rem, 3.6vw, 1.85rem)/1.25 var(--serif); }
h3 { font: 600 1.06rem/1.4 var(--text); }
p { margin: 0 0 .85em; max-width: 66ch; text-wrap: pretty; }
a { color: var(--plum); text-decoration-color: var(--gold-line); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--blush); color: #24123d; }
.skip { position: absolute; inset-inline-start: -999px; } .skip:focus { inset-inline-start: 8px; top: 8px; z-index: 99; background: var(--paper); padding: 8px 12px; border-radius: var(--r-s); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); }
.muted { color: var(--ink-2); } .small { font-size: .875rem; } .pre { white-space: pre-line; }
.row { display: flex; align-items: center; gap: var(--s3); } .between { justify-content: space-between; } .wrapf { flex-wrap: wrap; }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols2 { display: grid; gap: var(--s6); } @media (min-width: 900px) { .cols2 { grid-template-columns: 1fr 330px; gap: var(--s7); } }
.hp { position: absolute; inset-inline-start: -5000px; }
.ico { width: 22px; height: 22px; flex: none; }
.btn, .item, .chip, .svc, .tile, .vcard, .side a, .iconbtn, input, select, textarea, .qcard { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease; }
/* reduced motion = no movement, but colour feedback stays (a gentle cross-fade, apple-design §14) - the full rule is in the v0.9 layer */

/* ---------- the spark and the divider ---------- */
.spark { width: 14px; height: 14px; color: var(--gold); flex: none; }
.divider { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: 0 auto var(--s4); max-width: 220px; color: var(--gold); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gold-line); }
.divider .spark { width: 13px; height: 13px; }
.head-c { text-align: center; margin-bottom: var(--s6); } .head-c h2 { margin-bottom: var(--s2); } .head-c p { margin: 0 auto; color: var(--ink-2); }

/* ---------- buttons, pills, banners ---------- */
.btn { appearance: none; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font: 600 .95rem/1 var(--text);
	padding: 0 1.35em; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
	gap: .5em; min-height: 46px; white-space: nowrap; }
.btn:hover { border-color: var(--rose); color: var(--ink); }
.btn.primary, .btn.accent { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn.primary:hover, .btn.accent:hover { background: var(--rose-2); border-color: var(--rose-2); color: #fff; }
.btn.danger { color: var(--bad); } .btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--plum); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 5px; }
.btn.small { min-height: 38px; padding: 0 1em; font-size: .875rem; }
.btn.big { min-height: 56px; font-size: 1.04rem; padding: 0 2em; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[aria-busy=true] { cursor: progress; }
.btn[aria-busy=true]::after { content: ''; width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(180deg); } }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; line-height: 1.7; padding: 0 .8em; border-radius: 999px; background: var(--tint);
	color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--info-soft); color: var(--info); }
.pill.new { background: var(--gold-soft); color: var(--warn); } .pill.sponsored { background: transparent; border: 1px solid var(--gold); color: var(--warn); }
.pill.basis-paid { background: var(--ok-soft); color: var(--ok); } .pill.basis-mutual { background: var(--info-soft); color: var(--info); } .pill.basis-unverified { background: var(--tint); }
.badge { display: inline-block; padding: .2em .8em; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.banner { border-radius: var(--r-s); padding: var(--s3) var(--s4); margin: var(--s3) 0; background: var(--info-soft); color: var(--ink); }
.banner.warn { background: var(--warn-soft); } .banner.bad { background: var(--bad-soft); } .banner.ok { background: var(--ok-soft); }
.envbar { background: var(--plum); color: var(--gold-soft); text-align: center; font-size: .8rem; padding: 4px 8px; }
.envbar.dev { background: var(--tint); color: var(--ink-2); }
.empty { text-align: start; color: var(--ink-2); padding: var(--s6) var(--s5); border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.empty::before { content: ''; display: block; width: 18px; height: 18px; margin: 0 0 var(--s3); background: var(--gold);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.empty p { margin-inline: 0; } .empty .btns { justify-content: flex-start; }
.hint { background: var(--gold-soft); border-radius: var(--r-s); padding: var(--s3) var(--s4); color: var(--ink); }

/* ---------- public site ---------- */
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.site-head .row { min-height: 70px; justify-content: space-between; }
.site-head nav { display: flex; gap: var(--s5); align-items: center; }
.site-head nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-head nav a:not(.btn):hover { color: var(--sage); }
@media (max-width: 760px) { .site-head nav a.hide-s { display: none; } .site-head nav { gap: var(--s3); } }
.brand { font: 600 1.6rem/1 var(--serif); color: var(--ink); text-decoration: none; display: inline-flex; align-items: flex-start; gap: 2px; }
.brand:hover { color: var(--ink); } .brand .spark { width: 12px; height: 12px; margin-top: -3px; }

.section { padding: var(--s8) 0 var(--s4); }
.services { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); max-width: 980px; margin: 0 auto; } .services .svc { flex: 0 1 150px; }
.svc { display: grid; justify-items: center; gap: var(--s2); padding: var(--s5) var(--s3) var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	color: var(--ink); text-decoration: none; font-weight: 500; text-align: center; font-size: .95rem; line-height: 1.35; }
.svc:hover { border-color: var(--gold-line); color: var(--ink); box-shadow: 0 14px 30px -24px rgba(43, 34, 56, .45); }
.svc .mark, .tile .mark { width: 50px; height: 58px; border-radius: 25px 25px var(--r-xs) var(--r-xs); display: grid; place-items: center; color: var(--plum); }
.svc:nth-child(3n+1) .mark, .tile:nth-child(3n+1) .mark { background: var(--blush-soft); } .svc:nth-child(3n+2) .mark, .tile:nth-child(3n+2) .mark { background: var(--sage-soft); }
.svc:nth-child(3n) .mark, .tile:nth-child(3n) .mark { background: var(--gold-soft); }
.svc .mark .ico, .tile .mark .ico { width: 24px; height: 24px; }
@media (max-width: 560px) { .services { gap: var(--s2); } .services .svc { flex-basis: calc((100% - 2 * var(--s2)) / 3); } .svc { padding: var(--s4) var(--s1) var(--s3); font-size: .84rem; border-radius: var(--r-s); }
	.svc .mark { width: 42px; height: 48px; border-radius: 21px 21px 7px 7px; } .svc .mark .ico { width: 21px; height: 21px; } .section { padding-top: var(--s7); } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); text-decoration: none; color: var(--ink); font-weight: 600;
	display: grid; justify-items: center; text-align: center; gap: var(--s2); }
.tile:hover { border-color: var(--gold-line); color: var(--ink); } .tile small { font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.steps { padding: 0; margin: 0 auto; list-style: none; counter-reset: s; display: grid; gap: var(--s6); max-width: 980px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: s; text-align: center; display: grid; justify-items: center; gap: var(--s2); }
.steps li::before { content: counter(s); font: 600 1.4rem/1 var(--serif); color: var(--plum); width: 56px; height: 64px; display: grid; place-items: center;
	border: 1px solid var(--gold-line); border-radius: 28px 28px var(--r-xs) var(--r-xs); background: var(--paper); }
.steps li b { font: 600 1.25rem/1.3 var(--serif); } .steps li span { color: var(--ink-2); max-width: 32ch; }
.trust { max-width: 760px; margin: 0 auto; text-align: center; } .trust p { margin-inline: auto; }
.checks { list-style: none; padding: 0; margin: var(--s5) auto 0; max-width: 520px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); text-align: start; }
.checks li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; } .checks .ico { color: var(--sage); margin-top: 3px; width: 20px; height: 20px; } .checks li.no .ico { color: var(--ink-3); }
.checks small { display: block; color: var(--ink-2); }
.filters { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; background: var(--paper);
	border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin: var(--s5) 0; }
.vcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding: var(--s3); }
.vcard:hover { border-color: var(--gold-line); box-shadow: 0 18px 36px -28px rgba(43, 34, 56, .5); }
.vcard a { color: inherit; text-decoration: none; display: block; } .vcard .body { padding: var(--s4) var(--s2) var(--s2); text-align: center; }
.vcard .body p { margin-inline: auto; }
.vcard h3 { font: 600 1.25rem/1.3 var(--serif); margin-bottom: 2px; }
.vcard img, .vcard .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tint); border-radius: 50% 50% var(--r-s) var(--r-s) / 34% 34% var(--r-s) var(--r-s); }
.vcard .ph { display: grid; place-items: center; color: var(--gold); background: linear-gradient(180deg, var(--blush-soft), var(--sage-soft)); } .vcard .ph .ico { width: 48px; height: 48px; }
.vcard .price { font-weight: 600; } .vcard .meta { color: var(--ink-2); font-size: .9rem; margin: 0 auto var(--s2); }
.rating { font-weight: 600; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .rating .spark { width: 12px; height: 12px; }
.page-head { padding: var(--s7) 0 var(--s6); text-align: center; background: radial-gradient(60% 90% at 50% 0%, var(--blush-soft), transparent 70%); }
.page-head p, .page-head .lead { margin-inline: auto; } .page-head .btns { justify-content: center; }
.facts { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); color: var(--ink-2); }
.facts li { display: inline-flex; gap: 6px; align-items: center; } .facts .ico { width: 18px; height: 18px; color: var(--sage); }
.vendor-head .cta { margin-top: var(--s5); display: grid; justify-items: center; gap: var(--s2); } .vendor-head .cta p { margin: 0; }
aside .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s4); }
aside .panel h2 { font: 600 1.2rem/1.3 var(--serif); }
.badges { list-style: none; padding: 0; margin: 0 0 var(--s2); } .badges li { display: flex; gap: var(--s2); align-items: flex-start; margin: 8px 0; }
.badges .ico { color: var(--sage); width: 20px; height: 20px; margin-top: 3px; }
.gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .gallery figure { margin: 0; }
.gallery img { border-radius: 50% 50% var(--r-s) var(--r-s) / 30% 30% var(--r-s) var(--r-s); aspect-ratio: 3 / 4; object-fit: cover; }
.gallery .pic { position: relative; } .gallery figcaption { margin-top: 6px; font-size: .86rem; color: var(--ink-2); display: flex; gap: var(--s2); align-items: center; justify-content: space-between; }
.pic-tag { position: absolute; top: 12%; inset-inline-start: 10px; background: var(--plum); color: var(--gold-soft); font: 700 .72rem/1 var(--text); letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--gold-line); }
.gallery .pic.ai figcaption { color: var(--ink-3); font-style: italic; }
.pic-counts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.ai-box { margin-top: var(--s5); padding: var(--s5); border-radius: var(--r); background: linear-gradient(135deg, var(--violet-soft), var(--blush-soft)); border: 1px solid var(--gold-line); display: grid; gap: var(--s3); }
.ai-box h3 { margin: 0; display: flex; gap: var(--s2); align-items: center; font: 600 1.15rem/1.3 var(--serif); } .ai-box h3 .ico { color: var(--gold); }
.ai-box label { display: grid; gap: 6px; font-weight: 600; } .ai-box p { margin: 0; }
.svc-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s4); }
.packages { padding: 0; margin: 0; list-style: none; } .packages li { border-top: 1px solid var(--line); padding: var(--s4) 0; display: grid; gap: 4px; }
.packages .pkg-head { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 600; } .packages .pkg-head span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.review { border-top: 1px solid var(--line); padding: var(--s4) 0; } .review .reply { background: var(--tint); border-radius: var(--r-s); padding: var(--s3) var(--s4); }
.stars { color: var(--gold); letter-spacing: 2px; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; }
.site-foot { margin-top: var(--s8); background: var(--deep); color: #d9d1e3; padding: var(--s7) 0 104px; text-align: center; }
.site-foot .brand { color: #fff; font-size: 2rem; justify-content: center; } .site-foot .brand .spark { color: var(--gold); }
.site-foot .tag { color: #c7bdd4; margin: var(--s2) auto var(--s5); }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin: var(--s2) 0; }
.site-foot a { color: #efe9f5; text-decoration: none; font-size: .95rem; } .site-foot a:hover { color: var(--gold-soft); }
.site-foot .divider { margin: var(--s5) auto; max-width: 160px; color: var(--gold); } .site-foot .divider::before, .site-foot .divider::after { background: var(--gold-line); }

.text { max-width: 760px; padding-top: var(--s7); } .text h1 { text-align: center; }
details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3) var(--s5); margin: var(--s2) 0; }
summary { font-weight: 600; cursor: pointer; } summary::marker { color: var(--gold); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--paper); } .table th, .table td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--ink-2); font-weight: 600; background: var(--tint); } .table tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--blush-soft); }
.paytest .card.narrow { max-width: 440px; margin: 40px auto; text-align: center; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s4); } label { display: grid; gap: 6px; font-weight: 500; font-size: .93rem; color: var(--ink); }
input, select, textarea { font: 400 1rem var(--text); color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-s);
	padding: .65em .9em; min-height: 48px; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px var(--gold-soft); }
textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--rose); box-shadow: none; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3) var(--s4) var(--s4); margin: 0; display: grid; gap: var(--s2); } legend { font-weight: 600; padding: 0 6px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 400; } .check input { margin-top: 3px; flex: none; }
.field-help { font-weight: 400; color: var(--ink-2); font-size: .85rem; }
.field-err { color: var(--bad); font-weight: 500; font-size: .86rem; } [aria-invalid=true] { border-color: var(--bad) !important; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.chip { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 0 1.05em; cursor: pointer; font: 500 .93rem var(--text); color: var(--ink);
	min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.chip .ico { width: 18px; height: 18px; color: var(--sage); } .chip:hover { border-color: var(--plum); }
.chip[aria-pressed=true] { background: var(--rose); color: #fff; border-color: var(--rose); } .chip[aria-pressed=true] .ico { color: var(--gold-soft); }
.two { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; } .three { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .three { grid-template-columns: 1fr 1fr; } }

/* ---------- app shell ---------- */
.app-head { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.app-head .row { min-height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; }
.app-head .brand { font-size: 1.45rem; justify-self: center; grid-column: 2; grid-row: 1; }
.app-head .start { justify-self: start; display: flex; gap: var(--s2); grid-column: 1; grid-row: 1; }
.app-head .end { justify-self: end; display: flex; gap: var(--s1); align-items: center; grid-column: 3; grid-row: 1; }
.hatbtn { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 0 .95em; font: 500 .85rem var(--text); color: var(--ink); cursor: pointer;
	min-height: 38px; display: inline-flex; align-items: center; gap: 7px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hatbtn .dotc { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; } .hatbtn.vendor .dotc { background: var(--rose); } .hatbtn.staff .dotc { background: var(--ink); }
.iconbtn { position: relative; border: 0; background: transparent; color: var(--ink); min-width: 44px; min-height: 44px; border-radius: 999px; cursor: pointer;
	display: inline-grid; place-items: center; text-decoration: none; }
.iconbtn:hover { background: var(--tint); color: var(--ink); }
.dot { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--rose); color: #fff;
	font-size: .68rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.layout { display: grid; } @media (min-width: 960px) { .layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s7); max-width: 1220px; margin: 0 auto; padding: 0 var(--s4); } }
.side { display: none; } @media (min-width: 960px) { .side { display: block; padding: var(--s6) 0; position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px); overflow-y: auto; } }
.side a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.side a .ico { width: 20px; height: 20px; color: var(--ink-3); }
.side a:hover { background: var(--tint); } .side a[aria-current=page] { background: var(--paper); color: var(--plum); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold-line); }
.side a[aria-current=page] .ico { color: var(--gold); }
.side h4 { margin: var(--s5) 14px 6px; font: 500 .8rem var(--text); color: var(--ink-3); }
#view { padding: var(--s5) var(--s4) 110px; min-width: 0; max-width: 880px; width: 100%; margin: 0 auto; } @media (min-width: 960px) { #view { padding: var(--s6) 0 var(--s8); margin: 0; } }
.tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--paper);
	border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; font-size: .7rem; color: var(--ink-2); text-decoration: none; font-weight: 500; min-height: 54px; border-radius: var(--r-s); }
.tabbar a .ico { width: 22px; height: 22px; }
.tabbar a[aria-current=page] { color: var(--plum); background: var(--blush-soft); font-weight: 600; }
@media (min-width: 960px) { .tabbar { display: none; } }
.head-row { display: grid; justify-items: center; text-align: center; gap: var(--s2); margin: 0 0 var(--s5); }
.head-row h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.3rem); } .head-row .btn { margin-top: var(--s1); }
.back { display: flex; width: fit-content; gap: 4px; align-items: center; font-size: .9rem; margin-bottom: var(--s3); text-decoration: none; color: var(--ink-2); }
.back .ico { width: 18px; height: 18px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin: 0 0 var(--s4); }
@media (max-width: 600px) { .card { padding: var(--s4) var(--s4) var(--s5); } }
.card.flat { background: var(--tint); border-color: transparent; } .card h2 { font: 600 1.3rem/1.3 var(--serif); margin-bottom: var(--s3); }
.list { display: grid; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.item { padding: var(--s4) var(--s5); display: block; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); background: var(--paper); }
.item:last-child { border-bottom: 0; } button.item { width: 100%; text-align: start; border-radius: 0; border-width: 0 0 1px; min-height: 56px; justify-content: flex-start; }
a.item:hover, button.item:hover { background: var(--blush-soft); color: inherit; } .item .t { font-weight: 600; } .item .s { color: var(--ink-2); font-size: .9rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--s5); margin: 0; } .kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 500; }
.money { font: 600 1.3rem/1.2 var(--text); font-variant-numeric: tabular-nums; } .money.big { font: 600 1.75rem/1.1 var(--text); letter-spacing: -.01em; }
.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .lines td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lines td:last-child { text-align: end; white-space: nowrap; } .lines tr.total td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--gold); padding-top: 10px; }
.stepper { display: flex; gap: 6px; margin: 0 auto var(--s3); max-width: 320px; } .stepper span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.stepper span.on { background: var(--gold); }
.progress { list-style: none; padding: 0; margin: var(--s3) auto var(--s4); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.progress li { font-size: .8rem; padding: 4px 12px; border-radius: 999px; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); }
.progress li.done { color: var(--ok); background: var(--ok-soft); border-color: transparent; } .progress li.now { background: var(--rose); color: #fff; font-weight: 600; border-color: var(--rose); }
.qcard { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.qcard.fav { border-color: var(--gold); } .qhead { display: grid; justify-items: center; text-align: center; gap: var(--s1); }
.qhead h3 { font: 600 1.35rem/1.3 var(--serif); margin: 0; } .qhead h3 a { color: var(--ink); text-decoration: none; }
.qcard .total { text-align: center; padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .qcard .total .muted { font-size: .8rem; }
.qcard > .pill, .qcard > span.muted { justify-self: center; }
.compare { display: grid; gap: var(--s4); } @media (min-width: 760px) { .compare { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.assist { background: var(--deep); color: #e9e2f2; border-radius: var(--r); padding: var(--s5); margin: 0 0 var(--s4); text-align: center; }
.assist b { color: #fff; font: 600 1.35rem var(--serif); display: block; margin-bottom: 4px; } .assist p, .assist .muted { color: #cfc5dc; margin-inline: auto; }
.assist textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; text-align: start; } .assist textarea::placeholder { color: #a99fb8; }
.assist .btns { justify-content: center; } .assist .btn.primary { background: var(--gold); border-color: var(--gold); color: #24123d !important; }
.assist .kv { text-align: start; max-width: 420px; margin: var(--s3) auto; } .assist .kv dt { color: #a99fb8; } .assist .kv dd { color: #fff; }
.assist .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.assist.sugs { background: var(--paper); color: var(--ink); border: 1px solid var(--gold-line); } .assist.sugs b { color: var(--ink); } .assist.sugs p, .assist.sugs .muted { color: var(--ink-2); }
.assist.sugs .btn:not(.primary) { color: var(--ink); border-color: var(--line-2); } .assist.sugs .btn.primary { background: var(--rose); border-color: var(--rose); color: #fff !important; }
.assist .sug { background: var(--bg); border-radius: var(--r-s); padding: var(--s4); margin: var(--s2) 0; color: var(--ink); text-align: start; } .assist .sug .t { font-weight: 600; }
.assist .sug .btns { justify-content: flex-start; margin-bottom: 0; }
.chat { display: flex; flex-direction: column; height: calc(100dvh - 210px); min-height: 380px; padding: 0; overflow: hidden; }
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: var(--s4); background: var(--bg); }
.msg { max-width: 80%; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: var(--paper); border: 1px solid var(--line); align-self: flex-start; white-space: pre-wrap; word-break: break-word; }
.msg.mine { align-self: flex-end; background: var(--violet); color: #fff; border-color: var(--violet); border-radius: 18px 18px 6px 18px; }
.msg.mine time { color: #cfc5dc; } .msg time { display: block; font-size: .72rem; color: var(--ink-3); } .msg.mine .btn.ghost { color: #fff; }
.msg.sys { align-self: center; background: transparent; border: 1px solid var(--gold-line); font-size: .83rem; color: var(--ink-2); max-width: 92%; text-align: center; border-radius: 999px; padding: 4px 16px; }
.composer { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--line); background: var(--paper); align-items: flex-end; }
.composer textarea { min-height: 48px; height: 48px; border-radius: 24px; }
.toast { position: fixed; bottom: 84px; inset-inline: 16px; margin: 0 auto; max-width: 460px; background: var(--deep); color: #fff; padding: 13px 20px; text-align: center;
	border-radius: 999px; z-index: 60; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; font-weight: 500; }
.toast.show { opacity: 1; transform: none; } .toast.bad { background: var(--bad); color: #fff !important; }
.sheet-bg { position: fixed; inset: 0; background: rgba(27, 21, 36, .48); z-index: 70; display: grid; align-items: end; }
@media (min-width: 700px) { .sheet-bg { align-items: center; justify-items: center; } }
.sheet { background: var(--paper); border-radius: var(--r-l) var(--r-l) 0 0; padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); max-height: 92dvh; overflow-y: auto;
	width: 100%; box-shadow: 0 -18px 50px rgba(27, 21, 36, .22); }
.sheet > .row:first-child { display: grid; grid-template-columns: 44px 1fr 44px; margin-bottom: var(--s3); }
.sheet > .row:first-child h2 { grid-column: 2; grid-row: 1; text-align: center; margin: 0; } .sheet > .row:first-child .iconbtn { grid-column: 3; grid-row: 1; }
.sheet h2 { font: 600 1.5rem var(--serif); }
@media (min-width: 700px) { .sheet { border-radius: var(--r-l); max-width: 560px; } }
.skeleton { background: linear-gradient(90deg, var(--paper), var(--tint), var(--paper)); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r); height: 76px; margin: 12px 0; }
@keyframes sk { to { background-position: -200% 0; } }
.offline { background: var(--warn-soft); color: var(--warn); text-align: center; font-size: .88rem; padding: 6px; }
.status { min-height: 1.4em; }
.login { max-width: 460px; margin: var(--s6) auto; padding: 0; overflow: hidden; border-radius: 50% 50% var(--r-l) var(--r-l) / 110px 110px var(--r-l) var(--r-l); }
.login .crest { display: grid; place-items: center; padding: 56px 0 0; color: var(--gold); } .login .crest .spark { width: 22px; height: 22px; }
.login form { padding: var(--s4) var(--s6) var(--s6); text-align: center; } .login form label, .login form .check { text-align: start; }
.cal-day { border-top: 1px solid var(--line); padding: 12px 0; } .cal-day:first-child { border-top: 0; } .cal-day b { display: block; }
.hours { display: grid; gap: 8px var(--s3); grid-template-columns: 70px 1fr 1fr; align-items: center; }
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s6); }
.stat { background: var(--paper); box-shadow: 0 0 0 .5px var(--line); padding: var(--s5) var(--s4); display: grid; gap: 4px; align-content: start; text-align: center; }
.stat-v { font: 600 1.9rem/1.1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); } .stat-k { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
bdi.ltr { direction: ltr; unicode-bidi: isolate; }
#view > h2 { font: 600 1.4rem var(--serif); margin-top: var(--s6); text-align: center; }
.wiz-head { text-align: center; margin-bottom: var(--s4); } .wiz-head h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); margin: var(--s1) 0 0; } .wiz-head p { margin: 0 auto; }
.assist.light { background: var(--paper); color: var(--ink); border: 1px solid var(--gold-line); } .assist.light b { color: var(--ink); font-size: 1.2rem; }
.assist.light p, .assist.light .muted { color: var(--ink-2); } .assist.light textarea { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
.assist.light textarea::placeholder { color: var(--ink-3); } .assist.light .btn.primary { background: var(--rose); border-color: var(--rose); color: #fff !important; }
.assist.light .kv dt { color: var(--ink-2); } .assist.light .kv dd { color: var(--ink); } .assist.light .btn:not(.primary) { color: var(--ink); border-color: var(--line-2); }
.assist.light > .spark { display: block; margin: 0 auto var(--s2); }
.sortbar { justify-content: center; } .sortbar select { width: auto; min-width: 180px; border-radius: 999px; padding-inline: 1.1em; min-height: 40px; }

/* ---------- v0.4: logo, header, side drawer, theme switch, the hero moment, AI art ---------- */
.mk .b1 { fill: var(--rose); } .mk .b2 { fill: var(--gold); } .mk .b3 { fill: var(--violet); } .mk .hl { fill: #fff; opacity: .5; } .mk .sp { fill: var(--gold); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); } .logo .lm { width: 34px; height: 37px; flex: none; }
.logo .lw { font: 600 1.55rem/1 var(--serif); letter-spacing: -.01em; }
.logo.sm .lm { width: 28px; height: 30px; } .logo.sm .lw { font-size: 1.3rem; }
.site-head .bar { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.site-head .links { display: flex; gap: var(--s5); align-items: center; }
.site-head .links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 2px; border-bottom: 2px solid transparent; }
.site-head .links a:hover { border-bottom-color: var(--gold); }
.site-head .acts { margin-inline-start: auto; display: flex; gap: var(--s2); align-items: center; }
.site-head .acts .login { color: var(--ink); text-decoration: none; font-weight: 500; padding: 0 var(--s2); }
.menubtn, .themebtn { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); width: 44px; height: 44px; border-radius: 999px; display: inline-grid;
	place-items: center; cursor: pointer; padding: 0; }
.menubtn:hover, .themebtn:hover { border-color: var(--rose); } .menubtn .ico, .themebtn .ico { width: 20px; height: 20px; }
.themebtn .moon { display: none; } :root[data-theme=dark] .themebtn .sun { display: none; } :root[data-theme=dark] .themebtn .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .themebtn .sun { display: none; } :root:not([data-theme=light]) .themebtn .moon { display: block; } }
@media (max-width: 860px) { .site-head .links, .site-head .acts .login, .site-head .acts .hide-s { display: none; } .site-head .bar { gap: var(--s3); } }
.site-head { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
/* the side drawer - opens from the right (RTL start) */
.drawer-bg { position: fixed; inset: 0; background: rgba(17, 10, 29, .5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(88vw, 360px); background: var(--paper); z-index: 81; transform: translateX(100%);
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; visibility: hidden; display: flex; flex-direction: column; box-shadow: -20px 0 60px var(--shadow); overflow-y: auto; border-radius: 0 0 0 var(--r-l); }
[dir=rtl] .drawer { transform: translateX(100%); }
.drawer-open .drawer { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; } .drawer-open .drawer-bg { opacity: 1; pointer-events: auto; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.drawer nav { padding: var(--s3) var(--s3) var(--s5); display: grid; gap: 2px; }
.drawer nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; }
.drawer nav a:hover, .drawer nav a[aria-current=page] { background: var(--blush-soft); }
.drawer nav a .ico { width: 20px; height: 20px; color: var(--rose); }
.drawer h4, .drawer .dsec { margin: var(--s4) 14px var(--s1); font: 500 .8rem var(--text); color: var(--ink-3); }
.drawer .dcta { padding: 0 var(--s5) var(--s5); display: grid; gap: var(--s2); }
/* AI art (when a picture exists for a category it replaces the arch icon) */
.svc .art, .tile .art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% var(--r-s) var(--r-s) / 32% 32% var(--r-s) var(--r-s); margin-bottom: var(--s1); }
.svc.has-art { padding: var(--s2) var(--s2) var(--s4); }
.site-foot .logo { color: #fff; justify-content: center; } .site-foot .logo .lw { font-size: 2rem; } .site-foot .logo .lm { width: 44px; height: 48px; }
.site-foot .mk .b3 { fill: #b78bf5; }
.drawer-open { overflow: hidden; }

.cat-art { width: 170px; height: 196px; object-fit: cover; margin: 0 auto var(--s4); display: block; border-radius: 85px 85px var(--r) var(--r);
	box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--gold-line); }
.tile .art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 50% 50% var(--r-s) var(--r-s) / 30% 30% var(--r-s) var(--r-s); }
.tile:has(.art) { padding: var(--s3) var(--s3) var(--s5); }

/* ================= v0.6 home: every section on its own stage, each with a frame of its own =================
   hero: photo in a gradient frame + an invitation "ticket" over its bottom edge; services: cards framed in the
   category's colour; how: deep grape stage; trust: mint stage; join: raspberry-to-tangerine stage. */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .82rem/1 var(--text); letter-spacing: .02em; padding: 8px 14px; border-radius: 999px;
	background: var(--blush-soft); color: var(--rose-2); }
.eyebrow .spark { width: 12px; height: 12px; }
.stage { padding: var(--s7) 0 0; }
.stage-box { position: relative; border-radius: 36px; padding: clamp(28px, 5vw, 64px); isolation: isolate; overflow: hidden; }
.stage-head { text-align: center; max-width: 640px; margin: 0 auto var(--s6); display: grid; justify-items: center; gap: var(--s3); }
.stage-head h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.stage-head p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

/* hero */
.stage-hero { padding: var(--s5) 0 0; }
.hero-frame { padding: 6px; border-radius: 40px; background: linear-gradient(125deg, var(--rose) 0%, var(--tangerine) 30%, var(--sun) 50%, var(--mint) 72%, var(--violet) 100%);
	box-shadow: 0 40px 80px -40px rgba(216, 27, 106, .55); }
.hero-in { position: relative; border-radius: 34px; overflow: hidden; min-height: 600px; display: flex; align-items: flex-start; isolation: isolate; background: var(--grape); }
.hero-in .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; z-index: -2; }
.hero-in::before { content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(270deg, rgba(31, 11, 61, .92) 0%, rgba(31, 11, 61, .72) 34%, rgba(31, 11, 61, .1) 64%, rgba(31, 11, 61, 0) 100%),
		linear-gradient(0deg, rgba(31, 11, 61, .55) 0%, transparent 35%); }
.hero-copy { padding: 72px 64px 170px; max-width: 600px; color: #fff; display: grid; gap: var(--s4); justify-items: start; }
.hero-copy .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .25); }
.hero-copy .eyebrow .spark { color: #ffd25e; }
.hero-copy h1 { color: #fff; font: 700 clamp(2.6rem, 7vw, 4.6rem)/1.02 var(--serif); margin: 0; letter-spacing: -.015em; }
.hero-copy h1 em { font-style: normal; display: inline-block; background: linear-gradient(90deg, #ffd25e, #ff8a4c 55%, #ff5c9a); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero-copy .lead { color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.6; margin: 0; max-width: 34ch; }
.assurances { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: var(--s2) 0 0; }
.assurances li { display: inline-flex; gap: 7px; align-items: center; font-size: .9rem; font-weight: 500; padding: 7px 13px 7px 15px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.assurances .ico { width: 17px; height: 17px; color: #ffd25e; }

.btn.primary.big { box-shadow: 0 12px 24px -12px rgba(216, 27, 106, .8); }
@media (max-width: 860px) {
	.hero-in { min-height: 0; display: block; }
	.hero-in .hero-bg { position: relative; height: 300px; object-position: 40% 45%; }
	.hero-in::before { background: linear-gradient(180deg, rgba(31, 11, 61, 0) 0, rgba(31, 11, 61, .2) 150px, var(--grape) 300px); }
	.hero-copy { padding: 0 24px 150px; margin-top: -70px; max-width: none; }
	.ticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
	.t-fields { padding: 22px 20px 6px; } .t-go { border-inline-start: 0; border-top: 2px dashed var(--line-2); padding: 18px 20px 22px; margin-top: 12px; }
	.t-go .btn { width: 100%; } .t-go .note { max-width: none; }
	.t-line { line-height: 2.5; }
}
@media (max-width: 600px) { .hero-frame { padding: 4px; border-radius: 30px; } .hero-in { border-radius: 26px; } .ticket-wrap { padding: 0 10px; margin-top: -120px; } .ticket { border-radius: 22px; } }

/* services stage: warm confetti backdrop, a card per category framed in its own colour */
.s-services .stage-box { background: radial-gradient(circle at 12% 18%, rgba(255, 194, 51, .22) 0 6px, transparent 7px) 0 0 / 64px 64px,
	radial-gradient(circle at 70% 60%, rgba(216, 27, 106, .14) 0 5px, transparent 6px) 0 0 / 88px 88px, linear-gradient(160deg, #fff3f8, #fff8ec 55%, #f4efff); }
.cats { --g: 18px; --n: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.cats > .cat { flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); }
@media (max-width: 1060px) { .cats { --n: 5; } } @media (max-width: 860px) { .cats { --n: 4; } } @media (max-width: 680px) { .cats { --n: 3; } }
.cat { --c: var(--rose); --cs: var(--blush-soft); display: grid; gap: 12px; padding: 10px 10px 16px; background: var(--paper); border-radius: 26px; text-decoration: none; color: var(--ink);
	text-align: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 14px 28px -22px color-mix(in srgb, var(--c) 70%, transparent);
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.cat.c1 { --c: var(--violet); --cs: var(--violet-soft); } .cat.c2 { --c: var(--tangerine); --cs: #ffeadf; } .cat.c3 { --c: var(--mint); --cs: var(--sage-soft); }
.cat.c4 { --c: var(--sky); --cs: #e2f0ff; } .cat.c5 { --c: var(--sun); --cs: var(--gold-soft); }
.cat-pic { display: grid; place-items: center; aspect-ratio: 1 / 1.08; border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px; overflow: hidden; background: var(--cs); color: var(--c);
	box-shadow: inset 0 0 0 3px var(--c); }
.cat-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; padding: 5px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.cat-pic .ico { width: 46px; height: 46px; }
.cat-name { font: 600 1.05rem/1.25 var(--serif); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cat-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.cat:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--c), 0 22px 36px -22px color-mix(in srgb, var(--c) 80%, transparent); color: var(--ink); }
.cat:hover .cat-pic img { transform: scale(1.05); }
.cat:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 26px; }
@media (max-width: 600px) { .cats { --n: 2; --g: 12px; } .cat { border-radius: 22px; padding: 8px 8px 12px; } .cat-name { font-size: .98rem; } }

/* how it works: the deep grape stage */
.s-how .stage-box { background: radial-gradient(60% 80% at 90% 0%, rgba(124, 58, 237, .55), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(216, 27, 106, .45), transparent 70%), var(--grape); color: #fff; }
.s-how .stage-head h2 { color: #fff; } .s-how .eyebrow { background: rgba(255, 255, 255, .12); color: #ffd25e; }
.s-how .steps { padding: 0; margin: 0 auto; list-style: none; counter-reset: s; display: grid; gap: 18px; max-width: none; }
@media (min-width: 800px) { .s-how .steps { grid-template-columns: repeat(3, 1fr); } }
.s-how .steps li { --c: #ff5c9a; counter-increment: s; text-align: start; display: grid; gap: 8px; justify-items: start; align-content: start; padding: 28px; border-radius: 28px;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.s-how .steps li:nth-child(2) { --c: #ffd25e; } .s-how .steps li:nth-child(3) { --c: #3fe0b0; }
.s-how .steps li::before { content: counter(s); font: 700 1.6rem/1 var(--serif); color: #1f0b3d; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px;
	background: var(--c); margin-bottom: 8px; border: 0; }
.s-how .steps li b { font: 600 1.35rem/1.25 var(--serif); color: #fff; } .s-how .steps li span { color: rgba(255, 255, 255, .78); max-width: 34ch; }
.how-go { text-align: center; margin: var(--s6) auto 0; max-width: none; }
.btn.sun { background: #ffd25e; border-color: #ffd25e; color: #1f0b3d; } .btn.sun:hover { background: #ffc233; border-color: #ffc233; color: #1f0b3d; }

/* trust: the mint stage, copy beside the checks */
.s-trust .stage-box { background: linear-gradient(150deg, #e3fbf2, #eef9ff 60%, #f4f0ff); display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .s-trust .stage-box { grid-template-columns: 1fr 1.05fr; } .s-trust .stage-head { text-align: start; justify-items: start; margin: 0; } }
.s-trust .eyebrow { background: #c9f3e3; color: #07684f; }
.s-trust .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: none; border: 0; max-width: none; }
.s-trust .checks li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--paper); border-radius: 22px; border: 0; box-shadow: 0 14px 30px -26px rgba(7, 104, 79, .6); }
.s-trust .checks li .ico { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--sage-soft); color: var(--sage); margin: 0; }
.s-trust .checks li.no { background: transparent; box-shadow: inset 0 0 0 2px var(--line-2); } .s-trust .checks li.no .ico { background: var(--tint); color: var(--ink-3); }
.s-trust .checks span { font-weight: 600; line-height: 1.4; } .s-trust .checks small { display: block; font-weight: 400; color: var(--ink-2); margin-top: 3px; }

/* join: raspberry to tangerine */
.s-join { padding-bottom: var(--s8); }
.s-join .stage-box { background: linear-gradient(120deg, var(--rose) 0%, #f0436b 45%, var(--tangerine) 100%); color: #fff; display: grid; gap: var(--s5); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 860px) { .s-join .stage-box { grid-template-columns: auto 1fr auto; text-align: start; justify-items: start; } }
.s-join h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: 0 0 6px; } .s-join p { margin: 0; color: rgba(255, 255, 255, .92); max-width: 52ch; }
.join-mark { width: 84px; height: 92px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2)); }
.s-join .mk .b1, .s-join .mk .b2, .s-join .mk .b3 { fill: #fff; } .s-join .mk .sp { fill: #ffd25e; }
.btn.light { background: #fff; border-color: #fff; color: #b8135a; } .btn.light:hover { background: #fff4f8; border-color: #fff4f8; color: #b8135a; }

/* dark mode: same stages, night colours */
:root[data-theme=dark] .cat.c2 { --cs: #3a1c10; } :root[data-theme=dark] .cat.c4 { --cs: #0f2742; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) .cat.c2 { --cs: #3a1c10; } :root:not([data-theme=light]) .cat.c4 { --cs: #0f2742; }
}

/* one-time entrance: the photo settles, the copy and the ticket rise */
@media (prefers-reduced-motion: no-preference) {
	.hero-in .hero-bg { animation: settle 1.4s cubic-bezier(.2, .8, .2, 1) both; }
	.hero-copy > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; } .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; }
}
@keyframes settle { from { transform: scale(1.06); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.page-head + .section { padding-top: var(--s3); }

/* ================= v0.6 inner site pages: the same stages =================
   page_stage(): a stage in the page's own tone; the picture (category art / vendor photo) in an arched frame. */
.t-rose { --t: var(--rose); --t2: var(--sun); } .t-violet { --t: var(--violet); --t2: var(--rose); } .t-tangerine { --t: var(--tangerine); --t2: var(--sun); }
.t-mint { --t: var(--mint); --t2: var(--sky); } .t-sky { --t: var(--sky); --t2: var(--violet); } .t-sun { --t: var(--sun); --t2: var(--tangerine); } .t-grape { --t: var(--violet); --t2: var(--rose); }
.page-stage { padding-top: var(--s5); }
.ps-box { text-align: center; display: grid; gap: var(--s6); justify-items: center; align-items: center;
	background: radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--t2) 30%, transparent) 0 5px, transparent 6px) 0 0 / 70px 70px,
		radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--t) 26%, transparent), transparent 70%),
		linear-gradient(160deg, color-mix(in srgb, var(--t) 12%, var(--paper)), color-mix(in srgb, var(--t2) 12%, var(--paper))); }
.ps-box::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t) 22%, transparent); }
.ps-copy { display: grid; justify-items: center; gap: var(--s3); max-width: 720px; width: 100%; }
.ps-copy h1 { font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--serif); margin: 0; letter-spacing: -.015em; }
.ps-copy .lead { margin: 0; color: var(--ink-2); font-size: 1.1rem; }
.ps-copy .eyebrow { background: color-mix(in srgb, var(--t) 16%, var(--paper)); color: color-mix(in srgb, var(--t) 70%, var(--ink)); }
.ps-copy .eyebrow .spark { color: var(--t); }
.ps-copy .btns { justify-content: center; margin: var(--s2) 0 0; }
.ps-copy .hint { margin: 0; max-width: 60ch; background: color-mix(in srgb, var(--sun) 22%, var(--paper)); }
@media (min-width: 900px) { .ps-box.has-pic { grid-template-columns: 1fr auto; text-align: start; justify-items: start; }
	.ps-box.has-pic .ps-copy { justify-items: start; } .ps-box.has-pic .btns { justify-content: flex-start; } }
.ps-pic { width: min(300px, 70vw); aspect-ratio: 9 / 10; border-radius: 50% 50% 26px 26px / 42% 42% 26px 26px; padding: 7px; position: relative;
	background: linear-gradient(160deg, var(--t), var(--t2)); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--t) 80%, transparent); }
.ps-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ps-pic::after { content: ''; position: absolute; inset: -14px; border-radius: 50% 50% 34px 34px / 42% 42% 34px 34px; border: 2px dashed color-mix(in srgb, var(--t) 45%, transparent); pointer-events: none; }
@media (min-width: 900px) { .ps-pic { order: 2; } }
/* the vendor's stage is the deep one */
.t-grape .ps-box { background: radial-gradient(60% 80% at 100% 0%, rgba(124, 58, 237, .6), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(216, 27, 106, .5), transparent 70%), var(--grape); color: #fff; }
.t-grape .ps-box::after { box-shadow: none; }
.t-grape .ps-copy h1 { color: #fff; } .t-grape .ps-copy .eyebrow { background: rgba(255, 255, 255, .13); color: #ffd25e; } .t-grape .ps-copy .eyebrow .spark { color: #ffd25e; }
.t-grape .ps-copy .small, .t-grape .ps-copy .muted { color: rgba(255, 255, 255, .8); }
.t-grape .ps-rating .rating { color: #fff; } .t-grape .pill.new { background: #ffd25e; color: #1f0b3d; }
.t-grape .facts { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.t-grape .facts li { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: .92rem; }
.t-grape .facts .ico { color: #ffd25e; width: 17px; height: 17px; }
.vendor-stage .cta { display: grid; gap: 8px; justify-items: inherit; margin-top: var(--s2); } .vendor-stage .cta p { margin: 0; }
.t-grape .ps-pic { background: linear-gradient(160deg, #ff5c9a, #ffd25e 50%, #3fe0b0); }
.t-grape .ps-pic::after { border-color: rgba(255, 255, 255, .35); }

/* filters: a white control card inside (search) or under (category) the stage */
.filters { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; background: var(--paper); border: 0;
	border-radius: 24px; padding: var(--s5); margin: var(--s4) 0 0; width: 100%; text-align: start; box-shadow: 0 20px 40px -30px rgba(31, 11, 61, .45), 0 0 0 1px var(--line); }
.filters label { display: grid; gap: 6px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.filters .btn { min-height: 46px; }
.filters.card-f { margin: 0 0 var(--s6); }
.results { padding-top: var(--s6); }
.res-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }
.res-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); } .res-head p { margin: 0; }

/* vendor cards: framed in a colour of their own, picture under an arch */
.grid .vcard { --c: var(--rose); border: 0; border-radius: 28px; padding: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 18px 34px -26px color-mix(in srgb, var(--c) 80%, transparent);
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.grid .vcard:nth-child(6n+2) { --c: var(--violet); } .grid .vcard:nth-child(6n+3) { --c: var(--tangerine); } .grid .vcard:nth-child(6n+4) { --c: var(--mint); }
.grid .vcard:nth-child(6n+5) { --c: var(--sky); } .grid .vcard:nth-child(6n) { --c: var(--sun); }
.grid .vcard img, .grid .vcard .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 50% 50% 18px 18px / 28% 28% 18px 18px; box-shadow: 0 0 0 3px var(--c); }
.grid .vcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--c), 0 26px 40px -26px color-mix(in srgb, var(--c) 85%, transparent); }
.grid .vcard h3 { font: 600 1.3rem/1.25 var(--serif); }
.grid .vcard .price { font-weight: 700; color: var(--rose-2); }

/* vendor page body: each part on its own card */
.vmain { display: grid; gap: var(--s4); align-content: start; }
.vbox { background: var(--paper); border-radius: 28px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -30px rgba(31, 11, 61, .35); }
.vbox > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: var(--s4); }
.vbox > h2::before { content: ''; width: 10px; height: 26px; border-radius: 6px; background: linear-gradient(180deg, var(--rose), var(--tangerine)); flex: none; }
.vmain .vbox:nth-child(2) > h2::before { background: linear-gradient(180deg, var(--violet), var(--sky)); }
.vmain .vbox:nth-child(3) > h2::before { background: linear-gradient(180deg, var(--mint), var(--sky)); }
.vmain .vbox:nth-child(4) > h2::before { background: linear-gradient(180deg, var(--sun), var(--tangerine)); }
.vbox .svc-block { background: var(--tint); border: 0; border-radius: 20px; }
aside .panel { border: 0; border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -30px rgba(31, 11, 61, .35); position: relative; overflow: hidden; }
aside .panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--rose), var(--tangerine)); }
aside .panel:nth-child(2)::before { background: linear-gradient(90deg, var(--violet), var(--sky)); } aside .panel:nth-child(3)::before { background: linear-gradient(90deg, var(--mint), var(--sky)); }
aside .panel:nth-child(4)::before { background: linear-gradient(90deg, var(--sun), var(--tangerine)); }

/* categories page: the home cards, wider, with a line about each */
.cats.wide { --n: 4; } @media (max-width: 860px) { .cats.wide { --n: 3; } } @media (max-width: 600px) { .cats.wide { --n: 2; } }
.cat-about { color: var(--ink-2); font-size: .86rem; line-height: 1.45; padding: 0 6px; }

/* text pages, FAQ, contact: one white card on the page */
.prose-card { max-width: 820px; margin: 0 auto; background: var(--paper); border-radius: 30px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -34px rgba(31, 11, 61, .4); }
.prose-card > p { font-size: 1.06rem; }
.prose-card.faq { display: grid; gap: 12px; background: transparent; box-shadow: none; padding: 0; }
.prose-card.faq details { background: var(--paper); border-radius: 22px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.prose-card.faq details[open] { box-shadow: 0 0 0 2px var(--sun), 0 18px 30px -24px rgba(240, 163, 10, .7); }
.prose-card.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font: 600 1.12rem/1.35 var(--serif); display: flex; gap: 14px; align-items: center; }
.prose-card.faq summary::-webkit-details-marker { display: none; }
.prose-card.faq summary::before { content: '+'; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--gold-soft); color: var(--warn);
	font: 700 1.2rem/1 var(--text); transition: transform .2s; }
.prose-card.faq details[open] summary::before { content: '−'; background: var(--sun); color: #1f0b3d; }
.prose-card.faq details p { margin: 0; padding: 0 24px 22px 70px; color: var(--ink-2); max-width: none; }
.prose-card .form .btn.big { width: 100%; }

/* ================= v0.6 app: the same stages, through the shared parts =================
   body[data-hat] sets the tone: customer = raspberry, vendor = grape-violet, support/admin = deep grape. */
body[data-hat] { --t: var(--rose); --t2: var(--tangerine);
	background: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--t2) 9%, transparent) 0 3px, transparent 4px) 0 0 / 76px 76px fixed,
		radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--t) 10%, transparent), transparent 70%) fixed, var(--bg); }
body[data-hat=vendor] { --t: var(--violet); --t2: var(--sky); }
body[data-hat=admin], body[data-hat=support] { --t: var(--grape); --t2: var(--violet); }
.app-head { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.hatbtn { border: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 35%, var(--line)); font-weight: 600; }

/* the page title is a small stage */
#view > h1:first-child, #view > .back + h1, #view > .head-row:first-child, #view > .back + .head-row {
	position: relative; overflow: hidden; isolation: isolate; text-align: center; margin: 0 0 var(--s5); padding: 26px 22px; border-radius: 28px;
	background: radial-gradient(circle at 16% 30%, color-mix(in srgb, var(--t2) 20%, transparent) 0 3px, transparent 4px) 0 0 / 46px 46px,
		linear-gradient(135deg, color-mix(in srgb, var(--t) 16%, var(--paper)), color-mix(in srgb, var(--t2) 14%, var(--paper)));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t) 20%, transparent); }
#view > h1:first-child, #view > .back + h1 { font: 700 clamp(1.8rem, 6vw, 2.5rem)/1.1 var(--serif); }
#view > .head-row:first-child h1, #view > .back + .head-row h1 { font: 700 clamp(1.8rem, 6vw, 2.5rem)/1.1 var(--serif); }
body[data-hat=admin] #view > h1:first-child, body[data-hat=support] #view > h1:first-child, body[data-hat=admin] #view > .head-row:first-child {
	background: radial-gradient(60% 90% at 100% 0%, rgba(124, 58, 237, .55), transparent 70%), radial-gradient(50% 80% at 0% 100%, rgba(216, 27, 106, .4), transparent 70%), #3b1678; color: #fff; box-shadow: none; }
body[data-hat=admin] #view > .head-row:first-child h1 { color: #fff; }
#view > h2 { font: 600 1.45rem var(--serif); }

/* cards and lists: framed, a colour stripe beside each title */
.card { border: 0; border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -28px rgba(31, 11, 61, .4); }
.card > h2:first-child { display: flex; align-items: center; gap: 10px; }
.card > h2:first-child::before { content: ''; width: 8px; height: 22px; border-radius: 5px; flex: none; background: linear-gradient(180deg, var(--rose), var(--tangerine)); }
.card:nth-of-type(4n+2) > h2:first-child::before { background: linear-gradient(180deg, var(--violet), var(--sky)); }
.card:nth-of-type(4n+3) > h2:first-child::before { background: linear-gradient(180deg, var(--mint), var(--sky)); }
.card:nth-of-type(4n) > h2:first-child::before { background: linear-gradient(180deg, var(--sun), var(--tangerine)); }
.card.flat { box-shadow: none; background: color-mix(in srgb, var(--t) 7%, var(--paper)); }
.list { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -28px rgba(31, 11, 61, .4); }
.item { position: relative; } a.item:hover, button.item:hover { background: color-mix(in srgb, var(--t) 7%, var(--paper)); }
a.item::after { content: ''; position: absolute; inset-inline-end: 18px; top: 50%; width: 8px; height: 8px; border-left: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
	transform: translateY(-50%) rotate(45deg); opacity: .6; }
[dir=ltr] a.item::after { transform: translateY(-50%) rotate(-135deg); }
.item .t { font: 600 1.06rem/1.35 var(--serif); }
.qcard { border: 0; border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -28px rgba(31, 11, 61, .45); position: relative; overflow: hidden; }
.qcard::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--rose), var(--sun), var(--violet)); }
.qcard.fav { box-shadow: 0 0 0 2px var(--sun), 0 16px 32px -24px rgba(240, 163, 10, .7); }
.empty { border: 0; border-radius: 28px; outline: 2px dashed var(--line-2); outline-offset: -2px; background: color-mix(in srgb, var(--t) 5%, var(--paper)); }

/* forms */
input, select, textarea { border-radius: 14px; border-width: 1.5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 16%, transparent); }
.stepper span { height: 6px; border-radius: 4px; } .stepper span.on { background: linear-gradient(90deg, var(--rose), var(--sun)); }
.progress li.now { background: linear-gradient(90deg, var(--rose), var(--tangerine)); border-color: transparent; }

/* navigation: a floating tab bar, the side list with a coloured current item */
@media (max-width: 959px) {
	.tabbar { inset-inline: 10px; bottom: 10px; border: 0; border-radius: 24px; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom) * .5);
		box-shadow: 0 0 0 1px var(--line), 0 18px 40px -14px rgba(31, 11, 61, .45); background: color-mix(in srgb, var(--paper) 92%, transparent);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
	.tabbar a { border-radius: 18px; }
	.tabbar a[aria-current=page] { background: linear-gradient(135deg, var(--t), var(--t2)); color: #fff; box-shadow: 0 10px 20px -12px var(--t); }
	#view { padding-bottom: 130px; }
}
body[data-hat=admin] .tabbar a[aria-current=page], body[data-hat=support] .tabbar a[aria-current=page] { background: linear-gradient(135deg, #3b1678, var(--violet)); }
.side a[aria-current=page] { background: linear-gradient(135deg, var(--t), var(--t2)); color: #fff; box-shadow: 0 12px 22px -14px var(--t); }
.side a[aria-current=page] .ico { color: #fff; }

/* chat */
.msg.mine { background: linear-gradient(135deg, var(--violet), var(--rose)); border-color: transparent; }
.msg { border-radius: 20px 20px 20px 6px; } .msg.mine { border-radius: 20px 20px 6px 20px; }

/* ================= v0.7 business sign-up: one page, "open lists", the verified stamp ================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pick-label { display: grid; gap: 6px; font-weight: 500; font-size: .93rem; }
/* the open list */
.mpick { position: relative; display: grid; gap: 10px; }
.mp-btn { appearance: none; width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-2);
	background: var(--paper); color: var(--ink); font: 500 1rem var(--text); cursor: pointer; text-align: start; }
.mp-btn:hover { border-color: var(--t, var(--rose)); } .mpick.open .mp-btn { border-color: var(--t, var(--rose)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t, var(--rose)) 16%, transparent); }
.mp-ph { flex: 1; color: var(--ink-2); }
.mp-count { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--blush-soft); color: var(--rose-2); } .mp-count:empty { display: none; }
.mp-caret { width: 9px; height: 9px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg) translateY(-2px); transition: transform .2s; }
.mpick.open .mp-caret { transform: rotate(135deg) translateY(-2px); }
.mp-panel { position: absolute; top: 56px; inset-inline: 0; z-index: 40; background: var(--paper); border-radius: 20px; padding: 10px;
	box-shadow: 0 0 0 1px var(--line), 0 28px 60px -20px rgba(31, 11, 61, .45); display: grid; gap: 8px; max-height: min(430px, 62vh); grid-template-rows: auto 1fr auto; }
.mp-q { min-height: 44px; }
.mp-list { overflow-y: auto; display: grid; gap: 2px; padding: 2px; overscroll-behavior: contain; }
.mp-group { margin: 10px 8px 4px; font: 700 .78rem var(--text); color: var(--ink-3); letter-spacing: .02em; }
.mp-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; cursor: pointer; font-weight: 500; }
.mp-opt:hover { background: var(--tint); }
.mp-opt input { width: 20px; height: 20px; accent-color: var(--rose); flex: none; margin: 0; }
.mp-opt img { width: 40px; height: 40px; border-radius: 50% 50% 10px 10px; object-fit: cover; flex: none; }
.mp-opt .ico { width: 24px; height: 24px; color: var(--violet); }
.mp-opt:has(input:checked) { background: var(--blush-soft); }
.mp-foot { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--line); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mp-chips:empty { display: none; }
.mp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
	background: color-mix(in srgb, var(--t, var(--rose)) 12%, var(--paper)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, var(--rose)) 30%, transparent); }
.mp-chip button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink-2); cursor: pointer; font: 700 1rem/1 var(--text); display: grid; place-items: center; }
.mp-chip button:hover { background: var(--rose); color: #fff; }
/* segmented choices */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg-opt { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; cursor: pointer; text-align: center;
	background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .16s, background-color .16s; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt b { font: 600 1.02rem/1.2 var(--serif); } .seg-opt small { color: var(--ink-2); font-size: .8rem; font-weight: 400; }
.seg-opt:hover { box-shadow: inset 0 0 0 1.5px var(--t, var(--rose)); }
.seg-opt:has(input:checked) { background: color-mix(in srgb, var(--t, var(--rose)) 12%, var(--paper)); box-shadow: inset 0 0 0 2px var(--t, var(--rose)); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) { .seg.cards3 { grid-auto-flow: row; } }
.area-pick { display: grid; gap: 12px; }
/* the page */
.onboard { gap: var(--s4); }
.ob-step > h2 { display: flex; align-items: center; gap: 12px; }
.card.ob-step > h2:first-child::before { display: none; }
.ob-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 1rem/1 var(--text); color: var(--bg); background: var(--ink); }
.ob-step > p.muted { margin-top: -6px; }
.ob-step .form, .ob-step { display: grid; gap: var(--s4); }
.ob-go { display: grid; justify-items: center; gap: 6px; padding: var(--s3) 0 var(--s5); }
.ob-go .btn { min-width: min(100%, 320px); }
.ob-stamp { display: flex; gap: var(--s4); align-items: center; } .ob-stamp p { margin: 0 0 6px; }
@media (max-width: 480px) { .ob-stamp { flex-direction: column; align-items: flex-start; text-align: start; } }
/* the stamp itself: a flat small ok-tag, like .free-badge (v1.3) */
.stamp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font: 700 .875rem/1 var(--text); white-space: nowrap;
	color: var(--ok); background: var(--ok-soft); border: 0; box-shadow: none; transform: none; }
.stamp .ico { width: 15px; height: 15px; color: currentColor; }
/* the preview at sign-up / on the business card: the same tag on the blush wash */
.stamp-demo { flex: none; display: grid; place-items: center; padding: 18px 22px; border-radius: 18px; background: var(--wash); border: 1px solid var(--frame-soft); }
.stamp-demo .stamp { transform: none; }
.vpic { position: relative; } .vpic .stamp { position: absolute; top: 14px; inset-inline-start: 14px; background: var(--paper); }
/* next steps on the business card */
.todo { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 8px; }
.todo li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--tint); font-weight: 500; }
.todo li.ok { background: var(--ok-soft); color: var(--ok); } .todo li.ok span:not(.tick) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.todo .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--line-2); background: var(--paper); }
.todo li.ok .tick { background: var(--ok); box-shadow: none; color: #fff; } .todo .tick .ico { width: 15px; height: 15px; }
.ob-next { box-shadow: 0 0 0 2px color-mix(in srgb, var(--t, var(--rose)) 35%, transparent), 0 16px 32px -28px rgba(31, 11, 61, .4); }

/* ================= v0.7 the top bar: a floating framed capsule; the name large; every link on its own small stage ================= */
.site-head { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 0 0; }
.site-head .bar { position: relative; min-height: 84px; gap: var(--s4); padding: 10px 14px 10px 18px; border-radius: 30px; isolation: isolate;
	background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
	box-shadow: 0 0 0 1px var(--line), 0 20px 44px -26px rgba(31, 11, 61, .45); max-width: 1088px; width: calc(100% - 32px); margin-inline: auto; }
.site-head .bar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, var(--rose), var(--tangerine) 25%, var(--sun) 45%, var(--mint) 65%, var(--violet));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; }
/* the name: bigger, in gradient, with a line under it */
.logo.big { gap: 12px; }
.logo.big .lm { width: 52px; height: 56px; filter: drop-shadow(0 6px 10px rgba(216, 27, 106, .25)); }
.logo .lwrap { display: grid; gap: 3px; }
.logo.big .lw { font: 700 2.15rem/.95 var(--serif); letter-spacing: -.02em; background: linear-gradient(95deg, var(--rose) 0%, #f0436b 35%, var(--tangerine) 70%, var(--sun) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 2px; }
.logo .lt { font: 500 .72rem/1 var(--text); color: var(--ink-2); letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) { .logo.big:hover .lm { animation: bob .6s cubic-bezier(.3, 1.6, .5, 1); } }
@keyframes bob { 40% { transform: translateY(-4px) rotate(-4deg); } }
/* the links: small stages, each framed in its own gradient */
.site-head .links { gap: 8px; margin-inline-start: var(--s3); }
.site-head .links a.nl { --a: var(--rose); --b: var(--tangerine); display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 18px; border-radius: 16px;
	color: var(--ink); text-decoration: none; font: 600 .98rem/1 var(--text); border: 1.5px solid transparent;
	background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--a) 55%, var(--paper)), color-mix(in srgb, var(--b) 55%, var(--paper))) border-box;
	box-shadow: 0 8px 18px -14px var(--a); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, background .18s; }
.site-head .links a.n1 { --a: var(--violet); --b: var(--sky); } .site-head .links a.n2 { --a: var(--mint); --b: var(--sky); } .site-head .links a.n3 { --a: var(--sun); --b: var(--tangerine); }
.site-head .links .ni { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); flex: none; }
.site-head .links a.n3 .ni { color: #1f0b3d; }
.site-head .links .ni .ico { width: 16px; height: 16px; }
.site-head .links a.nl:hover { transform: translateY(-2px); border-bottom-color: transparent;
	background: linear-gradient(color-mix(in srgb, var(--a) 9%, var(--paper)), color-mix(in srgb, var(--a) 9%, var(--paper))) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box;
	box-shadow: 0 14px 24px -14px var(--a); }
.site-head .links a.nl[aria-current=page] { color: #fff; background: linear-gradient(135deg, var(--a), var(--b)) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box; }
.site-head .links a.nl[aria-current=page] .ni { background: rgba(255, 255, 255, .22); color: #fff; }
.site-head .links a.n3[aria-current=page] { color: #1f0b3d; } .site-head .links a.n3[aria-current=page] .ni { color: #1f0b3d; }
.site-head .links a.nl:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
/* actions */
.site-head .acts .login { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px; border-radius: 16px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.site-head .acts .login:hover { box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--ink); } .site-head .acts .login .ico { width: 18px; height: 18px; color: var(--violet); }
.site-head .acts .btn.primary { min-height: 46px; border-radius: 16px; padding: 0 18px; background: linear-gradient(135deg, var(--rose), #f0436b 60%, var(--tangerine)); border: 0;
	box-shadow: 0 12px 22px -12px rgba(216, 27, 106, .8); }
.site-head .acts .btn.primary .ico { width: 18px; height: 18px; }
.site-head .menubtn, .site-head .themebtn { width: 46px; height: 46px; border-radius: 16px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.site-head .menubtn:hover, .site-head .themebtn:hover { box-shadow: inset 0 0 0 1.5px var(--rose); }
@media (max-width: 1120px) { .site-head .links a.nl { padding: 0 12px; } .site-head .links .ni { display: none; } .logo .lt { display: none; } }
@media (max-width: 860px) { .site-head { padding-top: 8px; } .site-head .bar { min-height: 66px; padding: 8px 10px; border-radius: 24px; }
	.logo.big .lm { width: 40px; height: 44px; } .logo.big .lw { font-size: 1.7rem; }
	.site-head .acts .btn.primary { padding: 0 14px; min-height: 42px; } .site-head .menubtn, .site-head .themebtn { width: 42px; height: 42px; } }
@media (max-width: 380px) { .site-head .acts .btn.primary .ico { display: none; } }
.envbar + .skip + .site-head, .envbar ~ .site-head { padding-top: 10px; }
.stage-hero { padding-top: var(--s4); }
@media (max-width: 860px) { .site-head .acts .login { display: none; } .site-head .bar { width: calc(100% - 20px); } }
/* top bar fit: names on one line; the tagline only on wide screens; tighter on phones */
.site-head .links a.nl { white-space: nowrap; padding: 0 12px 0 14px; } .site-head .links .ni { width: 24px; height: 24px; border-radius: 8px; }
@media (max-width: 1360px) { .logo.big .lt { display: none; } }
@media (max-width: 520px) { .site-head .bar { gap: 8px; padding: 8px; } .logo.big { gap: 8px; } .logo.big .lm { width: 34px; height: 37px; } .logo.big .lw { font-size: 1.45rem; }
	.site-head .acts { gap: 6px; } .site-head .acts .btn.primary { padding: 0 12px; font-size: .85rem; } .site-head .acts .btn.primary .ico { display: none; }
	.site-head .menubtn, .site-head .themebtn { width: 40px; height: 40px; border-radius: 14px; } }
.site-head .menubtn, .site-head .themebtn, .logo.big, .site-head .acts > * { flex: none; } .logo .lt { white-space: nowrap; }
@media (max-width: 1500px) { .logo.big .lt { display: none; } }

/* ================= v0.8 (4/11): top bar fit + bigger name, the home search card, the footer stage ================= */
/* top bar: the name bigger; the bar is a grid, so nothing can push past its frame */
.logo.big .lm { width: 60px; height: 65px; }
.logo.big .lw { font-size: 2.6rem; }
.site-head .bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; }
.site-head .links { justify-content: center; min-width: 0; margin: 0; }
.site-head .acts { margin: 0; }
.site-head .acts .cta-top .ico { width: 17px; height: 17px; color: #ffe08a; }
@media (max-width: 1600px) { .site-head .links .ni { display: none; } .site-head .links a.nl { padding: 0 14px; } }
@media (max-width: 1300px) { .site-head .links a.n2 { display: none; } }
@media (max-width: 1180px) { .logo.big .lw { font-size: 2.3rem; } .logo.big .lm { width: 52px; height: 56px; } }
@media (max-width: 1000px) { .site-head .acts .login { display: none; } }
@media (max-width: 860px) { .site-head .bar { grid-template-columns: auto auto 1fr auto; } .logo.big .lw { font-size: 1.95rem; } .logo.big .lm { width: 44px; height: 48px; } }
@media (max-width: 520px) { .logo.big .lw { font-size: 1.7rem; } .logo.big .lm { width: 38px; height: 41px; } }
@media (max-width: 370px) { .logo.big .lw { font-size: 1.5rem; } .site-head .acts .btn.primary { padding: 0 10px; } }

/* the home search card: labelled fields in one bar, like a booking engine */
.planner-wrap { position: relative; z-index: 2; margin: -110px auto 0; max-width: 1040px; padding: 0 var(--s4); }
@media (prefers-reduced-motion: no-preference) { .planner-wrap { animation: rise .7s .3s cubic-bezier(.2, .8, .2, 1) both; } }
.planner { background: var(--paper); border-radius: 30px; padding: 24px 26px 18px; display: grid; gap: 16px;
	box-shadow: 0 0 0 1px var(--line), 0 40px 70px -36px rgba(31, 11, 61, .5); }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
.pl-kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 1.25rem/1 var(--serif); color: var(--ink); }
.pl-kicker .pl-mark { width: 30px; height: 32px; }
.pl-title { margin: 0; color: var(--ink-2); font-size: .98rem; max-width: none; }
.pl-bar { display: grid; grid-template-columns: 1.25fr .7fr .7fr 1.2fr auto; align-items: stretch; background: var(--tint); border-radius: 22px; padding: 6px;
	box-shadow: inset 0 0 0 1px var(--line); }
.planner.has-other .pl-bar { grid-template-columns: 1fr 1fr .6fr .6fr 1fr auto; }
.pl-f { position: relative; display: grid; gap: 2px; align-content: center; padding: 10px 18px; border-radius: 16px; cursor: pointer; min-width: 0; font-weight: 400; transition: background-color .16s, box-shadow .16s; }
.pl-f + .pl-f::before { content: ''; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line-2); }
.pl-f:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.pl-f:focus-within { background: var(--paper); box-shadow: 0 10px 24px -16px rgba(31, 11, 61, .5), inset 0 0 0 2px var(--rose); }
.pl-f:focus-within::before, .pl-f:focus-within + .pl-f::before { opacity: 0; }
.pl-l { font: 600 .78rem/1.2 var(--text); color: var(--ink-2); letter-spacing: .01em; }
.pl-f select, .pl-f input { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; min-height: 30px; height: auto; width: 100%;
	font: 600 1.08rem/1.3 var(--text); color: var(--ink); box-shadow: none; border-radius: 0; cursor: pointer; text-overflow: ellipsis; }
.pl-f select:focus, .pl-f input:focus { outline: none; box-shadow: none; border: 0; }
.pl-f input::placeholder { color: var(--ink-3); font-weight: 400; }
.pl-type::after, .pl-city::after { content: ''; position: absolute; inset-inline-end: 16px; top: 50%; width: 7px; height: 7px; border-left: 2px solid var(--ink-3);
	border-bottom: 2px solid var(--ink-3); transform: translateY(-20%) rotate(-45deg); pointer-events: none; }
.pl-type select, .pl-city select { padding-inline-end: 22px; }
.pl-go.btn { align-self: center; margin-inline-start: 6px; min-height: 58px; border-radius: 18px; padding: 0 26px; font-size: 1.02rem;
	background: linear-gradient(135deg, var(--rose), #f0436b 60%, var(--tangerine)); border: 0; }
.pl-go .ico { width: 19px; height: 19px; }
.pl-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; color: var(--ink-2); font-size: .86rem; }
.pl-notes li { display: inline-flex; align-items: center; gap: 6px; } .pl-notes .ico { width: 15px; height: 15px; color: var(--mint); }
@media (max-width: 960px) {
	.pl-bar, .planner.has-other .pl-bar { grid-template-columns: 1fr 1fr; gap: 4px; }
	.pl-f { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); } .pl-f + .pl-f::before { display: none; }
	.pl-go.btn { grid-column: 1 / -1; margin: 4px 0 0; width: 100%; }
	.pl-type, .pl-other, .pl-city { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .planner-wrap { margin-top: -120px; padding: 0 10px; } .planner { padding: 18px 14px 14px; border-radius: 24px; } .pl-title { font-size: .9rem; } }

/* the footer: a deep stage with rounded top, four columns, a bottom line */
.site-foot { margin-top: 0; padding: 0; background: none; color: #fff; }
.site-foot > .wrap { max-width: none; padding: 0; }
.site-foot .ft-grid, .site-foot .ft-bottom { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.site-foot { position: relative; isolation: isolate; border-radius: 44px 44px 0 0; overflow: hidden; text-align: start;
	background: radial-gradient(circle at 12% 22%, rgba(255, 210, 94, .14) 0 3px, transparent 4px) 0 0 / 64px 64px,
		radial-gradient(55% 80% at 100% 0%, rgba(216, 27, 106, .42), transparent 70%), radial-gradient(50% 80% at 0% 100%, rgba(124, 58, 237, .45), transparent 70%), #1f0b3d; }
.site-foot::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--rose), var(--tangerine), var(--sun), var(--mint), var(--violet)); }
.ft-grid { display: grid; gap: 36px 28px; grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-top: 64px; padding-bottom: 40px; }
.ft-brand .logo { justify-content: flex-start; }
.ft-brand .logo .lw { background: linear-gradient(95deg, #ff7aa8, #ffb36b 50%, #ffd25e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-brand .tag { margin: 14px 0 8px; font: 600 1.15rem/1.4 var(--serif); color: #fff; }
.ft-brand .ft-line { color: rgba(255, 255, 255, .72); font-size: .95rem; margin: 0 0 18px; max-width: 42ch; }
.ft-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-cta .btn { min-height: 46px; border-radius: 16px; } .ft-cta .btn .ico { width: 17px; height: 17px; }
.ft-cta .btn.primary { background: linear-gradient(135deg, var(--rose), #f0436b 60%, var(--tangerine)); border: 0; }
.btn.ghost-light { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .28); } .btn.ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .5); }
.ft-col h2 { font: 600 1.1rem/1.2 var(--serif); color: #fff; margin: 6px 0 16px; display: flex; align-items: center; gap: 10px; }
.ft-col h2::before { content: ''; width: 8px; height: 20px; border-radius: 5px; background: linear-gradient(180deg, var(--rose), var(--tangerine)); }
.ft-col.c2 h2::before { background: linear-gradient(180deg, var(--violet), var(--sky)); } .ft-col.c3 h2::before { background: linear-gradient(180deg, var(--mint), var(--sky)); }
.ft-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ft-col a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .95rem; display: inline-block; padding: 4px 0; background: linear-gradient(90deg, #ffd25e, #ff7aa8) no-repeat 100% 100% / 0 2px;
	transition: background-size .25s, color .16s; }
.ft-col a:hover { color: #fff; background-size: 100% 2px; }
.ft-col a.more { color: #ffd25e; font-weight: 600; }
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 20px; padding-bottom: 26px; border-top: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .6); font-size: .86rem; }
.ft-bottom .spark { width: 10px; height: 10px; color: #ffd25e; }
.ft-top { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.ft-top:hover { background: rgba(255, 255, 255, .16); color: #fff; } .ft-top .up { width: 16px; height: 16px; transform: rotate(-90deg); }
.site-foot :focus-visible { outline-color: #ffd25e; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; padding-top: 48px; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-foot { border-radius: 30px 30px 0 0; } .ft-grid { gap: 28px 18px; padding-inline: 20px; } .ft-bottom { padding-inline: 20px; } .ft-top { margin-inline-start: 0; } }
.site-foot nav.ft-col { display: block; margin: 0; } .ft-brand .logo .lw { font-size: 2.5rem; } .ft-brand .logo .lm { width: 54px; height: 58px; } .site-foot .ft-bottom { text-align: start; }
@media (max-width: 350px) { .logo.big .lm { display: none; } .site-head .bar { gap: 6px; padding: 8px 6px; } .site-head .acts .btn.primary { font-size: .8rem; padding: 0 9px; } }
/* the bar is as wide as the page content at every screen size: links carry a colour dot instead of an icon tile; the tagline lives in the footer */
.site-head .links .ni { display: none !important; }
.site-head .links a.nl { padding: 0 16px; } .site-head .links a.nl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent); }
.site-head .links a.nl[aria-current=page]::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
@media (max-width: 1300px) { .site-head .links a.nl { padding: 0 12px; } }
.app-head .logo .lw { font: 700 1.8rem/1 var(--serif); background: linear-gradient(95deg, var(--rose), #f0436b 35%, var(--tangerine) 70%, var(--sun)); -webkit-background-clip: text; background-clip: text; color: transparent; } .app-head .logo .lm { width: 36px; height: 39px; } @media (max-width: 380px) { .app-head .logo .lw { font-size: 1.5rem; } }
.pl-range { display: flex; align-items: center; gap: 8px; } .pl-range input { width: 2.6em; min-width: 0; text-align: center; background: var(--paper) !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px var(--line) !important; min-height: 32px; } .pl-range span { color: var(--ink-2); font-size: .85rem; } .pl-age { cursor: default; }
/* the slogan under the name (site.slogan): small, warm, one line - on the bar, the menu, the footer and the app */
.logo .lt, .site-head .logo.big .lt { display: block !important; font: 600 .76rem/1.15 var(--text); letter-spacing: .01em; white-space: nowrap; color: var(--ink-2); }
.logo .lt::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px; background: linear-gradient(135deg, var(--rose), var(--sun)); }
.logo.big .lwrap { gap: 5px; }
.site-foot .logo .lt { color: #ffd9a8; font-size: .9rem; }
.drawer .logo .lt { font-size: .7rem; }
.app-head .logo .lwrap { gap: 2px; } .app-head .logo .lt { font-size: .66rem; }
@media (max-width: 520px) { .site-head .logo.big .lt { font-size: .64rem; } .logo .lt::before { width: 5px; height: 5px; margin-inline-end: 4px; } }
@media (max-width: 380px) { .app-head .logo .lt { display: none !important; } }
.site-head .links { gap: 6px; } .site-head .links a.nl { padding: 0 13px; gap: 7px; } @media (max-width: 1300px) { .site-head .links a.nl { padding: 0 11px; } }
/* phones: the slogan needs the room - the light/dark switch moves into the side menu */
.drawer .dtheme { display: none; padding: 0 var(--s5) var(--s3); }
.themebtn.wide { width: 100%; height: 46px; border-radius: 16px; gap: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 .95rem var(--text); }
@media (max-width: 560px) { .site-head .acts .themebtn { display: none; } .drawer .dtheme { display: block; } .site-head .bar { grid-template-columns: auto minmax(0, 1fr) 0 auto; } }
@media (max-width: 860px) { .site-head .bar { grid-template-columns: auto minmax(0, 1fr) auto !important; } .site-head .logo { justify-self: start; min-width: 0; } }
/* the search card, tidied (owner 4/11): title + line together, one value style for every field, arrows next to their text */
.planner { padding: 26px 28px 20px; gap: 18px; }
.pl-head { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: nowrap; }
.pl-head .pl-mark { width: 40px; height: 43px; flex: none; }
.pl-kicker { font: 700 1.45rem/1.1 var(--serif); margin: 0 0 3px; display: block; }
.pl-title { font-size: .98rem; line-height: 1.45; color: var(--ink-2); margin: 0; }
.pl-bar { grid-template-columns: 1.15fr 1fr .85fr 1.15fr auto; padding: 8px; gap: 0; }
.planner.has-other .pl-bar { grid-template-columns: 1fr 1fr 1fr .8fr 1fr auto; }
.pl-f { min-height: 68px; padding: 10px 20px; gap: 4px; }
.pl-f + .pl-f::before { top: 22%; bottom: 22%; }
.pl-l { font: 600 .8rem/1.2 var(--text); color: var(--ink-2); }
.pl-f select, .pl-f input, .pl-range input { font: 600 1.1rem/1.3 var(--text); color: var(--ink); min-height: 30px; }
.pl-type::after, .pl-city::after { content: none; }
.pl-sel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pl-sel select { width: auto; field-sizing: content; min-width: 0; max-width: 100%; padding-inline-end: 0 !important; }
.pl-sel::after { content: ''; flex: none; width: 8px; height: 8px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(-45deg); pointer-events: none; }
.pl-range { display: inline-flex; align-items: center; gap: 10px; }
.pl-range input { width: 2.3ch !important; min-width: 0; text-align: center; padding: 0 !important; background: transparent !important; box-shadow: none !important;
	border-radius: 0 !important; border-bottom: 2px dashed var(--line-2) !important; }
.pl-range input:focus { border-bottom-color: var(--rose) !important; }
.pl-dash { color: var(--ink-3); font-size: .9rem; font-weight: 500; }
.pl-go.btn { min-height: 60px; padding: 0 28px; }
.pl-notes { gap: 8px 26px; font-size: .88rem; }
@media (max-width: 960px) {
	.pl-bar, .planner.has-other .pl-bar { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
	.pl-f { min-height: 64px; padding: 10px 16px; }
}
@media (max-width: 860px) {
	.planner { padding: 20px 16px 16px; gap: 14px; }
	.pl-head { align-items: flex-start; } .pl-head .pl-mark { width: 34px; height: 37px; margin-top: 2px; }
	.pl-kicker { font-size: 1.3rem; } .pl-title { font-size: .9rem; }
	.pl-notes { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 22px; }
}
.pl-l { white-space: nowrap; } .planner.has-other .pl-bar { grid-template-columns: .9fr 1.05fr 1fr .9fr 1.1fr auto; } .planner.has-other .pl-f { padding: 10px 14px; } .planner.has-other .pl-go.btn { padding: 0 20px; } @media (max-width: 1180px) and (min-width: 961px) { .planner.has-other .pl-bar { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .planner.has-other .pl-f::before { display: none; } .planner.has-other .pl-go.btn { grid-column: 1 / -1; margin: 4px 0 0; } }
.drawer .dh-acts { display: flex; gap: 8px; align-items: center; } .drawer .dh .themebtn { display: inline-grid !important; }
/* the whole box opens the list: the real <select> is stretched over the box (transparent); .pl-val shows the choice */
.pl-type, .pl-city { position: relative; }
.pl-type select, .pl-city select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; z-index: 1;
	font-size: 16px !important; field-sizing: fixed !important; }
.pl-type .pl-sel, .pl-city .pl-sel { pointer-events: none; }
.pl-val { font: 600 1.1rem/1.3 var(--text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-f:has(select:focus-visible) { background: var(--paper); box-shadow: 0 10px 24px -16px rgba(31, 11, 61, .5), inset 0 0 0 2px var(--rose); }
.pl-age { cursor: text; }

/* v0.8.5 (5/11) the services step: shared details once, one vendor for everything, optional per-service details folded */
.one-vendor { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; border: 2px dashed var(--rose) !important; background: color-mix(in srgb, var(--rose) 6%, var(--paper)); }
.one-vendor input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--rose); flex: none; }
.one-vendor > span { display: flex; flex-direction: column; gap: 4px; }
.one-vendor b { font-size: 1.05rem; }
.svc-ed details.more { margin: var(--s2) 0 0; }
.svc-ed details.more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* v0.8.6 (5/11) the full legal pages: terms, privacy, accessibility */
.prose-card h2 { font: 600 1.35rem var(--serif); margin: 1.8em 0 .5em; color: var(--ink); }
.prose-card h2:first-of-type { margin-top: 1.2em; }
.prose-card ul, .prose-card ol { padding-inline-start: 1.4em; margin: .4em 0 1em; display: grid; gap: .45em; line-height: 1.7; }
.prose-card ul ul { margin-top: .5em; }
.prose-card li { font-size: 1.02rem; }
.prose-card .doc-meta { color: var(--ink-2); font-size: .95rem; margin: 0 0 1em; }
.prose-card .contact-list { list-style: none; padding: var(--s4) var(--s5); background: var(--bg); border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.prose-card a { font-weight: 600; }

/* ================= v0.9 (6/11) polish - apple-design + ui-ux-pro-max =================
   Feedback on press (not on release), one easing family that enters and leaves the same way, contrast >= 4.5:1 for text
   on every gradient, touch targets >= 44px, reduced motion / transparency / more contrast honoured. */

/* contrast: white text only on the deep CTA gradient (every stop >= 4.5:1, same in both themes) */
.site-head .acts .btn.primary, .planner .pl-go.btn.primary, .site-foot .ft-cta .btn.primary { background: var(--cta-grad); }
.s-join .stage-box { background: var(--cta-grad); }
.progress li.now { background: var(--cta-grad); }
.btn.primary, .btn.accent, .chip[aria-pressed=true] { background-color: var(--rose-solid); border-color: var(--rose-solid); } .dot { background: var(--rose-solid); }
.msg.mine, :root .msg.mine { background: linear-gradient(135deg, #6d28d9, #d81b6a); }
:root[data-theme=dark] .toast { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -16px var(--shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .toast { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -16px var(--shadow); } }
/* the current place: a tint of its colour with ink text (white on mint/sun/sky gradients was 2-3:1) */
.site-head .links a.nl[aria-current=page], .site-head .links a.n3[aria-current=page] { color: var(--ink);
	background: linear-gradient(color-mix(in srgb, var(--a) 18%, var(--paper)), color-mix(in srgb, var(--a) 18%, var(--paper))) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box; }
.site-head .links a.nl[aria-current=page]::before { background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
@media (max-width: 959px) { .tabbar a[aria-current=page] { background: color-mix(in srgb, var(--t) 16%, var(--paper)); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 55%, transparent); }
	.tabbar a[aria-current=page] .ico { color: var(--t); } }
body[data-hat=admin] .tabbar a[aria-current=page], body[data-hat=support] .tabbar a[aria-current=page] { background: color-mix(in srgb, var(--violet) 16%, var(--paper)); }
.side a[aria-current=page] { background: color-mix(in srgb, var(--t) 14%, var(--paper)); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 50%, transparent); }
.side a[aria-current=page] .ico { color: var(--t); }
.drawer nav a[aria-current=page] { background: color-mix(in srgb, var(--rose) 12%, var(--paper)); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rose) 40%, transparent); }
.ps-copy .eyebrow { color: color-mix(in srgb, var(--t) 40%, var(--ink)); }
/* one focus ring everywhere (3:1 or better on both themes) */
.cat:focus-visible, .site-head .links a.nl:focus-visible, .seg-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-foot :focus-visible { outline: 3px solid #ffd25e; outline-offset: 2px; }

/* touch targets >= 44px */
.btn.small, .hatbtn, .sortbar select, .ft-top { min-height: 44px; }
.site-head .menubtn, .site-head .themebtn { width: 44px !important; height: 44px !important; }
.mp-chip button { position: relative; width: 32px; height: 32px; } .mp-chip button::before { content: ''; position: absolute; inset: -6px; }
.pl-range input { min-height: 44px !important; min-width: 44px; padding: 0 6px !important; }
.back { min-height: 44px; padding-inline: 4px; }
.ft-col a { padding: 10px 0; }

/* press feedback: on pointer-down, immediately; hover lifts only where there is a real hover */
.btn, .chip, .cat, .grid .vcard, .iconbtn, .menubtn, .themebtn, .tabbar a, .item, .mp-opt, .seg-opt, .hatbtn, .pl-f, .side a, .drawer nav a, .ft-top {
	-webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .chip, .iconbtn, .menubtn, .themebtn, .tabbar a, .hatbtn, .seg-opt, .ft-top { transition: transform var(--dur-2) var(--ease-out), border-color .16s, background-color .16s, color .16s, box-shadow .16s; }
.btn:active, .chip:active, .iconbtn:active, .menubtn:active, .themebtn:active, .tabbar a:active, .hatbtn:active, .ft-top:active { transform: scale(.96); transition-duration: 80ms; }
.cat:active, .grid .vcard:active, .seg-opt:active, .site-head .links a.nl:active { transform: scale(.98); transition-duration: 80ms; }
a.item:active, button.item:active, .mp-opt:active, .side a:active, .drawer nav a:active { background: color-mix(in srgb, var(--t, var(--rose)) 12%, var(--paper)); }
.btn[disabled]:active { transform: none; }
@media (hover: none), (pointer: coarse) {
	.cat:hover, .grid .vcard:hover, .site-head .links a.nl:hover { transform: none; }
	.cat:hover .cat-pic img { transform: none; }
}

/* one motion family: --ease-out to come in, the mirrored --ease-in to leave the same way */
.cat, .grid .vcard, .site-head .links a.nl { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2); }
.cat-pic img { transition: transform var(--dur-3) var(--ease-out); }
/* the drawer: in from the menu side, out the same way, faster on the way out */
.drawer { transition: transform var(--dur-2) var(--ease-in), visibility 0s var(--dur-2); border-radius: 0; border-start-end-radius: var(--r-l); border-end-end-radius: var(--r-l); }
.drawer-open .drawer { transition: transform .38s var(--ease-out), visibility 0s; }
.drawer-bg { transition: opacity var(--dur-2) var(--ease-in); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer-open .drawer-bg { transition: opacity .38s var(--ease-out); }
[dir=ltr] .drawer { transform: translateX(-100%); }
/* the sheet: rises from the bottom on phones (from the centre on wide screens) and goes back the way it came */
.sheet-bg { opacity: 0; transition: opacity .22s var(--ease-in); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-bg .sheet { transform: translateY(100%); transition: transform .22s var(--ease-in); }
.sheet-bg.in { opacity: 1; transition: opacity .3s var(--ease-out); }
.sheet-bg.in .sheet { transform: none; transition: transform .36s var(--ease-out); }
@media (min-width: 700px) { .sheet-bg .sheet { transform: scale(.96); opacity: 0; transition: transform .2s var(--ease-in), opacity .2s; }
	.sheet-bg.in .sheet { transform: none; opacity: 1; transition: transform .32s var(--ease-out), opacity .2s; } }
.sheet::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: -8px auto 12px; }
@media (min-width: 700px) { .sheet::before { display: none; } }
/* the open list grows from its button */
.mp-panel { transform-origin: top center; transition: opacity .16s, transform var(--dur-2) var(--ease-out); }
@starting-style { .mp-panel { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* FAQ: the + turns into x instead of swapping glyphs */
.prose-card.faq summary::before { transition: transform var(--dur-2) var(--ease-out), background-color .16s; }
.prose-card.faq details[open] summary::before { content: '+'; transform: rotate(45deg); }
/* the loading shimmer moves with transform, not background-position (compositor only) */
.skeleton { position: relative; overflow: hidden; background: var(--tint); animation: none; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 70%, transparent), transparent);
	animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
/* the toast sits above the floating tab bar */
.toast { bottom: calc(96px + env(safe-area-inset-bottom)); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@media (min-width: 960px) { .toast { bottom: 24px; } }
/* a calm change of light and dark */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important; }

/* materials: the app header is a translucent layer - no hard line; a soft edge appears only when content scrolls under it */
.app-head { border-bottom: 0; -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
.app-head::after { content: ''; position: absolute; inset: 100% 0 auto; height: 14px; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent), transparent);
	opacity: 0; transition: opacity var(--dur-2); }
.scrolled .app-head::after { opacity: 1; }
@media (max-width: 959px) { .tabbar { -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); } }
.composer textarea { field-sizing: content; max-height: 140px; }

/* type: tracking by size (tight when large; Hebrew has no capitals, so no positive tracking on small labels) */
.hero-copy h1 { letter-spacing: -.025em; } .ps-copy h1 { letter-spacing: -.02em; } .stage-head h2 { letter-spacing: -.015em; } h2 { letter-spacing: -.005em; }
@media (max-width: 600px) { .hero-copy h1 { letter-spacing: -.015em; } }
@media (max-width: 520px) { .logo.big .lw { letter-spacing: -.01em; } }
.pic-tag { letter-spacing: .01em; } .eyebrow, .stamp, .mp-group, .logo .lt { letter-spacing: .005em; }
.stars { letter-spacing: .1em; }
.tabbar a { font-size: .72rem; line-height: 1.2; white-space: nowrap; padding-inline: 1px; min-width: 0; } .tabbar a .tab-l { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ================= v0.9.1 (6/11) business shop window: photos, clips, links, AI at sign-up ================= */
.ob-media { display: grid; gap: var(--s5); }
.ob-sub { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--tint); border: 1px solid var(--line); }
.ob-sub h3 { margin: 0; display: flex; align-items: center; gap: var(--s2); font-size: 1.05rem; } .ob-sub h3 .ico { color: var(--rose); }
.ob-sub > p { margin: 0; }
.ob-sub.ai-box { margin-top: 0; }
.ob-pics:empty { display: none; }
.ob-pics { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ob-pics img, .ob-pics video, .gallery .clip video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-s); background: #000; display: block; }
.gallery .clip video { border-radius: 50% 50% var(--r-s) var(--r-s) / 30% 30% var(--r-s) var(--r-s); }
.ob-pics .pic { animation: rise var(--dur-3) var(--ease-out) both; }
.pic-rm { position: absolute; top: 6px; inset-inline-end: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center;
	background: rgba(20, 10, 34, .72); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: transform var(--dur-2) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pic-rm::before { content: ''; position: absolute; inset: -6px; }
.pic-rm .ico { width: 16px; height: 16px; } .pic-rm:active { transform: scale(.9); transition-duration: 80ms; }
.ob-pics figcaption { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
.clip-wait { aspect-ratio: 3 / 4; border-radius: var(--r-s); display: grid; place-items: center; padding: var(--s3); text-align: center; font-size: .86rem;
	background: var(--tint); border: 2px dashed var(--line-2); color: var(--ink-2); }
.link-row { gap: var(--s2); align-items: end; flex-wrap: wrap; } .link-row .grow { flex: 1 1 220px; display: grid; gap: 6px; font-weight: 500; font-size: .93rem; }
.link-row .btn { min-height: 44px; }
.ob-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.ob-links li { min-width: 0; display: flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); min-height: 44px; }
.ob-links li > span, .ob-links li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.ob-links .ico { color: var(--rose); flex: none; }
.pagefields { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pagefield { display: grid; gap: 6px; font-weight: 500; font-size: .93rem; }
.pf-l { display: inline-flex; align-items: center; gap: 6px; } .pf-l .ico { width: 18px; height: 18px; color: var(--violet); }
.pagefield input::placeholder { text-align: end; }
/* the public page: the business's own pages as pill buttons under the facts */
.pagelinks { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.pagelink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem;
	color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line-2);
	transition: transform var(--dur-2) var(--ease-out), background-color .16s; -webkit-tap-highlight-color: transparent; }
.pagelink:active { transform: scale(.96); transition-duration: 80ms; }
.pagelink .ico { width: 18px; height: 18px; } .pagelink.instagram .ico { color: #c13584; } .pagelink.facebook .ico { color: #1877f2; } .pagelink.website .ico { color: var(--violet); }
:root[data-theme=dark] .pagelink.facebook .ico { color: #5b9dff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .pagelink.facebook .ico { color: #5b9dff; } }
@media (prefers-reduced-motion: reduce) { .ob-pics .pic { animation: none; } .pic-rm:active, .pagelink:active { transform: none; } }
/* the floating tab bar always fits the screen: columns may shrink below their text (the label ellipsises) */
.tabbar { grid-auto-columns: minmax(0, 1fr); } .tabbar a { min-width: 0; }
/* the app header fits a 320-420px phone with a long business name: the hat button gives way (ellipsis), the slogan steps aside */
.app-head .row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.app-head .start { min-width: 0; max-width: 100%; } .app-head .end { min-width: 0; }
.app-head .hatbtn { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
@media (max-width: 420px) { .app-head .wrap.row { gap: 8px; padding-inline: 12px; } .app-head .logo .lt { display: none; } }

/* ================= v1.0 (6/11) "Apple luxe" - owner-approved board https://claude.ai/artifact/BJ1o3p2uynWapTdM5sZc2g =================
   Neutral surfaces and ONE accent (rose). The festive colours live only in the photos and the balloon-arch mark.
   Heebo for all text (Fredoka only in the wordmark). Large tight headlines, generous air, translucent bars,
   radii by size: media 28 / cards 22 / grouped lists 14 / fields 12 / pills. This layer overrides the older stage layers. */
:root {
	--bg: #ffffff; --paper: #ffffff; --tint: #f5f5f7; --group: #f2f2f7; --fill: rgba(118, 118, 128, .12);
	--ink: #1d1d1f; --ink-2: #636366; --ink-3: #6e6e73; --line: #e8e8ed; --line-2: #d2d2d7; --plum: #1d1d1f; --plum-2: #1d1d1f; --deep: #1d1d1f; --grape: #1d1d1f;
	--rose: #d81b6a; --rose-2: #b8135a; --rose-solid: #d81b6a; --rose-tint: rgba(216, 27, 106, .1); --violet: #6d28d9; --violet-soft: #f1ebfd;
	--blush: #ffd3e4; --blush-soft: #fdeaf2; --gold: #c76a00; --gold-soft: #fff4e0; --gold-line: #d2d2d7; --sage: #1a7f37; --sage-soft: #e3f7e9; --mint: #1a7f37; --sky: #0a6cd6;
	--ok: #1a7f37; --ok-soft: #e3f7e9; --warn: #8a5300; --warn-soft: #fff4e0; --bad: #d70015; --bad-soft: #ffeaec; --info: #5e5ce6; --info-soft: #efeffd;
	--star: #ff9f0a; --shadow: rgba(0, 0, 0, .16); --focus: #b8135a; --cta-grad: #d81b6a;
	--text: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --serif: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --brand: 'Fredoka', 'Heebo', sans-serif;
	--r-s: 12px; --r: 22px; --r-l: 28px;
}
:root[data-theme=dark] {
	--bg: #000000; --paper: #1c1c1e; --tint: #1c1c1e; --group: #000000; --fill: rgba(118, 118, 128, .24);
	--ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #98989d; --line: #38383a; --line-2: #48484a; --plum: #f5f5f7; --plum-2: #ffffff; --deep: #1c1c1e; --grape: #1c1c1e;
	--rose: #ff4d8d; --rose-2: #ff6fa3; --rose-solid: #db1f6c; --rose-tint: rgba(255, 77, 141, .16); --violet: #b794ff; --violet-soft: #2c2340;
	--blush: #5a1c38; --blush-soft: #3a1528; --gold: #ffb340; --gold-soft: #3a2a10; --gold-line: #48484a; --sage: #30d158; --sage-soft: rgba(48, 209, 88, .16); --mint: #30d158; --sky: #64a8ff;
	--ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .14); --bad: #ff6961; --bad-soft: rgba(255, 105, 97, .16); --info: #a5a4ff; --info-soft: rgba(94, 92, 230, .2);
	--star: #ff9f0a; --shadow: rgba(0, 0, 0, .6); --focus: #ff6fa3; --cta-grad: #db1f6c;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
	--bg: #000000; --paper: #1c1c1e; --tint: #1c1c1e; --group: #000000; --fill: rgba(118, 118, 128, .24);
	--ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #98989d; --line: #38383a; --line-2: #48484a; --plum: #f5f5f7; --plum-2: #ffffff; --deep: #1c1c1e; --grape: #1c1c1e;
	--rose: #ff4d8d; --rose-2: #ff6fa3; --rose-solid: #db1f6c; --rose-tint: rgba(255, 77, 141, .16); --violet: #b794ff; --violet-soft: #2c2340;
	--blush: #5a1c38; --blush-soft: #3a1528; --gold: #ffb340; --gold-soft: #3a2a10; --gold-line: #48484a; --sage: #30d158; --sage-soft: rgba(48, 209, 88, .16); --mint: #30d158; --sky: #64a8ff;
	--ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .14); --bad: #ff6961; --bad-soft: rgba(255, 105, 97, .16); --info: #a5a4ff; --info-soft: rgba(94, 92, 230, .2);
	--star: #ff9f0a; --shadow: rgba(0, 0, 0, .6); --focus: #ff6fa3; --cta-grad: #db1f6c;
	}
}

/* type: one family, hierarchy from size + weight + tracking */
body { font: 400 1.0625rem/1.55 var(--text); letter-spacing: 0; }
h1 { font: 800 clamp(2.2rem, 6vw, 3.4rem)/1.06 var(--text); letter-spacing: -.03em; }
h2 { font: 800 clamp(1.6rem, 3.6vw, 2.1rem)/1.12 var(--text); letter-spacing: -.025em; }
h3 { font: 700 1.12rem/1.35 var(--text); letter-spacing: -.01em; }
a { color: var(--rose-2); text-decoration: none; } a:hover { color: var(--rose-2); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
::selection { background: var(--blush); color: inherit; }
.lead { color: var(--ink-2); font-size: 1.2rem; line-height: 1.45; }
.muted { color: var(--ink-2); }
.divider, .head-c .divider { display: none; }
.spark { color: var(--ink-3); }
.stars { color: var(--star); }
.eyebrow, .hero-copy .eyebrow, .ps-copy .eyebrow, .s-how .eyebrow, .s-trust .eyebrow, .t-grape .ps-copy .eyebrow { background: none; border: 0; padding: 0; border-radius: 0;
	color: var(--ink-2); font: 500 1rem/1.3 var(--text); letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.eyebrow .spark { display: none; }

/* buttons: solid rose pill (primary), ink pill (strong secondary), tinted fill (secondary) */
.btn { border: 0; background: var(--fill); color: var(--ink); font: 500 1rem/1 var(--text); min-height: 44px; padding: 0 1.25em; box-shadow: none; }
.btn:hover { border: 0; background: color-mix(in srgb, var(--fill) 100%, var(--ink) 6%); color: var(--ink); text-decoration: none; }
.btn.primary, .btn.accent, .site-head .acts .btn.primary, .pl-go.btn, .ft-cta .btn.primary, .planner .pl-go.btn.primary, .site-foot .ft-cta .btn.primary {
	background: var(--rose-solid); border: 0; color: #fff; box-shadow: none; }
.btn.primary:hover, .btn.accent:hover { background: #c2185f; color: #fff; }
.btn.primary.big { box-shadow: none; }
.btn.big { min-height: 52px; font-size: 1.0625rem; padding: 0 1.75em; }
.btn.small { min-height: 44px; font-size: .9375rem; }
.btn.dark, .btn.sun, .btn.light { background: var(--ink); color: var(--bg); border: 0; } .btn.dark:hover, .btn.sun:hover, .btn.light:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--rose-2); text-decoration: none; }
.btn.ghost-light { background: var(--fill); color: var(--ink); border: 0; } .btn.ghost-light:hover { background: var(--fill); color: var(--ink); }
.chip { border: 0; background: var(--fill); font-weight: 500; } .chip:hover { border: 0; background: color-mix(in srgb, var(--fill) 100%, var(--ink) 6%); }
.chip[aria-pressed=true] { background: var(--rose-solid); color: #fff; } .chip .ico { color: currentColor; }
.pill { font-weight: 500; } .pill.new { background: var(--gold-soft); color: var(--warn); }

/* fields: filled, no borders (iOS) */
input, select, textarea { border: 0; background: var(--fill); border-radius: 12px; font: 400 1.0625rem var(--text); color: var(--ink); }
input:hover, select:hover, textarea:hover { border: 0; }
input:focus, select:focus, textarea:focus { border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 35%, transparent); background: var(--fill); }
input[type=checkbox], input[type=radio] { background: none; }
label { font-weight: 500; color: var(--ink); }
fieldset { border: 0; background: var(--tint); border-radius: 14px; }
.mp-btn { border: 0; background: var(--fill); border-radius: 12px; } .mp-btn:hover { border: 0; } .mpick.open .mp-btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 35%, transparent); }
.mp-count { background: var(--rose-tint); color: var(--rose-2); }

/* ---------- the top bar: a thin translucent layer across the page ---------- */
.site-head { position: sticky; top: 0; padding: 0; background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.envbar + .skip + .site-head, .envbar ~ .site-head { padding-top: 0; }
.site-head .bar { min-height: 60px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; border-radius: 0; background: none; box-shadow: none;
	-webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 16px; }
.site-head .bar::before { content: none; }
.logo .lw, .logo.big .lw, .app-head .logo .lw, .ft-brand .logo .lw, .drawer .logo .lw { font: 600 1.55rem/1 var(--brand); letter-spacing: -.01em; background: none; color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; padding: 0; }
.logo.big .lm, .logo .lm { width: 30px; height: 33px; filter: none; }
.site-head .logo .lt, .site-head .logo.big .lt, .app-head .logo .lt { display: none !important; }
.logo .lt { font: 500 .8rem/1.2 var(--text); color: var(--ink-2); } .logo .lt::before { content: none; }
.site-head .links { gap: 4px; justify-content: center; }
.site-head .links a.nl, .site-head .links a.nl:hover, .site-head .links a.nl[aria-current=page] { background: none; border: 0; box-shadow: none; transform: none; min-height: 44px; padding: 0 14px;
	border-radius: 999px; color: var(--ink); font: 400 .9375rem/1 var(--text); }
.site-head .links a.nl::before { content: none !important; }
.site-head .links a.nl:hover { color: var(--rose-2); text-decoration: none; }
.site-head .links a.nl[aria-current=page] { font-weight: 600; }
.site-head .acts { gap: 8px; }
.site-head .acts .login { box-shadow: none; min-height: 44px; padding: 0 10px; font-weight: 400; color: var(--ink); } .site-head .acts .login:hover { box-shadow: none; color: var(--rose-2); text-decoration: none; }
.site-head .acts .login .ico { display: none; }
.site-head .acts .btn.primary { min-height: 38px; border-radius: 999px; padding: 0 18px; font-size: .9375rem; }
.site-head .acts .btn.primary .ico, .site-head .acts .cta-top .ico { display: none; }
.site-head .menubtn, .site-head .themebtn { width: 44px !important; height: 44px !important; border-radius: 999px; box-shadow: none; background: transparent; }
.site-head .menubtn:hover, .site-head .themebtn:hover { box-shadow: none; background: var(--fill); }
@media (max-width: 860px) { .site-head .bar { min-height: 56px; padding: 0 8px; } .logo.big .lw, .logo .lw { font-size: 1.4rem; } }
@media (max-width: 520px) { .site-head .acts .btn.primary { padding: 0 14px; } }

/* the side menu: a plain white sheet, the current page tinted */
.drawer { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px var(--shadow); }
.drawer nav a { border-radius: 12px; color: var(--ink); font-weight: 400; } .drawer nav a .ico { color: var(--ink-3); }
.drawer nav a[aria-current=page] { background: var(--rose-tint); box-shadow: none; color: var(--rose-2); font-weight: 600; } .drawer nav a[aria-current=page] .ico { color: var(--rose-2); }
.drawer h4, .drawer .dsec { color: var(--ink-2); font: 500 .8125rem var(--text); }

/* ---------- home ---------- */
.lx-hero { text-align: center; padding: clamp(56px, 10vw, 112px) 0 0; }
.lx-hero h1 { margin: 0; font: 800 clamp(3rem, 9vw, 5.6rem)/1.02 var(--text); letter-spacing: -.035em; }
.lx-lead { margin: 22px auto 0; max-width: 36ch; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.38; color: var(--ink-2); letter-spacing: -.01em; }
.lx-hero .planner { max-width: 1000px; margin: clamp(32px, 5vw, 52px) auto 0; padding: 0; background: none; box-shadow: none; display: grid; gap: 14px; }
.lx-hero .pl-bar { grid-template-columns: 1.2fr 1fr .8fr 1.2fr auto; align-items: center; padding: 8px; border-radius: 999px; background: var(--paper);
	box-shadow: 0 0 0 1px var(--line), 0 18px 50px -22px var(--shadow); text-align: start; }
.lx-hero .planner.has-other .pl-bar { grid-template-columns: 1fr 1fr 1fr .8fr 1fr auto; }
.lx-hero .pl-f { min-height: 60px; padding: 8px 22px; border-radius: 999px; background: transparent; box-shadow: none; }
.lx-hero .pl-f:hover { background: var(--tint); }
.lx-hero .pl-f:focus-within, .lx-hero .pl-f:has(select:focus-visible) { background: var(--tint); box-shadow: inset 0 0 0 2px var(--rose); }
.lx-hero .pl-f + .pl-f::before { background: var(--line); top: 26%; bottom: 26%; }
.pl-l { font: 500 .8125rem/1.2 var(--text); color: var(--ink-2); }
.pl-val, .pl-f select, .pl-f input, .pl-range input { font: 500 1.0625rem/1.3 var(--text); color: var(--ink); }
.pl-sel::after { border-color: var(--ink-3); }
.pl-range input { border-bottom: 1.5px solid var(--line-2) !important; }
.lx-hero .pl-go.btn { min-height: 56px; min-width: 56px; padding: 0 22px; border-radius: 999px; margin: 0; font-size: 1rem; }
.lx-hero .pl-go .ico { width: 20px; height: 20px; }
.lx-hero .pl-notes { display: block; margin: 0; font-size: .9375rem; color: var(--ink-2); }
.lx-photo { margin: clamp(36px, 6vw, 64px) auto 0; max-width: 1200px; border-radius: 36px; overflow: hidden; background: var(--tint); aspect-ratio: 2 / 1; }
.lx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
	.lx-hero h1, .lx-lead, .lx-hero .planner { animation: rise .8s var(--ease-out) both; } .lx-lead { animation-delay: .06s; } .lx-hero .planner { animation-delay: .12s; }
	.lx-photo img { animation: settle 1.4s var(--ease-out) both; }
}
@media (max-width: 960px) {
	.lx-hero .pl-bar, .lx-hero .planner.has-other .pl-bar { grid-template-columns: 1fr 1fr; border-radius: 26px; padding: 8px; gap: 0; }
	.lx-hero .pl-f { border-radius: 16px; background: none; box-shadow: none; } .lx-hero .pl-f + .pl-f::before { display: none; }
	.lx-hero .pl-type, .lx-hero .pl-other, .lx-hero .pl-city { grid-column: 1 / -1; }
	.lx-hero .pl-f:not(:last-of-type) { border-bottom: 1px solid var(--line); border-radius: 0; }
	.lx-hero .pl-go.btn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
}
@media (max-width: 600px) { .lx-photo { border-radius: 28px; aspect-ratio: 4 / 3; } }

.lx-sec { padding: clamp(72px, 10vw, 120px) 0 0; }
.lx-last { padding-bottom: clamp(72px, 10vw, 120px); }
.lx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.lx-head h2 { margin: 0; font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.03em; }
.lx-head a { font-size: 1.0625rem; white-space: nowrap; }
.lx-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
	scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.lx-shelf::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .lx-shelf { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
.lx-tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; scroll-snap-align: start; background: var(--tint); color: #fff; isolation: isolate; }
.lx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.lx-tile::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .58)); z-index: 0; pointer-events: none; }
.lx-tn { position: absolute; inset-inline: 22px; bottom: 20px; z-index: 1; font: 700 1.45rem/1.15 var(--text); letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.lx-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); } .lx-ph .ico { width: 48px; height: 48px; }
.lx-tile:hover { text-decoration: none; color: #fff; }
@media (hover: hover) and (pointer: fine) { .lx-tile:hover img { transform: scale(1.04); } }
.lx-tile:active { transform: scale(.98); transition: transform 80ms; }
.lx-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.lx-panel { background: var(--tint); border-radius: 36px; padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); }
.lx-c { text-align: center; margin-inline: auto; }
.lx-panel h2 { margin: 0 0 clamp(28px, 4vw, 48px); font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.03em; }
.lx-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 820px) { .lx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.lx-steps li { counter-increment: s; background: var(--paper); border-radius: 22px; padding: 28px; display: grid; gap: 8px; align-content: start; }
.lx-steps li::before { content: counter(s); font: 700 1rem/1 var(--text); color: var(--rose-2); }
.lx-steps b { font: 700 1.4rem/1.25 var(--text); letter-spacing: -.02em; }
.lx-steps span { color: var(--ink-2); line-height: 1.5; }
.lx-panel .lx-c:last-child { margin: clamp(28px, 4vw, 44px) 0 0; max-width: none; }

.lx-duo { display: grid; gap: 20px; } @media (min-width: 860px) { .lx-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-card { background: var(--tint); border-radius: 36px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 14px; align-content: end; min-height: 320px; }
.lx-card h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.03em; }
.lx-card p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.lx-card .btn { justify-self: start; margin-top: 6px; }
.lx-card.dark { background: #1d1d1f; color: #f5f5f7; } .lx-card.dark h2 { color: #f5f5f7; } .lx-card.dark p { color: #a1a1a6; }
:root[data-theme=dark] .lx-card.dark { background: #1c1c1e; box-shadow: inset 0 0 0 1px #38383a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .lx-card.dark { background: #1c1c1e; box-shadow: inset 0 0 0 1px #38383a; } }
.lx-card.dark { --ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); }
.lx-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .875rem; }
.lx-badge .ico { width: 16px; height: 16px; }
.lx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lx-checks li { display: flex; gap: 10px; align-items: center; font-weight: 500; } .lx-checks .ico { width: 20px; height: 20px; color: var(--ok); }

.lx-join { display: grid; border-radius: 36px; overflow: hidden; background: var(--tint); }
@media (min-width: 860px) { .lx-join { grid-template-columns: 1.1fr 1fr; } }
.lx-join-t { padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px); display: grid; gap: 14px; align-content: center; }
.lx-join h2 { margin: 0; font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.03em; } .lx-join p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.lx-join p:last-child { margin-top: 10px; }
.lx-join img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* ---------- inner pages: the page title on the page itself, the picture in a plain rounded frame ---------- */
.page-stage { padding-top: clamp(28px, 5vw, 56px); }
.stage-box { border-radius: 36px; }
.ps-box, .t-grape .ps-box { background: var(--tint); color: var(--ink); }
.ps-box::after { content: none; }
.ps-copy h1, .t-grape .ps-copy h1 { color: var(--ink); font: 800 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--text); letter-spacing: -.03em; }
.ps-copy .lead { color: var(--ink-2); }
.t-grape .ps-copy .small, .t-grape .ps-copy .muted { color: var(--ink-2); }
.t-grape .ps-rating .rating { color: var(--ink); }
.t-grape .facts li { background: var(--paper); border: 0; color: var(--ink); } .t-grape .facts .ico, .facts .ico { color: var(--ink-3); }
.t-grape .pill.new { background: var(--gold-soft); color: var(--warn); }
.ps-pic, .t-grape .ps-pic { padding: 0; background: none; border-radius: 28px; box-shadow: none; aspect-ratio: 4 / 5; }
.ps-pic::after { content: none; }
.ps-pic img { border-radius: 28px; }
.ps-copy .hint { background: var(--paper); }
.stage { padding-top: clamp(40px, 6vw, 72px); }
.stage-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.03em; }
/* category cards elsewhere (categories page): photo tiles like the home shelf */
.cat, .cat.c1, .cat.c2, .cat.c3, .cat.c4, .cat.c5 { padding: 0; gap: 0; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); text-align: start; }
.cat:hover { transform: none; box-shadow: 0 0 0 1px var(--line-2); text-decoration: none; }
.cat-pic { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; background: var(--tint); color: var(--ink-3); }
.cat-pic img { padding: 0; border-radius: 0; }
.cat-name { justify-content: flex-start; font: 700 1.05rem/1.25 var(--text); padding: 14px 16px 4px; } .cat-name::before { content: none; }
.cat-about { padding: 0 16px 16px; }
/* filters, results, vendor cards */
.filters, .filters.card-f { border: 0; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px var(--shadow); }
.filters label { color: var(--ink-2); font-weight: 500; }
.grid .vcard, .grid .vcard:nth-child(n) { border: 0; border-radius: 22px; padding: 0; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.grid .vcard:hover { transform: none; box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -28px var(--shadow); }
.grid .vcard img, .grid .vcard .ph { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.vcard .ph { background: var(--tint); color: var(--ink-3); }
.vcard .body { text-align: start; padding: 16px 18px 18px; } .vcard .body p { margin-inline: 0; }
.grid .vcard h3, .vcard h3 { font: 700 1.2rem/1.25 var(--text); letter-spacing: -.015em; }
.grid .vcard .price { color: var(--ink); font-weight: 700; }
.rating .spark { display: none; }
/* vendor page body */
.vbox { background: var(--tint); box-shadow: none; border-radius: 28px; }
.vbox > h2 { font: 800 1.6rem/1.2 var(--text); letter-spacing: -.02em; } .vbox > h2::before, .vmain .vbox > h2::before { content: none; }
.vbox .svc-block { background: var(--paper); }
aside .panel { background: var(--tint); box-shadow: none; border-radius: 22px; } aside .panel::before, aside .panel:nth-child(n)::before { content: none; }
aside .panel h2 { font: 700 1.15rem/1.3 var(--text); }
.gallery img, .gallery .clip video { border-radius: 18px; }
.pic-tag { background: rgba(0, 0, 0, .55); color: #fff; border: 0; letter-spacing: .02em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pagelink { background: var(--paper); border: 0; box-shadow: 0 0 0 1px var(--line); }
/* text pages and the FAQ */
.prose-card { background: var(--paper); box-shadow: none; border-radius: 0; padding-inline: 0; }
.prose-card h2 { font: 800 1.5rem/1.25 var(--text); letter-spacing: -.02em; }
.prose-card .contact-list { background: var(--tint); box-shadow: none; }
.prose-card.faq details { background: var(--tint); box-shadow: none; border-radius: 18px; }
.prose-card.faq details[open] { box-shadow: none; }
.prose-card.faq summary { font: 600 1.125rem/1.35 var(--text); }
.prose-card.faq summary::before { background: var(--paper); color: var(--ink); border-radius: 999px; }
.prose-card.faq details[open] summary::before { background: var(--rose-solid); color: #fff; }
details { border: 0; background: var(--tint); } summary::marker { color: var(--ink-3); }
.page-head { background: none; }

/* ---------- footer: quiet, on mist ---------- */
.site-foot, :root[data-theme=dark] .site-foot { background: var(--tint); color: var(--ink-2); border-radius: 0; border-top: 1px solid var(--line); }
.site-foot::before { content: none; }
.ft-grid { padding-top: 48px; padding-bottom: 28px; }
.ft-brand .logo .lw { font-size: 1.6rem; color: var(--ink); } .ft-brand .logo .lm { width: 30px; height: 33px; }
.site-foot .logo .lt { color: var(--ink-2); font-size: .875rem; display: block !important; }
.ft-brand .tag { color: var(--ink); font: 600 1.05rem/1.4 var(--text); }
.ft-brand .ft-line { color: var(--ink-2); }
.ft-col h2 { color: var(--ink); font: 600 .9375rem/1.2 var(--text); margin: 4px 0 12px; } .ft-col h2::before { content: none; }
.ft-col a, .ft-col a:hover { color: var(--ink-2); background: none; font-size: .875rem; padding: 6px 0; } .ft-col a:hover { color: var(--ink); text-decoration: underline; }
.ft-col a.more { color: var(--rose-2); }
.ft-bottom { border-top: 1px solid var(--line); color: var(--ink-2); font-size: .8125rem; } .ft-bottom .spark { color: var(--ink-3); }
.ft-top, .ft-top:hover { background: var(--fill); color: var(--ink); border: 0; }
.site-foot :focus-visible { outline-color: var(--focus); }

/* ---------- the app (in the browser): grouped surfaces like iOS ---------- */
body[data-hat], body[data-hat=vendor], body[data-hat=admin], body[data-hat=support] { background: var(--group); --t: var(--rose); --t2: var(--rose); }
body[data-hat=vendor] { --t: var(--violet); --t2: var(--violet); }
body[data-hat=admin], body[data-hat=support] { --t: #5e5ce6; --t2: #5e5ce6; }
.app-head { background: color-mix(in srgb, var(--group) 78%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 0; }
.hatbtn { border: 0; box-shadow: none; background: var(--fill); font-weight: 500; }
#view > h1:first-child, #view > .back + h1, #view > .head-row:first-child, #view > .back + .head-row,
body[data-hat=admin] #view > h1:first-child, body[data-hat=support] #view > h1:first-child, body[data-hat=admin] #view > .head-row:first-child {
	background: none; box-shadow: none; padding: 6px 4px 0; border-radius: 0; text-align: start; color: var(--ink); overflow: visible; }
#view > h1:first-child, #view > .back + h1, #view > .head-row:first-child h1, #view > .back + .head-row h1, body[data-hat=admin] #view > .head-row:first-child h1 {
	font: 800 clamp(1.9rem, 6vw, 2.25rem)/1.12 var(--text); letter-spacing: -.025em; color: var(--ink); }
#view > .head-row:first-child, #view > .back + .head-row { justify-items: start; }
#view > h2 { font: 700 1.375rem/1.25 var(--text); letter-spacing: -.015em; text-align: start; }
.card, .card:nth-of-type(n) { border: 0; border-radius: 22px; box-shadow: none; background: var(--paper); }
.card > h2:first-child::before, .card:nth-of-type(n) > h2:first-child::before { content: none; }
.card h2 { font: 700 1.25rem/1.3 var(--text); letter-spacing: -.015em; }
.card.flat { background: var(--tint); }
.list { border: 0; border-radius: 14px; box-shadow: none; background: var(--paper); }
.item { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--line-2); } .item:last-child { box-shadow: none; }
button.item { border: 0; }
a.item:hover, button.item:hover { background: var(--tint); }
a.item::after { border-color: var(--ink-3); opacity: .5; }
.item .t { font: 500 1.0625rem/1.35 var(--text); }
.qcard { border: 0; border-radius: 22px; box-shadow: none; } .qcard::before { content: none; }
.qcard.fav { box-shadow: inset 0 0 0 2px var(--star); }
.qhead h3 { font: 700 1.3rem/1.3 var(--text); }
.empty { background: var(--paper); outline: 0; border-radius: 22px; } .empty::before { background: var(--ink-3); }
.stat-v { font: 800 2rem/1.1 var(--text); letter-spacing: -.02em; }
.stats { border: 0; border-radius: 22px; }
.stepper span.on, .progress li.now { background: var(--rose-solid); }
.msg { border: 0; background: var(--paper); }
.msg.mine, :root .msg.mine { background: var(--rose-solid); color: #fff; }
.msg.sys { border: 0; background: var(--fill); }
.composer { border-top: 0; background: color-mix(in srgb, var(--group) 80%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.composer textarea { border-radius: 22px; }
.assist { background: #1d1d1f; color: #f5f5f7; border-radius: 22px; } .assist b { font: 700 1.3rem var(--text); }
.assist.sugs, .assist.light { background: var(--paper); border: 0; }
.login { border-radius: 28px; } .login .crest { color: var(--ink-3); }
.sheet h2 { font: 700 1.375rem var(--text); letter-spacing: -.015em; }
.toast { background: #1d1d1f; color: #f5f5f7; }
:root[data-theme=dark] .toast { background: #2c2c2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .toast { background: #2c2c2e; } }
.side a { font-weight: 400; } .side a .ico { color: var(--ink-3); }
.side a[aria-current=page] { background: color-mix(in srgb, var(--t) 12%, var(--paper)); color: var(--ink); box-shadow: none; font-weight: 600; }
.side a[aria-current=page] .ico { color: var(--t); }
@media (max-width: 959px) {
	.tabbar { background: color-mix(in srgb, var(--paper) 78%, transparent); box-shadow: 0 10px 30px -10px var(--shadow), inset 0 0 0 .5px color-mix(in srgb, var(--ink) 10%, transparent);
		-webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px); border-radius: 32px; }
	.tabbar a { border-radius: 26px; color: var(--ink-2); }
	.tabbar a[aria-current=page], body[data-hat=admin] .tabbar a[aria-current=page], body[data-hat=support] .tabbar a[aria-current=page] {
		background: color-mix(in srgb, var(--t) 12%, transparent); color: var(--t); box-shadow: none; }
	.tabbar a[aria-current=page] .ico { color: var(--t); }
}
body[data-hat=customer] .tabbar a[aria-current=page], body[data-hat=customer] .side a[aria-current=page] .ico { color: var(--rose-2); }
.ob-step > h2 .ob-n, .ob-n { background: var(--ink); color: var(--bg); }
.ob-sub { background: var(--tint); border: 0; }
.stamp { font-weight: 700; }

/* the search bar: every value reads the same way (no grey boxes inside the capsule); numbers keep a thin underline */
.lx-hero .pl-f input { background: transparent; border-radius: 0; box-shadow: none; padding: 0; min-height: 30px; }
.lx-hero .pl-n input { border-bottom: 1.5px solid var(--line-2); width: 4ch; } .lx-hero .pl-n input:focus, .lx-hero .pl-range input:focus { border-bottom-color: var(--rose) !important; box-shadow: none; }
@media (max-width: 600px) { .lx-card { min-height: 0; } }
/* the app header: every round button the same (transparent, 44pt, never squeezed); only the hat name gives way */
.app-head .menubtn, .app-head .themebtn, .app-head .iconbtn { flex: none; width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink); }
.app-head .menubtn:hover, .app-head .themebtn:hover, .app-head .iconbtn:hover { background: var(--fill); }

/* free to join: said loudly where a business decides (sign-up, the business page, the home invitation) */
.free-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 700 .9375rem/1 var(--text); justify-self: start; width: fit-content; }
.free-badge .ico { width: 16px; height: 16px; }
.free-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.free-list li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.free-list li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.free-list li .ico { display: none; }
.free-hero { display: grid; gap: 14px; background: var(--tint); border-radius: 28px; padding: clamp(24px, 5vw, 44px); margin-bottom: 28px; }
.free-hero h2 { margin: 0 !important; font-size: clamp(1.8rem, 4.4vw, 2.6rem) !important; letter-spacing: -.03em; }
.free-hero p { margin: 0; color: var(--ink-2); font-size: 1.125rem; }
.free-hero p:last-child { margin-top: 6px; }
.ob-free { display: grid; gap: 12px; } .ob-free h2 { margin: 0; font: 800 clamp(1.5rem, 5vw, 1.9rem)/1.15 var(--text); letter-spacing: -.025em; }
.ob-free p { margin: 0; color: var(--ink-2); }
.lx-join .free-badge { margin-bottom: 2px; }
.lx-more { margin-inline-start: 18px; font-size: 1.0625rem; }
/* five tabs on a 360-390px phone: the longest label ("האירועים שלי") fits on one line */
@media (max-width: 959px) { .tabbar a { padding-inline: 0; } .tabbar a .tab-l { font-size: .75rem; letter-spacing: -.01em; } }

/* ================= v1.0.1 (6/11) owner: Hebrew reads from the right - text blocks start at the right edge, never centred;
   the light/dark switch is in the top bar at every screen size (on phones it had been moved into the menu only) ================= */
.lx-hero, .lx-c, .lx-panel h2, .lx-head, .stage-head, .s-trust .stage-head, .head-c, .ps-box, .ps-copy, .ps-box.has-pic .ps-copy, .page-head, .text h1, .wiz-head,
.qhead, .s-join .stage-box, .vendor-stage .cta, .vendor-head .cta, .steps li, .s-how .steps li, .trust, .login form, .head-row, .assist, .stat { text-align: start; }
.stage-head, .head-c, .ps-copy, .ps-box, .qhead, .head-row, .vendor-stage .cta, .vendor-head .cta, .steps li, .stat { justify-items: start; }
.stage-head, .ps-copy { margin-inline: 0; }
.lx-lead, .head-c p, .page-head p, .page-head .lead, .trust p, .assist p, .assist .muted, .wiz-head p { margin-inline: 0; }
.lx-hero .planner, .lx-hero .pl-notes { margin-inline: 0; }
.lx-c:last-child, .how-go, .ps-copy .btns, .page-head .btns, .assist .btns, .empty .btns { justify-content: flex-start; }
.facts, .chips { justify-content: flex-start; }
.qcard > .pill, .qcard > span.muted, .qcard .total { justify-self: start; text-align: start; }
.site-head .acts .themebtn, .drawer .dh .themebtn { display: inline-grid !important; place-items: center; }
.drawer .dtheme { display: none !important; }
/* dark: a card on a mist panel is one step lighter (#2C2C2E), so it never melts into the panel */
:root[data-theme=dark] .lx-steps li, :root[data-theme=dark] .s-how .steps li, :root[data-theme=dark] .vbox .svc-block { background: #2c2c2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .lx-steps li, :root:not([data-theme=light]) .s-how .steps li, :root:not([data-theme=light]) .vbox .svc-block { background: #2c2c2e; } }

/* ================= v1.1 (7/11) colour polish - owner-approved board frame "ColorPolish" =================
   ONE accent: deep wine #9D174D, for the single most important action on a screen and a soft wine tint for "selected".
   Everything else is neutral (ink / mist / white). Customers and businesses share the same colour (no violet hat).
   Green only for small status tags; red only for errors; orange only for rating stars. Links are ink, underlined.
   Every button sits on a stage: mist plate (primary), white with a hairline (secondary), dark plate (strong),
   a translucent bar at the bottom of a form. */
:root {
	--rose: #9d174d; --rose-2: #9d174d; --rose-solid: #9d174d; --rose-hover: #86113f; --rose-tint: #fbeef3; --blush: #f6d5e2; --blush-soft: #fbeef3;
	--violet: #9d174d; --violet-soft: #fbeef3; --info: #1d1d1f; --info-soft: rgba(118, 118, 128, .12); --sky: #1d1d1f;
	--gold: #636366; --gold-soft: rgba(118, 118, 128, .12); --warn: #48484a; --warn-soft: rgba(118, 118, 128, .12);
	--focus: #9d174d; --cta-grad: #9d174d; --link-line: rgba(29, 29, 31, .35);
}
:root[data-theme=dark] {
	--rose: #f39bbf; --rose-2: #f39bbf; --rose-solid: #b0205c; --rose-hover: #c22a68; --rose-tint: rgba(243, 155, 191, .14); --blush: #4a1a30; --blush-soft: #2a1520;
	--violet: #f39bbf; --violet-soft: rgba(243, 155, 191, .14); --info: #f5f5f7; --info-soft: rgba(118, 118, 128, .24); --sky: #f5f5f7;
	--gold: #a1a1a6; --gold-soft: rgba(118, 118, 128, .24); --warn: #d1d1d6; --warn-soft: rgba(118, 118, 128, .24);
	--focus: #f39bbf; --cta-grad: #b0205c; --link-line: rgba(245, 245, 247, .4);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
	--rose: #f39bbf; --rose-2: #f39bbf; --rose-solid: #b0205c; --rose-hover: #c22a68; --rose-tint: rgba(243, 155, 191, .14); --blush: #4a1a30; --blush-soft: #2a1520;
	--violet: #f39bbf; --violet-soft: rgba(243, 155, 191, .14); --info: #f5f5f7; --info-soft: rgba(118, 118, 128, .24); --sky: #f5f5f7;
	--gold: #a1a1a6; --gold-soft: rgba(118, 118, 128, .24); --warn: #d1d1d6; --warn-soft: rgba(118, 118, 128, .24);
	--focus: #f39bbf; --cta-grad: #b0205c; --link-line: rgba(245, 245, 247, .4);
	}
}
.btn.primary:hover, .btn.accent:hover, .lx-hero .pl-go.btn:hover { background: var(--rose-hover); color: #fff; }

/* links: ink with a thin underline (the colour is kept for actions) */
a { color: var(--ink); } a:hover { color: var(--ink); }
p a:not(.btn), li a:not(.btn):not(.nl):not(.item), .prose-card a:not(.btn), .muted a, .small a, label a, .hint a, .lx-head a, .lx-more, .ft-col a.more, .ob-free a:not(.btn) {
	color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:not(.btn):hover, .lx-head a:hover, .lx-more:hover, .ft-col a.more:hover { text-decoration-color: currentColor; }
.site-head .links a.nl:hover, .site-head .acts .login:hover { color: var(--ink); background: var(--fill); }
.btn.ghost { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }

/* the top bar and the footer are quiet: their call to action is ink, so the wine is left for the page's own main action */
.site-head .acts .btn.primary, .site-foot .ft-cta .btn.primary { background: var(--ink); color: var(--bg); }
.site-head .acts .btn.primary:hover, .site-foot .ft-cta .btn.primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); color: var(--bg); }

/* stages */
.ob-go { background: var(--tint); border-radius: 26px; padding: 14px; margin: var(--s3) 0 var(--s5); gap: 10px; justify-items: stretch; text-align: center; }
.ob-go .btn { min-width: 0; width: 100%; min-height: 52px; border-radius: 999px; }
.ob-go p { margin: 0; }
.lx-card.dark .btn, .lx-card.dark .btn:hover { background: #fff; color: #1d1d1f; }
.lx-join .btn.dark { background: var(--ink); color: var(--bg); }
.wiz-nav { position: sticky; bottom: 0; z-index: 5; margin: var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: 12px var(--s4) calc(12px + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
	border-top: .5px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 0 0 22px 22px; flex-wrap: nowrap; }
.wiz-nav .btn { flex: 1; min-height: 50px; border-radius: 999px; } .wiz-nav .btn.primary { flex: 2; }
.wiz-nav .btn:not(.primary) { background: var(--tint); }
@media (max-width: 959px) { .wiz-nav { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; margin-inline: 0; margin-bottom: 0; } }

/* selected = a soft wine tint, never a solid block */
.chip[aria-pressed=true] { background: var(--rose-tint); color: var(--rose-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rose-2) 45%, transparent); }
.drawer nav a[aria-current=page] { background: var(--fill); color: var(--ink); } .drawer nav a[aria-current=page] .ico { color: var(--ink); }

/* one colour for both hats; the admin keeps a neutral ink */
body[data-hat=vendor] { --t: var(--rose); --t2: var(--rose); }
body[data-hat=admin], body[data-hat=support] { --t: var(--ink); --t2: var(--ink); }
.tabbar a[aria-current=page], body[data-hat=customer] .tabbar a[aria-current=page] { color: var(--rose-2); }
.lx-steps li::before, .s-how .steps li::before { color: var(--ink-2); }
.pill.new, .t-grape .pill.new { background: var(--fill); color: var(--ink); }
.qcard.fav { box-shadow: inset 0 0 0 2px var(--rose-2); }
.msg.mine, :root .msg.mine { background: var(--rose-solid); }

/* ================= v1.2 (7/11) "a little more alive, every button on a stage" - owner-approved board frame "Alive" =================
   The wine keeps one family: a blush-white wash for panels (instead of grey), a light blush for "selected", thin blush frames,
   and a soft wine glow under the main button. Every button sits in its own frame: round icon buttons and secondary buttons are
   white with a blush frame, the main one is wine with a glow, the header links share one framed capsule. */
:root {
	--tint: #fdf2f6; --group: #f8f1f4; --wash: #fdf2f6; --blush: #fbe7ef; --rose-tint: #fbe7ef; --frame: #ecc8d6; --frame-soft: #f3dde6; --frame-on: #dd93b2;
	--glow: rgba(157, 23, 77, .32); --btn-top: #b01a57; --btn-bot: #9d174d; --lift: 0 1px 2px rgba(157, 23, 77, .08);
}
:root[data-theme=dark] {
	--tint: #1c1c1e; --group: #000000; --wash: #1c1c1e; --blush: rgba(243, 155, 191, .16); --rose-tint: rgba(243, 155, 191, .16);
	--frame: rgba(243, 155, 191, .28); --frame-soft: rgba(243, 155, 191, .16); --frame-on: rgba(243, 155, 191, .55);
	--glow: rgba(194, 42, 104, .5); --btn-top: #c22a68; --btn-bot: #b0205c; --lift: 0 1px 2px rgba(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
	--tint: #1c1c1e; --group: #000000; --wash: #1c1c1e; --blush: rgba(243, 155, 191, .16); --rose-tint: rgba(243, 155, 191, .16);
	--frame: rgba(243, 155, 191, .28); --frame-soft: rgba(243, 155, 191, .16); --frame-on: rgba(243, 155, 191, .55);
	--glow: rgba(194, 42, 104, .5); --btn-top: #c22a68; --btn-bot: #b0205c; --lift: 0 1px 2px rgba(0, 0, 0, .4);
	}
}

/* ---- buttons: each in its own frame ---- */
.btn, .btn.ghost-light, .ft-top, .ft-top:hover, .wiz-nav .btn:not(.primary) {
	background: var(--paper); border: 1px solid var(--frame); color: var(--ink); box-shadow: var(--lift); }
.btn:hover, .btn.ghost-light:hover { background: var(--paper); border-color: var(--frame-on); color: var(--ink); }
.btn.primary, .btn.accent, .site-head .acts .btn.primary, .pl-go.btn, .lx-hero .pl-go.btn, .planner .pl-go.btn.primary, .site-foot .ft-cta .btn.primary,
:root[data-theme=dark] .btn.primary, :root[data-theme=dark] .btn.accent {
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); border: 0; color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px var(--glow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .btn.primary, :root:not([data-theme=light]) .btn.accent {
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px var(--glow); } }
.btn.primary:hover, .btn.accent:hover, .lx-hero .pl-go.btn:hover, .site-head .acts .btn.primary:hover, .site-foot .ft-cta .btn.primary:hover {
	background: linear-gradient(180deg, var(--btn-top), var(--btn-top)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -10px var(--glow); }
.btn:active { transform: scale(.97); transition: transform 80ms; }
.btn.dark, .btn.sun, .btn.light, .lx-join .btn.dark { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); box-shadow: 0 10px 22px -12px var(--shadow); }
.btn.dark:hover, .lx-join .btn.dark:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); color: var(--bg); }
.lx-card.dark .btn, .lx-card.dark .btn:hover { background: #fff; color: #1d1d1f; border: 1px solid #fff; }
.btn.ghost { background: transparent; border: 0; box-shadow: none; }
.chip { background: var(--paper); border: 1px solid var(--frame); box-shadow: var(--lift); } .chip:hover { background: var(--paper); border-color: var(--frame-on); }
.chip[aria-pressed=true] { background: var(--blush); color: var(--rose-2); border-color: var(--frame-on); box-shadow: none; }
.iconbtn, .app-head .menubtn, .app-head .themebtn, .app-head .iconbtn, .site-head .menubtn, .site-head .themebtn, .drawer .dh .themebtn, .drawer .menubtn {
	background: var(--paper) !important; border: 1px solid var(--frame) !important; border-radius: 999px; box-shadow: var(--lift); color: var(--ink); }
.iconbtn:hover, .app-head .menubtn:hover, .app-head .themebtn:hover, .app-head .iconbtn:hover, .site-head .menubtn:hover, .site-head .themebtn:hover { border-color: var(--frame-on) !important; }
.hatbtn { background: var(--paper); border: 1px solid var(--frame); box-shadow: var(--lift); }

/* ---- the top bar: a floating framed bar; the links share one framed capsule, the current page on its own white stage ---- */
.site-head { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 12px 0; pointer-events: none; }
.site-head .bar { pointer-events: auto; max-width: 1200px; border-radius: 22px; padding: 0 10px; min-height: 60px;
	background: color-mix(in srgb, var(--paper) 86%, transparent); border: 1px solid var(--frame-soft);
	box-shadow: 0 14px 34px -24px var(--glow); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
.site-head .links { justify-self: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--wash); border: 1px solid var(--frame-soft); }
.site-head .links a.nl, .site-head .links a.nl:hover, .site-head .links a.nl[aria-current=page] { min-height: 44px; padding: 0 16px; border: 1px solid transparent; }
.site-head .links a.nl:hover { background: var(--paper); color: var(--ink); }
.site-head .links a.nl[aria-current=page] { background: var(--paper); border-color: var(--frame); box-shadow: 0 1px 3px rgba(157, 23, 77, .12); font-weight: 600; }
.site-head .acts .login, .site-head .acts .login:hover { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--frame); box-shadow: var(--lift); color: var(--ink); }
.site-head .acts .login:hover { border-color: var(--frame-on); }
.site-head .acts .btn.primary { min-height: 44px; }
@media (max-width: 860px) { .site-head { padding: 6px 8px 0; } .site-head .bar { min-height: 58px; padding: 0 7px; border-radius: 20px; } }

/* ---- panels: the blush-white wash with a thin frame (alive, not grey) ---- */
.lx-panel, .lx-card:not(.dark), .lx-join, .free-hero, .ob-go, .vbox, aside .panel, .ps-box, .t-grape .ps-box, .s-how .stage-box, .s-trust .stage-box, .s-join .stage-box,
.prose-card.faq details, .prose-card .contact-list, .ob-sub, .card.flat { background: var(--wash); border: 1px solid var(--frame-soft); }
.lx-hero { background: radial-gradient(60% 55% at 92% 0%, var(--blush), transparent 70%); }
.lx-hero .pl-bar { border: 1px solid var(--frame); box-shadow: 0 18px 44px -26px var(--glow); }
.lx-steps li, .s-how .steps li { border: 1px solid var(--frame-soft); }
.lx-steps li::before, .s-how .steps li::before { color: var(--rose-2); }
.grid .vcard, .grid .vcard:nth-child(n), .cat, .cat.c1, .cat.c2, .cat.c3, .cat.c4, .cat.c5 { box-shadow: 0 0 0 1px var(--frame-soft); }
.grid .vcard:hover, .cat:hover { box-shadow: 0 0 0 1px var(--frame), 0 18px 40px -28px var(--glow); }
.filters, .filters.card-f { box-shadow: 0 0 0 1px var(--frame-soft), 0 18px 40px -30px var(--glow); }
.free-badge { background: var(--paper); border: 1px solid var(--frame-soft); }

/* ---- fields: white with a frame, the wine ring on focus ---- */
input:not([type=checkbox]):not([type=radio]), select, textarea, .mp-btn { background: var(--paper); border: 1px solid var(--frame); }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--frame-on); }
input:focus, select:focus, textarea:focus { background: var(--paper); border-color: var(--rose-2); box-shadow: 0 0 0 3px var(--blush); }
.lx-hero .pl-f input, .lx-hero .pl-f select { border: 0; background: transparent; }
.lx-hero .pl-n input { border-bottom: 1.5px solid var(--frame); }

/* ---- the app in the browser: framed tabs, the current one on a blush stage ---- */
.app-head { background: color-mix(in srgb, var(--group) 80%, transparent); }
@media (max-width: 959px) {
	.tabbar { box-shadow: 0 12px 30px -14px var(--glow), inset 0 0 0 1px var(--frame-soft); }
	.tabbar a[aria-current=page], body[data-hat=admin] .tabbar a[aria-current=page], body[data-hat=support] .tabbar a[aria-current=page] {
		background: var(--blush); color: var(--rose-2); box-shadow: inset 0 0 0 1px var(--frame-on); }
}
.side a[aria-current=page] { background: var(--blush); box-shadow: inset 0 0 0 1px var(--frame-on); color: var(--rose-2); } .side a[aria-current=page] .ico { color: var(--rose-2); }
.drawer nav a[aria-current=page] { background: var(--blush); color: var(--rose-2); box-shadow: inset 0 0 0 1px var(--frame-on); } .drawer nav a[aria-current=page] .ico { color: var(--rose-2); }
.card, .card:nth-of-type(n), .list, .qcard, .empty, .stats { box-shadow: 0 0 0 1px var(--frame-soft); }
.wiz-nav { border-top-color: var(--frame-soft); }
.composer textarea { border: 1px solid var(--frame); }
.msg.mine, :root .msg.mine { background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); }

/* ================= v1.3 (7/11) audit fixes - ui-ux-pro-max =================
   Controls (fields, lists, chips, secondary buttons) get a frame of 3:1 or more; cards and panels keep the soft frames.
   A visible 2px wine focus ring with an offset; one wine button per screen (the top-bar / footer call to action stay wine, owner);
   empty states and helper text start at the right; links in the content are underlined; every action button is framed;
   every dark rule exists in both forms; the accessibility preferences come last, so no later layer can undo them.
   Contrast: frame #B9718F on white 3.6:1 (on the wash #FDF2F6 3.3:1); dark frame rgba(243,155,191,.6) on #1C1C1E 3.8:1 (on #2C2C2E 3.4:1);
   focus #9D174D on white 7.9:1, #F39BBF on #1C1C1E 8.3:1; danger frame #E76673 on white 3.2:1, dark rgba(255,105,97,.7) on #1C1C1E 3.4:1;
   ok tag #1A7F37 on #E3F7E9 4.5:1 (dark #30D158 on its tint 6.2:1); white on the error red #D70015 5.4:1. */
:root { --frame-field: #b9718f; --frame-bad: #e76673; }
:root[data-theme=dark] { --frame-field: rgba(243, 155, 191, .6); --frame-bad: rgba(255, 105, 97, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --frame-field: rgba(243, 155, 191, .6); --frame-bad: rgba(255, 105, 97, .7); } }

/* ---- 15. fields and controls: a 3:1 frame ---- */
input:not([type=checkbox]):not([type=radio]), select, textarea, .mp-btn, .composer textarea { border: 1px solid var(--frame-field); }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover, .mp-btn:hover { border-color: var(--rose-2); }
.btn:not(.primary):not(.accent):not(.dark):not(.sun):not(.light):not(.danger), .chip, .hatbtn, .site-head .acts .login, .ft-top { border-color: var(--frame-field); }
.btn:not(.primary):not(.accent):not(.dark):not(.sun):not(.light):not(.danger):hover, .chip:hover, .hatbtn:hover, .site-head .acts .login:hover { border-color: var(--rose-2); }
.chip[aria-pressed=true] { border-color: var(--frame-on); }
.iconbtn, .app-head .menubtn, .app-head .themebtn, .app-head .iconbtn, .site-head .menubtn, .site-head .themebtn, .drawer .dh .themebtn, .drawer .menubtn { border-color: var(--frame-field) !important; }
.iconbtn:hover, .app-head .menubtn:hover, .app-head .themebtn:hover, .app-head .iconbtn:hover, .site-head .menubtn:hover, .site-head .themebtn:hover { border-color: var(--rose-2) !important; }
.pagelink { box-shadow: 0 0 0 1px var(--frame-field); }
.lx-card.dark .btn, .lx-card.dark .btn:hover { border-color: #fff; }
/* the home search capsule keeps its own outer frame; its inner fields stay borderless */
.lx-hero .pl-f input, .lx-hero .pl-f select { border: 0; }
.lx-hero .pl-n input { border-bottom: 1.5px solid var(--frame-field); }
/* segmented choices: framed like a field; the chosen one = the chip look (blush + the #DD93B2 frame) */
.seg-opt { box-shadow: inset 0 0 0 1px var(--frame-field); }
.seg-opt:hover { box-shadow: inset 0 0 0 1px var(--rose-2); }
.seg-opt:has(input:checked) { background: var(--blush); box-shadow: inset 0 0 0 1px var(--frame-on); }
.seg-opt:has(input:checked) b { color: var(--rose-2); }

/* ---- 15. focus: a visible 2px wine ring with an offset (fields on focus, buttons and links on keyboard focus) ---- */
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--rose-2); box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, .chip:focus-visible, .mp-btn:focus-visible, .hatbtn:focus-visible, .iconbtn:focus-visible, .menubtn:focus-visible, .themebtn:focus-visible, .linkbtn:focus-visible,
.tabbar a:focus-visible, .side a:focus-visible, .drawer nav a:focus-visible, .item:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-f input:focus, .pl-f select:focus { outline: none; }     /* the search capsule rings the whole box (.pl-f:focus-within) */

/* ---- 21. every action button has a frame; quiet actions are real inline links ---- */
.btn.ghost { background: var(--paper); border: 1px solid var(--frame-field); box-shadow: var(--lift); color: var(--ink); text-decoration: none; }
.btn.ghost:hover { border-color: var(--rose-2); color: var(--ink); }
.btn.danger { background: var(--paper); border: 1px solid var(--frame-bad); color: var(--bad); box-shadow: var(--lift); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.linkbtn { appearance: none; background: none; border: 0; padding: 0 2px; margin-block: -6px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer;
	font: 500 .875rem/1.2 var(--text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); text-decoration-color: currentColor; }
.msg .linkbtn { color: var(--ink-2); }

/* ---- 20. links in the content: ink, underlined ---- */
#view a:not([class]), #main a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#view a:not([class]):hover, #main a:not([class]):hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- 17. empty states and helper text start at the right ---- */
.empty { text-align: start; }
.empty::before { margin-inline: 0; }
.empty p { margin-inline: 0; }
.empty .btns { justify-content: flex-start; }
.ob-go { text-align: start; }
.ob-go p { text-align: start; margin: 0; }

/* ---- 14. the verified stamp preview: the flat tag on the blush wash ---- */
.ob-stamp { align-items: center; }
.t-grape .ps-copy > .stamp { background: var(--ok-soft); }

/* ---- 22. small leftovers ---- */
.toast.bad { background: var(--bad); color: #fff; }
:root[data-theme=dark] .toast.bad { background: #2c2c2e; color: var(--ink); box-shadow: inset 0 0 0 2px var(--bad), 0 18px 40px -16px var(--shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .toast.bad { background: #2c2c2e; color: var(--ink); box-shadow: inset 0 0 0 2px var(--bad), 0 18px 40px -16px var(--shadow); } }
@media (max-width: 959px) { .tabbar a .tab-l { font-size: .75rem; letter-spacing: -.015em; } }
@media (max-width: 380px) { .tabbar { inset-inline: 8px; padding-inline: 4px; } }   /* 12px labels: "האירועים שלי" fits on one line at 360px */

/* ---- 19. dark mode: the same rules in both forms ---- */
:root[data-theme=dark] .free-hero .btn:not(.primary), :root[data-theme=dark] .prose-card.faq summary::before { background: #2c2c2e; }
:root[data-theme=dark] .prose-card.faq details[open] summary::before { background: var(--rose-solid); color: #fff; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) .free-hero .btn:not(.primary), :root:not([data-theme=light]) .prose-card.faq summary::before { background: #2c2c2e; }
	:root:not([data-theme=light]) .prose-card.faq details[open] summary::before { background: var(--rose-solid); color: #fff; }
}

/* ---- 23. the phone keyboard: the step bar of a form never covers the field being typed in (app.js sets .kb-open from visualViewport) ---- */
@media (max-width: 959px) {
	html { scroll-padding-top: 76px; scroll-padding-bottom: 120px; }
	.kb-open .wiz-nav { position: static; margin-top: var(--s4); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.kb-open .tabbar { visibility: hidden; }
}

/* ================= v1.4 (7/11) business onboarding, phase 1 - ui-ux-pro-max + apple-design =================
   The hub (#/vendor/new): a calm head, "continue where you stopped" on the blush wash with the one wine button, the ways in as one
   framed list (icon tile, title, line, chevron). Self-fill: one topic per card, the stepper, a live save line ("שומר…" / "נשמר" /
   an error with "try again"), the existing sticky .wiz-nav. The preview reuses the site's .vcard and marks it "טיוטה"; anything missing
   is a dashed red link to its step. Admin: before / after side by side (stacked on phones). Tokens only, so both dark forms follow. */
.onb-head .lead { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
.onb-terms { margin: 0; color: var(--ink-2); }
.onb-sub { font-size: 1.1rem; margin: var(--s5) 0 var(--s3); }
.onb-resume { background: var(--wash); box-shadow: 0 0 0 1px var(--frame-soft); display: grid; gap: var(--s3); }
.onb-resume h2, .onb-resume p { margin: 0; }
.onb-bars, .onb-resume .stepper { margin: 0; max-width: 260px; }
.onb-bars span.on, .onb-card .stepper span.on { background: var(--rose-2); }
.onb-resume .btns { margin: 0; }
.onb-opts { margin-bottom: var(--s4); }
.onb-opt { display: flex; align-items: center; gap: var(--s3); min-height: 76px; padding: var(--s3) var(--s4); padding-inline-end: 44px; }
.onb-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--blush); color: var(--rose-2); box-shadow: inset 0 0 0 1px var(--frame-soft); }
.onb-ic .ico { width: 22px; height: 22px; }
.onb-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.onb-tx .s { color: var(--ink-2); font-size: .9rem; }
.onb-full { margin: var(--s3) 0 var(--s5); }

/* a step: the card, its top line, the save line */
.onb-card .wiz-head { margin-bottom: var(--s3); }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.onb-top p { margin: 0; }
.onb-save { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 0 var(--s3); font-size: .875rem; color: var(--ink-2); flex-wrap: wrap; }
.onb-save .onb-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; }
.onb-save[data-state=saving] .onb-dot { background: var(--ink-3); }
.onb-save[data-state=saved] .onb-dot { background: var(--ok); }
.onb-save[data-state=saved] .onb-save-t { color: var(--ok); }
.onb-save[data-state=error] .onb-dot { background: var(--bad); }
.onb-save[data-state=error] .onb-save-t { color: var(--bad); font-weight: 600; }
.onb-save[data-state=idle] .onb-dot { display: none; }
.onb-save-n { flex-basis: 100%; color: var(--ink); background: var(--blush); border-radius: 10px; padding: 6px 10px; }
.onb-save-n:empty { display: none; }
.onb-hint { background: var(--wash); box-shadow: inset 0 0 0 1px var(--frame-soft); font-size: .95rem; }
.onb-meterbox { display: grid; gap: 6px; }
.onb-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 4px; background: var(--frame-soft); overflow: hidden; }
.onb-meter::-webkit-progress-bar { background: var(--frame-soft); border-radius: 4px; }
.onb-meter::-webkit-progress-value { background: var(--rose-2); border-radius: 4px; }
.onb-meter::-moz-progress-bar { background: var(--rose-2); border-radius: 4px; }
.onb-meterbox.ok .onb-meter::-webkit-progress-value { background: var(--ok); }
.onb-meterbox.ok .onb-meter::-moz-progress-bar { background: var(--ok); }
.onb-count { font-size: .85rem; color: var(--ink-2); }
.onb-meterbox.ok .onb-count { color: var(--ok); font-weight: 600; }
.onb-form .area-pick { display: grid; gap: var(--s3); }
.onb-file { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-s); display: grid; place-items: center; background: var(--tint); color: var(--ink-3); }
.onb-reply { display: flex; gap: var(--s2); align-items: flex-start; }
.onb-reply .ico { flex: none; color: var(--ok); margin-top: 2px; }

/* the last step: the bar carries the send button and the line under it */
.wiz-nav.onb-final { flex-wrap: wrap; row-gap: 6px; }
.onb-final-note { flex-basis: 100%; margin: 0; font-size: .8125rem; color: var(--ink-2); text-align: start; }

/* the preview card (site .vcard) */
.onb-cardwrap { grid-template-columns: minmax(0, 340px); margin: var(--s4) 0; }
.onb-vc { display: block; color: inherit; }
/* dark: the card inside the step card is one step lighter, so it never melts into it */
:root[data-theme=dark] .onb-cardwrap .vcard { background: #2c2c2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .onb-cardwrap .vcard { background: #2c2c2e; } }
.onb-cardwrap .vcard img, .onb-cardwrap .vcard .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.onb-draft { position: absolute; top: 12px; inset-inline-end: 12px; padding: 5px 12px; border-radius: 999px; font: 700 .8rem/1.2 var(--text);
	background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--frame-field), 0 6px 14px -8px var(--shadow); }
.onb-miss, .onb-miss:hover { display: inline-block; color: var(--bad); font-weight: 600; text-decoration: none; padding: 2px 10px; border-radius: 8px;
	border: 1.5px dashed var(--frame-bad); background: var(--bad-soft); font-size: .9rem; line-height: 1.5; }
.onb-cardwrap h3 .onb-miss { font-size: 1rem; }
.onb-missbox { display: grid; gap: 6px; }
.onb-missing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.onb-missing a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--frame-bad); color: var(--bad); text-decoration: none; font-weight: 600; }
.onb-page { margin-bottom: var(--s3); }
.onb-about { white-space: pre-line; margin: 0; }

/* after sending */
.onb-done { display: grid; gap: var(--s3); justify-items: start; }
.onb-done h1, .onb-done p { margin: 0; }
.onb-done-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.onb-done-ic .ico { width: 26px; height: 26px; }

/* the business card: changes waiting for approval; a photo in review */
.onb-pending { display: flex; gap: var(--s2); align-items: flex-start; background: var(--wash); box-shadow: inset 0 0 0 1px var(--frame-soft); }
.onb-pending .ico { flex: none; margin-top: 3px; color: var(--rose-2); }
.pic-wait { position: absolute; top: 10px; inset-inline-end: 10px; padding: 4px 10px; border-radius: 999px; font: 600 .75rem/1.2 var(--text);
	background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--frame-field); }
.pic.review img { opacity: .72; }

/* admin: changes to approve */
.rev-field { margin-top: var(--s3); }
.rev-field h3 { font-size: 1rem; margin: 0 0 var(--s2); }
.rev-diff { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .rev-diff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rev-b, .rev-a { border-radius: 14px; padding: var(--s3); min-width: 0; }
.rev-b { background: var(--tint); box-shadow: inset 0 0 0 1px var(--frame-soft); }
.rev-a { background: var(--blush); box-shadow: inset 0 0 0 1px var(--frame-on); }
.rev-b p, .rev-a p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.rev-l { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.rev-a .rev-l { color: var(--rose-2); }
.rev-pics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rev-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; }
.rev-pic figcaption { flex-wrap: wrap; }
.rev-pic figcaption .btns { margin: 0; }

/* ---- 18. accessibility preferences - last, so no later layer undoes them ---- */
/* reduced motion: no travel, no zoom, no loops; colour and opacity changes stay as short cross-fades */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
		transition-property: opacity, color, background-color, border-color, box-shadow, visibility !important; transition-duration: .15s !important; }
	.drawer { transform: none !important; opacity: 0; } .drawer-open .drawer { opacity: 1; }
	.sheet-bg .sheet, .sheet-bg.in .sheet, .mp-panel { transform: none !important; }
	.btn:active, .chip:active, .cat:active, .grid .vcard:active, .iconbtn:active, .menubtn:active, .themebtn:active, .hatbtn:active, .tabbar a:active, .ft-top:active, .seg-opt:active,
	.lx-tile:active, .site-head .links a.nl:active, .pic-rm:active, .pagelink:active { transform: none !important; }
	.cat:hover, .grid .vcard:hover, .site-head .links a.nl:hover, .cat:hover .cat-pic img, .lx-tile:hover img, .logo.big:hover .lm { transform: none !important; animation: none !important; }
	.skeleton::after { display: none; }
}
/* reduced transparency: solid bars, no blur */
@media (prefers-reduced-transparency: reduce) {
	.site-head .bar, .tabbar, .wiz-nav, .sheet { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.app-head, .composer { background: var(--group) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.drawer-bg, .sheet-bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.pic-tag { background: #1d1d1f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* more contrast: stronger frames and secondary text, a solid name */
@media (prefers-contrast: more) {
	:root { --frame-field: #7a2a4b; --frame: #b9718f; --frame-soft: #dd93b2; --frame-on: #9d174d; --frame-bad: #b00012; --ink-2: #3a3a3c; --ink-3: #48484a; --line: #8e8e93; --line-2: #636366; --link-line: currentColor; }
	:root[data-theme=dark] { --frame-field: #f39bbf; --frame: rgba(243, 155, 191, .75); --frame-soft: rgba(243, 155, 191, .55); --frame-on: #f39bbf; --frame-bad: #ff6961; --ink-2: #d1d1d6; --ink-3: #c7c7cc; --line: #8e8e93; --line-2: #aeaeb2; --link-line: currentColor; }
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme=light]) { --frame-field: #f39bbf; --frame: rgba(243, 155, 191, .75); --frame-soft: rgba(243, 155, 191, .55); --frame-on: #f39bbf; --frame-bad: #ff6961; --ink-2: #d1d1d6; --ink-3: #c7c7cc; --line: #8e8e93; --line-2: #aeaeb2; --link-line: currentColor; }
	}
	.logo .lw, .app-head .logo .lw, .logo.big .lw { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
	.card, .card:nth-of-type(n), .list, .qcard, .empty, .stats { box-shadow: 0 0 0 1px var(--frame); }
	.btn:not(.primary):not(.accent):not(.dark):not(.sun):not(.light), .chip, .iconbtn, .hatbtn { border-width: 1.5px !important; }
}

/* site traffic (admin, 8/11): one row per day - the date, a wine bar on a blush track, the numbers. Tokens only (both themes). */
.tbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.tbars li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: var(--s3); font-size: .86rem; color: var(--ink-2); text-align: start; }
.tbars .tday { font-variant-numeric: tabular-nums; }
.tbars .tnum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbars .tnum b { color: var(--ink); font-weight: 600; }
.tbar { display: block; block-size: 10px; border-radius: 999px; background: var(--blush); box-shadow: inset 0 0 0 1px var(--frame-soft); overflow: hidden; }
.tbar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--btn-bot); }
@media (max-width: 420px) { .tbars li { grid-template-columns: 3.2em minmax(0, 1fr); } .tbars .tnum { grid-column: 2; } }

/* ================= v1.5 (8/11) SEO pages - category content, region pages, guides, the business badge =================
   Tokens only, both themes. Hebrew text starts at the right; the content blocks are the same wash panels with a thin frame.
   Links between pages are framed pills; the one wine button stays the page's main action. */
.crumbs-wrap { padding-top: var(--s4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: .9rem; color: var(--ink-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.crumbs li + li::before { content: '‹'; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--frame); text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
.crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.seo-wrap { display: grid; gap: var(--s5); }
.seo-wrap > .vbox, .seo-two > .vbox { text-align: start; }
.seo-intro p { max-width: 70ch; margin: 0 0 var(--s3); color: var(--ink-2); font-size: 1.06rem; line-height: 1.65; }
.seo-intro p:last-child { margin-bottom: 0; }
.seo-two { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.seo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.seo-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); align-items: start; color: var(--ink); line-height: 1.55; }
.seo-list .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--rose); }
.seo-faq > h2, .seo-links > h2, .guide-cats > h2, .seo-cta > h2 { font: 800 1.45rem/1.25 var(--text); letter-spacing: -.02em; margin: 0 0 var(--s4); text-align: start; }
.seo-faq .prose-card.faq { max-width: none; margin: 0; }
.seo-more { display: grid; gap: var(--s5); }
.seo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.seo-chips li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper); color: var(--ink);
	border: 1px solid var(--frame); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.seo-chips li a:hover { border-color: var(--frame-on); background: var(--blush); }
.seo-chips li a:active { transform: scale(.96); }
ul.seo-chips > li > a:not(.btn):not(.nl):not(.item) { text-decoration: none; }   /* a framed pill, not an inline link */
.seo-cities { margin: var(--s5) 0 0; text-align: start; line-height: 1.7; }
.seo-cta { background: var(--wash); border: 1px solid var(--frame-soft); border-radius: 28px; padding: clamp(20px, 3vw, 32px); text-align: start; }
.seo-cta p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.seo-cta .btns { margin-bottom: 0; }
.stage.seo { padding-top: 0; }

/* guides: quiet cards (home, /guides), the article, its services */
.gcards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gcard { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); border-radius: 22px; background: var(--wash); border: 1px solid var(--frame-soft);
	color: var(--ink); text-decoration: none; text-align: start; }
.gcard h2, .gcard h3 { margin: 0; font: 700 1.2rem/1.3 var(--text); letter-spacing: -.01em; text-wrap: balance; }
.gcard p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
.gcard:hover { border-color: var(--frame); }
.gcard:active { transform: scale(.98); }
.gdate { color: var(--ink-3); font-size: .88rem; margin: 0; }
.ps-copy .gdate { margin-top: var(--s2); }
.guide-body { text-align: start; max-width: 760px; }
.guide-body h2 { font: 800 1.5rem/1.25 var(--text); letter-spacing: -.02em; margin: var(--s6) 0 var(--s3); }
.guide-body h3 { font: 700 1.18rem/1.3 var(--text); margin: var(--s5) 0 var(--s2); }
.guide-body > :first-child { margin-top: 0; }
.guide-body p, .guide-body li { font-size: 1.06rem; line-height: 1.7; color: var(--ink); }
.guide-body ul { padding-inline-start: 1.3em; margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
.guide-body strong { font-weight: 700; }
.guide-cats, .guide-cta { max-width: 820px; margin: var(--s6) auto 0; }
.guide-cats .cats { justify-content: flex-start; }
.lx-guides .gcards { margin-top: var(--s4); }

/* the footer with five columns on wide screens */
@media (min-width: 901px) { .ft-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }
.ft-col.c4 h2::before { background: var(--rose); }

/* the business card in the app: the "listed on" badge and its code */
.badge-box { display: grid; gap: var(--s3); text-align: start; }
.badge-box p { margin: 0; color: var(--ink-2); }
.badge-prev { display: flex; justify-content: flex-start; padding: var(--s4); border-radius: 14px; background: var(--wash); border: 1px solid var(--frame-soft); }
.badge-prev img { display: block; max-width: 100%; height: auto; }
.badge-code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; text-align: left; width: 100%; resize: vertical; }
.badge-box .btns { align-items: center; margin: 0; }

/* ================= v1.6 (8/11) recruitment mode: the front door invites event service providers to join =================
   site.mode = recruit (site.recruit_page): the headline, then the short sign-up in a framed stage, in the first screen on a
   phone. One wine main button per step, inside its own blush plate; the fields are framed chips (a real checkbox under each,
   so the keyboard and screen readers work). Hebrew starts at the right. Tokens only, so both themes follow. */
.rc { padding: clamp(18px, 4vw, 56px) 0 clamp(36px, 6vw, 80px); background: radial-gradient(70% 50% at 100% 0%, var(--blush), transparent 70%); }
.rc-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "trust" "cust"; align-items: start; }
.rc-copy { grid-area: copy; text-align: start; }
.rc-card { grid-area: card; }
.rc-trust { grid-area: trust; }
.rc-cust { grid-area: cust; }
@media (min-width: 960px) {
	.rc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "copy card" "trust card" "cust card"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: var(--s4); }
	.rc-copy { padding-top: var(--s6); }
	.rc-card { position: sticky; top: 92px; }
}
.rc-eyebrow { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--paper);
	border: 1px solid var(--frame-soft); color: var(--rose-2); font-weight: 600; font-size: .9rem; }
.rc-eyebrow .spark { width: 14px; height: 14px; }
.rc-copy h1 { margin: var(--s3) 0 var(--s3); font: 800 clamp(1.55rem, 6.2vw, 3.35rem)/1.14 var(--text); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.rc-lead { margin: 0; max-width: 34em; color: var(--ink-2); font-size: clamp(1.02rem, 3.9vw, 1.28rem); line-height: 1.55; }

/* the stage of the sign-up */
.rc-card { background: var(--paper); border: 1px solid var(--frame-soft); border-radius: 28px; padding: clamp(16px, 4vw, 28px);
	box-shadow: 0 24px 60px -38px var(--glow); text-align: start; min-width: 0; }
.rc-card [hidden] { display: none !important; }
.rc-form, .rc-code { gap: var(--s4); }
.rc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.rc-two input { min-width: 0; width: 100%; }
.rc-card input[type=tel], .rc-card input[name=code] { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.rc-card input[name=code] { letter-spacing: .3em; font-size: 1.3rem; }
.rc-cats { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; background: none; border-radius: 0; }
.rc-cats legend { padding: 0; margin: 0 0 8px; font-weight: 500; font-size: .93rem; color: var(--ink); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip { position: relative; display: inline-flex; gap: 0; font-weight: 500; }
.rc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rc-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--paper);
	border: 1px solid var(--frame-field, var(--frame)); color: var(--ink); font-size: .95rem; box-shadow: var(--lift); pointer-events: none;
	transition: background-color .16s, border-color .16s, color .16s, transform var(--dur-2, 200ms) var(--ease-out, ease); }
.rc-chip span::before { content: ''; width: 0; overflow: hidden; transition: width .16s; }
.rc-chip input:checked + span { background: var(--blush); color: var(--rose-2); border-color: var(--frame-on); box-shadow: none; font-weight: 600; }
.rc-chip input:checked + span::before { content: '✓'; width: 1em; }
.rc-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .rc-chip:hover span { border-color: var(--rose-2); } }
.rc-chip:active span { transform: scale(.96); transition-duration: 80ms; }
.rc-cats.bad .rc-chip span { border-color: var(--bad); }
.rc-terms { align-items: flex-start; font-weight: 400; line-height: 1.5; }
.rc-terms input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--rose-2); }
.rc-terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rc-card .field-err { display: block; margin-top: 2px; }

/* the main button on its own plate; one per step */
.rc-go { background: var(--wash); border: 1px solid var(--frame-soft); border-radius: 20px; padding: 10px; display: grid; gap: 6px; }
.rc-go .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.08rem; }
.rc-go .btn[disabled] { opacity: .7; cursor: progress; }
.rc-status { margin: 0; min-height: 0; color: var(--ink-2); font-size: .92rem; text-align: start; }
.rc-status:empty { display: none; }
.rc-code h2, .rc-done h2 { margin: 0; font: 800 1.45rem/1.25 var(--text); letter-spacing: -.02em; outline: none; }
.rc-note { margin: 0; color: var(--ink-2); }
.rc-alt { margin: 0; }
.rc-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--ink); text-decoration: underline;
	text-decoration-color: var(--frame-on); text-underline-offset: 3px; cursor: pointer; }
.rc-link:hover { text-decoration-color: currentColor; }
.rc-alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.rc-done { display: grid; gap: var(--s3); }
.rc-done > p { margin: 0; color: var(--ink-2); font-size: 1.06rem; }
.rc-tick { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--blush); color: var(--rose-2);
	border: 1px solid var(--frame-on); }
.rc-tick .ico { width: 26px; height: 26px; }
.rc-done .rc-go .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 10px; }

/* without scripts: the headline and a link to the app's sign-up hub instead of the form */
.rc-nojs { margin: 0; color: var(--ink-2); }
.js .rc-nojs, html:not(.js) .rc-form { display: none; }

/* under the form: three short trust points and one quiet line for customers */
.rc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rc-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.rc-trust .ico { width: 18px; height: 18px; color: var(--rose-2); flex: none; }
.rc-cust { margin: 0; color: var(--ink-2); font-size: .95rem; }
.rc-cust a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* phones: tighter, and the two names stay side by side down to 340px */
@media (max-width: 600px) {
	.rc .wrap { padding-inline: 16px; }
	.rc-grid { gap: var(--s4); }
	.rc-card { border-radius: 24px; }
}
@media (max-width: 340px) { .rc-two { grid-template-columns: minmax(0, 1fr); } }

/* dark: the plate under the button and the card one step apart (both forms) */
:root[data-theme=dark] .rc-card { background: #1c1c1e; }
:root[data-theme=dark] .rc-go, :root[data-theme=dark] .rc-eyebrow { background: #2c2c2e; }
:root[data-theme=dark] .rc-chip span { background: #2c2c2e; }
:root[data-theme=dark] .rc-chip input:checked + span { background: var(--blush); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) .rc-card { background: #1c1c1e; }
	:root:not([data-theme=light]) .rc-go, :root:not([data-theme=light]) .rc-eyebrow { background: #2c2c2e; }
	:root:not([data-theme=light]) .rc-chip span { background: #2c2c2e; }
	:root:not([data-theme=light]) .rc-chip input:checked + span { background: var(--blush); }
}
@media (prefers-reduced-motion: reduce) { .rc-chip span, .rc-chip span::before { transition: none; } .rc-chip:active span { transform: none; } }

/* admin: pre-registrations */
.pre-count { margin: 0 0 var(--s3); font-size: 1.1rem; color: var(--ink-2); }
.pre-count b { font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pre-tools { align-items: flex-end; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0; }
.pre-tools label { min-width: 220px; }
.pre-copy { width: 100%; direction: ltr; text-align: left; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ================= v1.7 (8/11) recruitment mode, round 2 - a landing page for event professionals =================
   frontend-design + ui-ux-pro-max ("lead magnet + form": benefit headline, minimal form, one action; categories with icons).
   One bold thing: the line-up of the trades in their own pictures, entering once on load (a finite sequence - nothing keeps
   moving, so no pause control is needed; none at all with reduced motion). Everything else is quiet: a numbered path for the
   real three-step sequence, a list with hairlines for the reasons, hairline FAQ rows, one wine band to close.
   Brand only: the wine family, Heebo, the balloon mark. Hebrew starts at the right. Tokens, both dark forms at the end. */
.rc-card { scroll-margin-top: 88px; }
.rc-grid { grid-template-areas: "copy" "reel" "card" "trust"; }
.rc-reel { grid-area: reel; }
.rc-copy h1 { margin-top: 0; }
.rc-copy h1 { font-size: clamp(1.6rem, 6.4vw, 3.7rem); line-height: 1.1; }
@media (min-width: 960px) {
	.rc-grid { grid-template-areas: "copy card" "reel card" "trust card"; grid-template-rows: auto auto 1fr; }
	.rc-copy { padding-top: var(--s5); }
}

/* the line-up: portrait cards of every trade, alternately raised, the caption on the photo */
.rc-reel { overflow: hidden; margin-inline: -16px; padding: 4px 16px 14px; }
@media (min-width: 601px) { .rc-reel { margin-inline: 0; padding-inline: 0; border-radius: 20px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); } }
.rc-track { display: flex; gap: 10px; width: max-content; }
.rc-pic { position: relative; margin: 0; width: 78px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; flex: none;
	background: var(--blush); box-shadow: 0 0 0 1px var(--frame-soft), 0 10px 22px -16px var(--glow); }
.rc-pic:nth-child(even) { transform: translateY(10px); }
.rc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-pic figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 6px 6px; color: #fff; font: 600 .72rem/1.2 var(--text); text-align: center;
	background: linear-gradient(to top, rgba(20, 6, 13, .82), rgba(20, 6, 13, 0)); text-wrap: balance; }
@media (min-width: 601px) { .rc-pic { width: 112px; border-radius: 20px; } .rc-pic figcaption { font-size: .82rem; padding: 26px 8px 8px; } }
@media (min-width: 960px) { .rc-pic { width: 128px; } .rc-track { gap: 12px; } }
/* the entrance: the line-up slides in from the start and each card rises after the one before - once */
@keyframes rc-slide { from { transform: translateX(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rc-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.js .rc-track { animation: rc-slide 1.1s var(--ease-out, cubic-bezier(.32, .72, 0, 1)) both; }
.js .rc-pic { animation: rc-rise .62s var(--ease-out, cubic-bezier(.32, .72, 0, 1)) both; }
.js .rc-pic:nth-child(2) { animation-delay: 70ms; } .js .rc-pic:nth-child(3) { animation-delay: 140ms; } .js .rc-pic:nth-child(4) { animation-delay: 210ms; }
.js .rc-pic:nth-child(5) { animation-delay: 280ms; } .js .rc-pic:nth-child(6) { animation-delay: 350ms; } .js .rc-pic:nth-child(7) { animation-delay: 420ms; }
.js .rc-pic:nth-child(n+8) { animation-delay: 480ms; }

/* field chips: the trade's icon; chosen = filled wine with a check (white on #9D174D 7.9:1, on #B0205C 6.6:1) */
.rc-chip span::before { content: none; display: none; }
.rc-chip span { gap: 8px; padding: 0 14px 0 16px; }
.rc-chip .ico { width: 18px; height: 18px; flex: none; }
.rc-chip .ci { color: var(--rose-2); }
.rc-chip .ck { display: none; }
.rc-chip input:checked + span { background: var(--btn-bot); border-color: var(--btn-bot); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -12px var(--glow); }
.rc-chip input:checked + span .ci { display: none; }
.rc-chip input:checked + span .ck { display: block; color: #fff; }
@media (hover: hover) { .rc-chip:hover input:checked + span { border-color: var(--btn-top); background: var(--btn-top); } }

/* the sections under the form */
.rc-sec { padding: clamp(44px, 7vw, 96px) 0 0; }
.rc-sec h2 { margin: 0 0 var(--s5); font: 800 clamp(1.5rem, 4.6vw, 2.5rem)/1.15 var(--text); letter-spacing: -.025em; color: var(--ink); text-align: start; text-wrap: balance; }

/* how it works: a path of three numbered stops (a real sequence) - down the start side on phones, across on wide screens */
.rc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: none; }
.rc-steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); align-items: start; text-align: start; }
.rc-steps li h3 { grid-column: 2; margin: 10px 0 4px; font: 700 1.14rem/1.35 var(--text); color: var(--ink); }
.rc-steps li p { grid-column: 2; margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 44ch; }
.rc-n { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--paper);
	border: 2px solid var(--btn-bot); color: var(--rose-2); font: 800 1.2rem/1 var(--text); position: relative; z-index: 1; }
.rc-steps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 23px; top: 52px; bottom: calc(-1 * var(--s5) + 4px); width: 2px; background: var(--frame); }
.rc-steps li:last-child .rc-n { background: var(--btn-bot); color: #fff; }
@media (min-width: 860px) {
	.rc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
	.rc-steps li { grid-template-columns: minmax(0, 1fr); }
	.rc-steps li h3, .rc-steps li p { grid-column: 1; }
	.rc-steps li h3 { margin-top: var(--s4); }
	.rc-n { grid-row: auto; }
	.rc-steps li:not(:last-child)::after { inset-inline-start: 60px; inset-inline-end: calc(-1 * var(--s6) + 8px); top: 23px; bottom: auto; width: auto; height: 2px; }
}

/* why join: the heading beside a list with hairlines on wide screens; an icon disc per reason */
.rc-why-grid { display: grid; gap: 0 var(--s6); }
@media (min-width: 960px) { .rc-why-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.rc-why-list { list-style: none; margin: 0; padding: 0; }
.rc-why-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--frame-soft); text-align: start; }
.rc-why-list li:last-child { border-bottom: 1px solid var(--frame-soft); }
.rc-wi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--blush); color: var(--rose-2); }
.rc-wi .ico { width: 22px; height: 22px; }
.rc-why-list p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.rc-why-list b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 700; font-size: 1.06rem; }

/* FAQ: hairline rows, a plus that turns into a minus */
.rc-faq-list { max-width: 820px; }
.rc-faq-list details { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--frame-soft); }
.rc-faq-list details:last-child { border-bottom: 1px solid var(--frame-soft); }
.rc-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: 10px 0; cursor: pointer;
	list-style: none; font: 600 1.08rem/1.4 var(--text); color: var(--ink); text-align: start; }
.rc-faq-list summary::-webkit-details-marker { display: none; }
.rc-faq-list summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
	background: var(--blush); color: var(--rose-2); font: 700 1.2rem/1 var(--text); }
.rc-faq-list details[open] summary::after { content: '−'; }
.rc-faq-list summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.rc-faq-list details p { margin: 0 0 var(--s4); color: var(--ink-2); line-height: 1.65; max-width: 64ch; text-align: start; }

/* the closing band: the page's one dark-wine stage; its button is white with wine text (7.9:1) */
.rc-close { padding-bottom: clamp(40px, 6vw, 80px); }
.rc-band { border-radius: 32px; padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 64px); text-align: start; color: #fff;
	background: radial-gradient(80% 120% at 100% 0%, #b01a57, transparent 60%), linear-gradient(160deg, #9d174d, #6e0f37);
	box-shadow: 0 30px 60px -36px rgba(110, 15, 55, .7); display: grid; gap: var(--s3); justify-items: start; }
.rc-band h2 { margin: 0; color: #fff; max-width: 22ch; }
.rc-band p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 1.08rem; }
.rc-band .btn.rc-band-btn, .rc-band .btn.rc-band-btn:hover { margin-top: var(--s2); background: #fff; color: #9d174d; border: 0; min-height: 52px; padding-inline: 28px;
	font-weight: 700; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5); }
.rc-band .btn.rc-band-btn .ico { color: #9d174d; }
.rc-band .btn.rc-band-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rc-close .rc-cust { margin-top: var(--s5); }

/* the join bar on phones: the same main action, shown by site.js only while the form is out of view */
.rc-dock { position: fixed; z-index: 45; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 8px; border-radius: 22px;
	background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--frame-soft); box-shadow: 0 18px 40px -18px var(--glow);
	-webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.rc-dock[hidden] { display: none; }
.rc-dock .btn { width: 100%; justify-content: center; min-height: 52px; }
body.rc-docked .site-foot { padding-bottom: 96px; }
@media (min-width: 960px) { .rc-dock, .rc-dock[hidden] { display: none; } }

/* recruit mode on the other pages: a box inviting the businesses of the page's field */
.rc-box { display: grid; gap: var(--s2); justify-items: start; margin-top: var(--s4); padding: clamp(18px, 3vw, 26px); border-radius: 22px; text-align: start;
	background: var(--wash); border: 1px solid var(--frame); }
.rc-box .rc-box-h { margin: 0; font: 800 1.25rem/1.3 var(--text); letter-spacing: -.01em; color: var(--ink); }
.rc-box p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.rc-box .btn { margin-top: var(--s2); }
.grid > .rc-box { grid-column: 1 / -1; }
.guide-cta .rc-box { margin-top: 0; }
.ps-copy .rc-box { background: var(--paper); }

/* dark: the same rules in both forms */
:root[data-theme=dark] .rc-n { background: #1c1c1e; }
:root[data-theme=dark] .rc-pic { box-shadow: 0 0 0 1px var(--frame-soft); }
:root[data-theme=dark] .ps-copy .rc-box { background: #2c2c2e; }
:root[data-theme=dark] .rc-band { box-shadow: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) .rc-n { background: #1c1c1e; }
	:root:not([data-theme=light]) .rc-pic { box-shadow: 0 0 0 1px var(--frame-soft); }
	:root:not([data-theme=light]) .ps-copy .rc-box { background: #2c2c2e; }
	:root:not([data-theme=light]) .rc-band { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.js .rc-track, .js .rc-pic { animation: none; }
}
@media (prefers-reduced-transparency: reduce) { .rc-dock { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ================= v1.9 (8/11) page boost - frontend-design + ui-ux-pro-max =================
   No new colours: the wine accent, blush frames and washes of v1.2. The one memorable piece is the completeness meter,
   drawn as the brand's balloon arch (one balloon per item, filled wine when done). Cover tags say on the picture itself
   when it is not the business's own work ("תמונת אווירה" / "המחשה"). */
.cover-tag { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; min-height: 24px;
	padding: 0 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--frame); color: var(--ink); font: 600 .75rem/1 var(--text);
	box-shadow: var(--lift); pointer-events: none; }
.vpic { position: relative; }
.ps-pic.has-tag { position: relative; }
.ps-pic.has-tag .cover-tag { inset-block-end: 14px; inset-inline-start: 14px; font-size: .8125rem; min-height: 28px; padding: 0 12px; }
.ps-sub { margin: 0 0 4px; color: var(--ink-2); font-weight: 500; }
.ps-tagline { margin: 0 0 8px; font-size: 1.125rem; color: var(--ink); max-width: 46ch; }
.vchips { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vchips li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--paper);
	border: 1px solid var(--frame-soft); color: var(--ink); font-size: .875rem; font-weight: 500; }
.vchips li.c-reviews { border-color: var(--frame-on); }
.vhl { margin-top: var(--s4); }

/* the meter */
.boost-score .bs-head { display: grid; grid-template-columns: 148px 1fr; gap: var(--s4); align-items: center; }
.boost-score .bs-copy h2 { margin: 0 0 2px; }
.boost-score .bs-of { margin: 0; font-weight: 600; }
.boost-score .bs-copy .small { margin: 2px 0 0; }
.boost-arch { position: relative; width: 148px; aspect-ratio: 160 / 92; }
.boost-arch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.boost-arch g.on ellipse, .boost-arch g.on path { fill: var(--rose-solid); }
.boost-arch g.off ellipse { fill: var(--paper); stroke: var(--frame); stroke-width: 2; }
.boost-arch g.off path { fill: var(--frame); }
.boost-n { position: absolute; inset-inline: 0; bottom: 0; text-align: center; font: 800 1.75rem/1 var(--text); letter-spacing: -.02em; color: var(--ink);
	font-variant-numeric: tabular-nums; }
.bs-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: 6px; }
.bs-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--wash); }
.bs-list li.ok { background: transparent; }
.bs-list li.ok .bs-tx b { color: var(--ink-2); font-weight: 500; }
.bs-list .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--frame); }
.bs-list li.ok .tick { background: var(--rose-solid); box-shadow: none; color: #fff; }
.bs-list .tick .ico { width: 15px; height: 15px; }
.bs-tx { display: grid; gap: 2px; min-width: 0; }
.bs-tip { color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.boost-score.compact .btns { margin-top: var(--s3); }
@media (max-width: 520px) {
	.boost-score .bs-head { grid-template-columns: 112px 1fr; gap: var(--s3); }
	.boost-arch { width: 112px; } .boost-n { font-size: 1.375rem; }
	.bs-list li { grid-template-columns: 26px 1fr; }
	.bs-list li .btn { grid-column: 2; justify-self: start; }
}

/* the page suggestion */
.boost-sug .sg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.boost-sug .sg-head h2 { margin: 0; }
.sg-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); color: var(--rose); flex: none; }
.sg-ic .ico { width: 18px; height: 18px; }
.sg-busy { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.sg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rose-solid); animation: sg-pulse 1.2s var(--ease-out, ease-out) infinite; }
@keyframes sg-pulse { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sg-dot { animation: none; } }
.sg-parts { display: grid; gap: var(--s3); margin-top: var(--s3); }
.sg-part { margin: 0; padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--frame-soft); border-radius: 18px; background: var(--paper); min-width: 0; }
.sg-part legend { padding: 0 6px; font-weight: 700; }
.sg-part legend .check { margin: 0; }
.sg-cols { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 760px) { .sg-cols { grid-template-columns: 1fr 1fr; } }
.sg-now, .sg-new { border-radius: 14px; padding: 12px 14px; min-width: 0; }
.sg-now { background: var(--wash); color: var(--ink-2); }
.sg-new { background: var(--paper); border: 1px solid var(--frame-on); }
.sg-cap { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.sg-new .sg-cap { color: var(--rose); }
.sg-now p, .sg-new p { margin: 0; }
.sg-tag { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.sg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sg-list li { display: flex; gap: 8px; align-items: flex-start; }
.sg-list .ico { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--rose); }
.sg-inc { display: block; }
.sg-faq { margin: 0; display: grid; gap: 4px; } .sg-faq dt { font-weight: 600; } .sg-faq dd { margin: 0 0 8px; color: var(--ink-2); }
.sg-new textarea, .sg-new input { width: 100%; }
.sg-pairs { display: grid; gap: 10px; }
.sg-pair { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--wash); }
.faq-ed .sg-pair { grid-template-columns: 1fr auto; } .faq-ed .sg-pair textarea { grid-column: 1; } .faq-ed .sg-pair .btn { grid-row: 1; grid-column: 2; }
.sg-part > .btns { margin-top: 8px; }
.sg-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); padding: 12px; border-radius: 18px; background: var(--wash); border: 1px solid var(--frame-soft); }
.btn.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--rose); }
.btn.quiet:hover { background: var(--blush); border-color: transparent; color: var(--rose); }
.sg-ask { margin-top: var(--s3); align-items: center; }

/* the admin list, the hub card, draft packages, the re-approval list */
.score-pill { display: inline-flex; min-width: 3.2em; justify-content: center; padding: 2px 10px; border-radius: 999px; background: var(--blush); color: var(--rose); font-weight: 700;
	font-variant-numeric: tabular-nums; }
.score-pill.low { background: var(--wash); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--frame); }
.onb-aipics { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.onb-aipics h2 { margin: 0 0 4px; font-size: 1.125rem; }
.pkg-draft { border: 1px dashed var(--frame-on); }
.rev-li { display: block; margin-bottom: 4px; }
.rc-ai span { display: grid; gap: 2px; } .rc-ai .field-help { font-weight: 400; }

/* ================= v2.0 (9/11) "Midnight & Champagne" - owner: from the pink to something more luxurious, same design =================
   frontend-design + ui-ux-pro-max ("luxury: deep dark + gold accent"). The colours come from our own logo: its aubergine square
   (#24123D) and its gold balloon. Aubergine for the main action and the accent text; champagne gold for frames, the "selected"
   tint and the details; white pages and the same neutral ink as before. In dark mode the main button turns champagne with
   aubergine text. Contrast: #3B1D5E / #4D2878 on white 14:1 / 11:1, white on #3B1D5E 14:1, #8A6424 on white 5.4:1,
   #1D0E30 on #C9A45C 7.7:1, #DCC08A on #1C1C1E 9.3:1, input frame #A88A4F on white 3.3:1. */
:root {
	--plum-9: #1d0e30; --plum-8: #2b1546; --plum-7: #3b1d5e; --plum-6: #4d2878; --champ: #c9a45c; --champ-2: #dcc08a; --champ-ink: #8a6424;
	--rose: #4d2878; --rose-2: #4d2878; --rose-solid: #3b1d5e; --rose-hover: #2b1546; --rose-tint: #f3ecdc; --blush: #f3ecdc; --blush-soft: #f8f5ef;
	--violet: #4d2878; --violet-soft: #f3ecdc; --focus: #4d2878; --cta-grad: #3b1d5e;
	--tint: #f8f5ef; --group: #f6f3ee; --wash: #f8f5ef; --frame: #e6dac2; --frame-soft: #efe7d7; --frame-on: #c9a45c; --frame-field: #a88a4f;
	--glow: rgba(59, 29, 94, .34); --btn-top: #4d2878; --btn-bot: #3b1d5e; --lift: 0 1px 2px rgba(59, 29, 94, .08); --on-btn: #fff;
}
:root[data-theme=dark] {
	--rose: #dcc08a; --rose-2: #dcc08a; --rose-solid: #5a3486; --rose-hover: #6a3f9b; --rose-tint: rgba(220, 192, 138, .14); --blush: rgba(220, 192, 138, .16); --blush-soft: rgba(220, 192, 138, .08);
	--violet: #dcc08a; --violet-soft: rgba(220, 192, 138, .14); --focus: #dcc08a; --cta-grad: #c9a45c;
	--frame: rgba(220, 192, 138, .28); --frame-soft: rgba(220, 192, 138, .16); --frame-on: rgba(220, 192, 138, .6); --frame-field: rgba(220, 192, 138, .6);
	--glow: rgba(201, 164, 92, .35); --btn-top: #dcc08a; --btn-bot: #c9a45c; --lift: 0 1px 2px rgba(0, 0, 0, .4); --on-btn: #1d0e30; --champ-ink: #dcc08a;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
	--rose: #dcc08a; --rose-2: #dcc08a; --rose-solid: #5a3486; --rose-hover: #6a3f9b; --rose-tint: rgba(220, 192, 138, .14); --blush: rgba(220, 192, 138, .16); --blush-soft: rgba(220, 192, 138, .08);
	--violet: #dcc08a; --violet-soft: rgba(220, 192, 138, .14); --focus: #dcc08a; --cta-grad: #c9a45c;
	--frame: rgba(220, 192, 138, .28); --frame-soft: rgba(220, 192, 138, .16); --frame-on: rgba(220, 192, 138, .6); --frame-field: rgba(220, 192, 138, .6);
	--glow: rgba(201, 164, 92, .35); --btn-top: #dcc08a; --btn-bot: #c9a45c; --lift: 0 1px 2px rgba(0, 0, 0, .4); --on-btn: #1d0e30; --champ-ink: #dcc08a;
	}
}
@media (prefers-contrast: more) {
	:root { --frame-field: #6e5a2e; --frame: #8a6424; --frame-soft: #b19256; --frame-on: #3b1d5e; }
	:root[data-theme=dark] { --frame-field: #dcc08a; --frame: #dcc08a; --frame-soft: rgba(220, 192, 138, .7); --frame-on: #dcc08a; }
}
/* the main button: aubergine with a hairline of light on top; in dark mode champagne with aubergine text */
.btn.primary, .btn.accent, .site-head .acts .btn.primary, .pl-go.btn, .lx-hero .pl-go.btn, .planner .pl-go.btn.primary, .site-foot .ft-cta .btn.primary,
.btn.primary:hover, .btn.accent:hover, .lx-hero .pl-go.btn:hover, .site-head .acts .btn.primary:hover, .site-foot .ft-cta .btn.primary:hover { color: var(--on-btn); }
.btn.primary .ico, .btn.accent .ico { color: currentColor; }
.rc-chip input:checked + span, .rc-chip input:checked + span .ck { color: var(--on-btn); }
.rc-steps li:last-child .rc-n { color: var(--on-btn); }

/* ---------- the recruitment page: a night stage for the first screen ----------
   The stage reaches up behind the floating header bar (a layer under the section), so the bar floats on the night;
   the brand's balloon arch is drawn in champagne hairlines around the headline. */
.rc { position: relative; isolation: isolate; overflow-x: clip; color: #f5f1ea; background: none; }
.rc::before { content: ''; position: absolute; z-index: -2; inset: -180px 0 0 0; pointer-events: none;
	background: radial-gradient(55% 60% at 88% 18%, rgba(77, 40, 120, .9), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(201, 164, 92, .16), transparent 70%),
	linear-gradient(180deg, #1d0e30, #22113a 70%, #1d0e30); }
/* the arch stands over the card: its two columns just outside the card's sides, its top above it (columns at 50/600 of the
   drawing, so insets of 10% + 14px put them 12px outside); under the card's white, over the night */
.rc-arch { position: absolute; z-index: -1; top: -84px; inset-inline: calc(-10% - 14px); width: auto; height: auto; pointer-events: none;
	fill: rgba(201, 164, 92, .07); stroke: #c9a45c; stroke-width: 1.4; opacity: .62; }
@media (max-width: 959px) { .rc-card { margin-top: 64px; } .rc-arch { top: -72px; } }
@media (min-width: 960px) { .rc-grid { padding-top: 72px; } .rc-copy { padding-top: 0; } }
.rc-copy h1 { color: #fff; }
.rc-lead { color: rgba(245, 241, 234, .82); }
.rc-copy .rc-trust { margin-top: var(--s4); }
.rc-trust li { color: #f5f1ea; }
.rc-trust .ico { color: #dcc08a; }
.rc-grid { grid-template-areas: "copy" "reel" "card"; }
@media (min-width: 960px) {
	.rc-grid { grid-template-areas: "copy card" "reel card"; grid-template-rows: auto 1fr; align-items: start; }
	.rc-card { position: relative; top: auto; }
}
.rc-pic { box-shadow: 0 0 0 1px rgba(220, 192, 138, .28), 0 14px 26px -16px rgba(0, 0, 0, .7); background: #2b1546; }
.rc-pic figcaption { background: linear-gradient(to top, rgba(29, 14, 48, .88), rgba(29, 14, 48, 0)); }

/* the sign-up card: white on the night stage, a champagne hairline around it */
.rc-card { position: relative; color: var(--ink); border: 0; box-shadow: 0 0 0 1px rgba(201, 164, 92, .45), 0 40px 80px -36px rgba(0, 0, 0, .75); }
.rc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; margin-bottom: var(--s4);
	border-bottom: 1px solid var(--frame-soft); }
.rc-card-head b { font: 800 1.18rem/1.3 var(--text); letter-spacing: -.01em; color: var(--ink); }
.rc-card-head span { color: var(--champ-ink); font-weight: 600; font-size: .92rem; }

/* ---------- "כך זה ייראה אצלכם": two examples of the product, on a champagne stage ---------- */
.rc-show-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.rc-show-head h2 { margin: 0; }
.rc-show-head p { margin: 0; color: var(--ink-2); font-size: 1.08rem; max-width: 52ch; }
.rc-show-grid { display: grid; gap: var(--s4); padding: clamp(18px, 4vw, 44px); border-radius: 32px; background: var(--wash); border: 1px solid var(--frame-soft); align-items: start; }
@media (min-width: 760px) { .rc-show-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); } .rc-mock-page { margin-top: 36px; } }
@media (min-width: 1100px) { .rc-show-grid { padding-inline: 56px; gap: 48px; } }
.rc-mock { position: relative; margin: 0; background: var(--paper); border: 1px solid var(--frame-soft); border-radius: 24px; overflow: hidden; text-align: start;
	box-shadow: 0 30px 60px -40px var(--glow); pointer-events: none; user-select: none; -webkit-user-select: none; }
.rc-mock-tag { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px;
	border-radius: 999px; background: var(--paper); border: 1px solid var(--frame); color: var(--ink-2); font: 600 .8rem/1 var(--text); }
.rc-mock-lead > div { padding: 20px; display: grid; gap: 14px; }
.rc-ml-top { display: flex; align-items: center; gap: 12px; padding-inline-end: 70px; }
.rc-ml-top > span:last-child { display: grid; gap: 2px; }
.rc-ml-top b { font: 800 1.12rem/1.3 var(--text); color: var(--ink); }
.rc-ml-top small { color: var(--ink-2); font-size: .88rem; }
.rc-ml-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--blush); color: var(--rose-2); flex: none; }
.rc-ml-ic .ico { width: 22px; height: 22px; }
.rc-ml-dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border-radius: 16px; overflow: hidden; background: var(--frame-soft);
	border: 1px solid var(--frame-soft); }
.rc-ml-row { background: var(--paper); padding: 10px 14px; display: grid; gap: 2px; }
.rc-ml-row dt { color: var(--ink-2); font-size: .82rem; }
.rc-ml-row dd { margin: 0; color: var(--ink); font-weight: 700; }
.rc-ml-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--wash); color: var(--ink); line-height: 1.5; }
.rc-ml-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; color: var(--on-btn); font-weight: 700;
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px var(--glow); }
.rc-ml-btn .ico { width: 18px; height: 18px; }
.rc-mp-cover { aspect-ratio: 16 / 9; background: var(--blush); overflow: hidden; }
.rc-mp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-mp-body { padding: 16px 20px 20px; display: grid; gap: 6px; }
.rc-mp-name { font: 800 1.25rem/1.25 var(--text); color: var(--ink); letter-spacing: -.01em; }
.rc-mp-line { color: var(--ink-2); }
.rc-mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.rc-mp-chips > span { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--frame); font-size: .82rem; font-weight: 600; color: var(--ink); }
.rc-mp-chips .ico { width: 14px; height: 14px; color: var(--champ-ink); }
.rc-mp-pk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--frame-soft); color: var(--ink); }
.rc-mp-pk b { color: var(--rose-2); font-variant-numeric: tabular-nums; }

/* ---------- the closing band: the night stage again, a champagne button with aubergine text (7.7:1) ---------- */
.rc-band { background: radial-gradient(70% 120% at 95% 0%, rgba(77, 40, 120, .95), transparent 62%), linear-gradient(160deg, #2b1546, #1d0e30);
	box-shadow: 0 0 0 1px rgba(201, 164, 92, .35), 0 30px 60px -36px rgba(29, 14, 48, .8); }
.rc-band p { color: rgba(245, 241, 234, .84); }
.rc-band .btn.rc-band-btn, .rc-band .btn.rc-band-btn:hover { background: linear-gradient(180deg, #dcc08a, #c9a45c); color: #1d0e30; }
.rc-band .btn.rc-band-btn .ico { color: #1d0e30; }
.rc-band .btn.rc-band-btn:hover { background: #dcc08a; }

/* dark: the stages one step apart */
:root[data-theme=dark] .rc-band { box-shadow: 0 0 0 1px rgba(201, 164, 92, .35); }
:root[data-theme=dark] .rc-show-grid { background: #111113; }
:root[data-theme=dark] .rc-mock, :root[data-theme=dark] .rc-ml-row, :root[data-theme=dark] .rc-mock-tag { background: #1c1c1e; }
:root[data-theme=dark] .rc-ml-note { background: #2c2c2e; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) .rc-show-grid { background: #111113; }
	:root:not([data-theme=light]) .rc-mock, :root:not([data-theme=light]) .rc-ml-row, :root:not([data-theme=light]) .rc-mock-tag { background: #1c1c1e; }
	:root:not([data-theme=light]) .rc-ml-note { background: #2c2c2e; }
	:root:not([data-theme=light]) .rc-band { box-shadow: 0 0 0 1px rgba(201, 164, 92, .35); }
}
@media (forced-colors: active) { .rc, .rc-band { background: Canvas; color: CanvasText; } .rc-copy h1, .rc-trust li, .rc-lead { color: CanvasText; } }

/* ================= v2.0 round 4 (9/11) "שוברים את הכללים" is the centre of the page - owner's pick: old rules vs new =================
   The headline's first words alone, very large, in champagne; the rest of the headline under them. Then the old rules of the
   trade, each struck out by a champagne line that draws itself once on load (one after the other - the page's one moment),
   and beside each what is true here. The main buttons say the same thing: "לשבור את הכללים – הצטרפות בחינם". */
.rc-copy h1 { font: inherit; margin: 0; letter-spacing: normal; }
.rc-big { display: block; font: 800 clamp(2.7rem, 11.5vw, 5.6rem)/.98 var(--text); letter-spacing: -.04em; color: #e6cd96;
	background: linear-gradient(180deg, #f3e2b8 10%, #c9a45c 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	padding-bottom: .06em; text-wrap: balance; }
.rc-h1s { display: block; margin-top: 14px; font: 700 clamp(1.18rem, 4.6vw, 1.85rem)/1.3 var(--text); letter-spacing: -.015em; color: #fff; max-width: 24ch; text-wrap: balance; }
.rc-rules { list-style: none; margin: clamp(20px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: 0; max-width: 560px; }
.rc-rules li { display: grid; justify-items: start; align-content: start; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(220, 192, 138, .2); }
.rc-rules li:last-child { border-bottom: 1px solid rgba(220, 192, 138, .2); }
.rc-rules s { position: relative; text-decoration: none; color: rgba(245, 241, 234, .6); font-size: .98rem; }
.rc-rules s::after { content: ''; position: absolute; inset-inline: -2px; top: 54%; height: 2px; border-radius: 2px; background: #dcc08a; transform-origin: 100% 50%; }
.rc-new { color: #fff; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: baseline; gap: 8px; }
.rc-new::before { content: '←'; color: #dcc08a; font-weight: 700; }
.rc-cta { margin: var(--s5) 0 0; }
.rc-cta .btn { min-height: 54px; padding-inline: 26px; font-size: 1.06rem; }
@media (min-width: 960px) { .rc-cta { display: none; } }   /* on wide screens the form's own button is right beside it */
@media (min-width: 601px) { .rc-rules { grid-template-columns: 1fr 1fr; column-gap: 28px; } .rc-rules li:nth-last-child(2) { border-bottom: 1px solid rgba(220, 192, 138, .2); } }
@media (max-width: 600px) { .rc-cta .btn { width: 100%; justify-content: center; } }
/* the strike draws itself, rule after rule, and the new rule appears after its line - once */
@keyframes rc-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rc-in { from { opacity: 0; translate: -8px 0; } to { opacity: 1; translate: 0 0; } }
.js .rc-rules s::after { animation: rc-strike .45s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(.35s + var(--i, 0) * .32s); }
.js .rc-rules .rc-new { animation: rc-in .4s var(--ease-out, cubic-bezier(.32, .72, 0, 1)) both; animation-delay: calc(.6s + var(--i, 0) * .32s); }
.rc-rules li:nth-child(2) { --i: 1; } .rc-rules li:nth-child(3) { --i: 2; } .rc-rules li:nth-child(4) { --i: 3; }
@media (prefers-reduced-motion: reduce) { .js .rc-rules s::after, .js .rc-rules .rc-new { animation: none; } }
@media (forced-colors: active) { .rc-big { -webkit-text-fill-color: CanvasText; background: none; } .rc-rules s { text-decoration: line-through; } .rc-rules s::after { display: none; } }
.rc-band h2 { max-width: 18ch; }
.rc-go .btn, .rc-dock .btn { white-space: normal; text-align: center; line-height: 1.25; }

/* ================= v2.0.2 (9/11) one topic = one screen (owner's iron rule) =================
   Each section of the recruitment page fits one screen under the header at 1440x900 and 1366x768: the sign-up card is
   wider (the field chips wrap in 4 rows instead of 7) and compact, the phone sits beside the names, (9/11 refined rule) the
   sections below keep their full spacing and photos. Phones: the same order, as short as it goes. */
.rc-chip span { min-height: 40px; padding: 0 12px 0 14px; font-size: .92rem; gap: 6px; }
.rc-chip .ico { width: 16px; height: 16px; }
.rc-chips { gap: 6px; }
.rc-cats legend { margin-bottom: 6px; }
.rc-ai .field-help { font-size: .8rem; line-height: 1.45; }
.rc-terms, .rc-ai { font-size: .92rem; }
@media (min-width: 960px) {
	.rc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); padding-top: 60px; row-gap: var(--s4); }
	.rc { padding-bottom: 36px; }
	.rc-card { padding: 18px 22px 20px; }
	.rc-card-head { padding-bottom: 10px; margin-bottom: 12px; }
	.rc-form, .rc-code { gap: 12px; }
	.rc-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 12px; }
	.rc-form > * { grid-column: 1 / -1; }
	.rc-form > .rc-two { grid-column: 1; }
	.rc-form > .rc-phone { grid-column: 2; }
	.rc-arch { top: -66px; }
	.rc-go { padding: 8px; }
	.rc-go .btn { min-height: 50px; }
	.rc-big { font-size: clamp(3rem, 6.4vw, 5.2rem); }
	.rc-rules li { padding: 8px 0; }
	.rc-show .rc-show-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--s5); margin-bottom: var(--s4); }
}
@media (min-width: 960px) {
	.rc { padding-top: 0; }
	.rc-grid { padding-top: 58px; }
	.rc-arch { top: -60px; }
	.rc-form, .rc-code { gap: 10px; }
	.rc-card-head { padding-bottom: 8px; margin-bottom: 10px; }
}
@media (pointer: coarse) { .rc-chip span { min-height: 44px; } }   /* touch: 44px targets */
/* phones (9/11 refined rule): the two examples stay one under the other, full photo, comfortable spacing - nothing hidden behind a swipe */
@media (max-width: 759px) { .rc-show-grid { gap: var(--s5); } }
.rc-band .btn.rc-band-btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }   /* the long label wraps instead of widening the page */
@media (max-width: 600px) { .rc-band .btn.rc-band-btn { width: 100%; justify-content: center; } }

/* admin: permanent delete (11/11, server/ph/purge.py) - the list of what goes, the account tick, the confirm button that waits for the typed word */
.del-list { margin: var(--s2) 0 var(--s3); padding-inline-start: 1.3em; line-height: 1.7; }
.del-acc { margin: var(--s3) 0 var(--s4); } .del-acc .del-sub { display: block; }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger.solid:hover { background: var(--bad); border-color: var(--bad); color: #fff; filter: brightness(.94); }
.btn.danger.solid[disabled] { opacity: .45; cursor: not-allowed; filter: none; }