/* Self-hosted web fonts (SIL Open Font License), generated by site/tools/fetch-fonts.mjs. */
@font-face {font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/literata-400-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/literata-400-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/literata-400-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/literata-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Wix Madefor Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/wix-madefor-text-400-800-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Wix Madefor Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/wix-madefor-text-400-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Wix Madefor Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/wix-madefor-text-400-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Wix Madefor Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/wix-madefor-text-400-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/frank-ruhl-libre-400-700-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-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/heebo-400-700-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}

/* wherewe.net: Guidebook
   The cool grey-green of land on a light map, one book serif (Literata) for
   headings and text, a sans (Wix Madefor Text) only for labels and controls,
   and Alex's own photos as flat plates, each with its place name. Teal and
   coral appear only where they mean Been, Want, or an action. Sections are set
   apart by space and bands of colour, not rules.
   One stylesheet for every page, static and server-rendered. Layout uses
   logical properties (inline-start/end), so Hebrew mirrors without separate rules. */

:root {
  --fog: #EEF1EE;      /* page: land on a light map */
  --fog-2: #E3E8E4;    /* bands */
  --fog-3: #D9E0DB;    /* empty frames, skeleton lines */
  --plate: #FFFFFF;    /* photo mats, cards */
  --slate: #17222B;    /* text, dark bands */
  --slate-2: #2E3A44;  /* secondary text */
  --stone: #5B6770;    /* quiet text: 5.1:1 on fog, 4.7:1 on fog-2 */
  --line: #D3DAD5;
  --line-2: #BCC6C0;
  --teal: #12B3A8;     /* Been marks */
  --teal-ink: #08776F; /* teal text and links: 4.8:1 on fog, 5.4:1 on white */
  --coral: #F5533F;    /* Want marks */
  --coral-ink: #C2381F;
  --serif: "Literata", "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Wix Madefor Text", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-photo: 4px;      /* photo plates */
  --r-control: 10px;   /* buttons, inputs, chips */
  --r-panel: 14px;     /* cards and panels */
  --wrap: 1180px;
  --gutter: 32px;
  color-scheme: light;

  /* The names the server pages' own CSS uses (functions/src): kept as aliases. */
  --paper: var(--fog);
  --paper-2: var(--fog-2);
  --paper-3: var(--fog-3);
  --card: var(--plate);
  --ink: var(--slate);
  --ink-2: var(--slate-2);
  --muted: var(--stone);
  --rule: var(--line);
  --rule-2: var(--line-2);
  --teal-display: var(--teal-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--fog); color: var(--slate);
  font: 400 18px/1.62 var(--serif);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; line-height: 1.15; overflow-wrap: break-word; }
p, li { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--slate); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 99; font-family: var(--sans); }
.skip:focus { inset-inline-start: 12px; }
:lang(he) body { font-size: 19px; }

/* ---------- controls and small pieces (sans) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-control); border: 0; font: 600 15.5px/1.2 var(--sans); text-align: center; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.btn--sm { min-height: 38px; padding: 0 15px; font-size: 14.5px; border-radius: 8px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn--ink { background: var(--slate); color: #fff; }
.btn--ink:hover { background: #2A3843; }
.btn--teal { background: var(--teal-ink); color: #fff; }
.btn--teal:hover { background: #066860; }
.btn--line { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--line-2); min-height: 44px; }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--slate); }
.textlink { display: inline-block; font: 600 15.5px/1.3 var(--sans); color: var(--slate); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.textlink:hover { color: var(--teal-ink); }
.arr { display: inline-block; }
[dir="rtl"] .arr { transform: scaleX(-1); }
.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { max-width: none; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta__note { font: 500 14.5px/1.3 var(--sans); color: var(--stone); }
.lead { font-size: 21px; line-height: 1.55; color: var(--slate-2); }
/* Labels: sentence case, in the sans. Never tracked capitals. */
.eyebrow, .kicker { display: block; font: 600 14.5px/1.4 var(--sans); color: var(--stone); }
.kicker__dot { display: none; }
.url { font: 500 .9em/1.3 var(--sans); background: var(--fog-2); padding: 3px 8px; border-radius: 6px; color: var(--slate); overflow-wrap: anywhere; }
.small { font: 400 14px/1.5 var(--sans); color: var(--stone); }
.aside { margin-top: 22px; font: 400 15px/1.55 var(--sans); color: var(--stone); max-width: 44ch; }

/* Plain bullets: teal and coral mean Been and Want, so lists stay neutral. */
.bullets { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 12px; font: 400 16px/1.5 var(--sans); color: var(--slate-2); max-width: 46ch; }
.bullets li { position: relative; padding-inline-start: 24px; }
.bullets li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }

.phone {
  --w: 230px;
  width: var(--w); flex: none; padding: calc(var(--w) * .028);
  background: #0B0F16; border-radius: calc(var(--w) * .16);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 48px -20px rgba(15, 30, 40, .45), 0 6px 14px -6px rgba(15, 30, 40, .25);
}
.phone img { width: 100%; border-radius: calc(var(--w) * .135); background: #10141b; }

/* Alex's photos: flat on a white plate, the place's name under them. */
.plate { background: var(--plate); padding: 10px; border-radius: var(--r-photo); box-shadow: 0 1px 2px rgba(23, 34, 43, .06), 0 18px 40px -28px rgba(23, 34, 43, .4); }
.plate img { width: 100%; border-radius: 2px; background: var(--fog-2); }
.cap { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 14px/1.3 var(--sans); color: var(--slate-2); }
.pin { width: 12px; height: 16px; flex: none; }
.pin path { fill: var(--teal); }
.pin circle { fill: #fff; }
.credit { margin-top: 6px; font: 400 13.5px/1.5 var(--sans); color: var(--stone); max-width: 46ch; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(238, 241, 238, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); font-family: var(--sans); }
.top__in { display: flex; align-items: center; height: 66px; gap: 28px; }
/* The W sits left of the name in every language: only the lockup reads left to right; where it stands still follows the page. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; direction: ltr; unicode-bidi: isolate; }
.brand img { width: 30px; height: auto; }
.wordmark { font: 800 20px/1 var(--sans); letter-spacing: -.03em; color: var(--slate); }
.wordmark b { color: var(--teal-ink); font-weight: 800; }
.nav { display: flex; gap: 2px; margin-inline-start: 12px; }
.nav a { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--slate-2); border-radius: 8px; white-space: nowrap; }
.nav a:hover { background: var(--fog-2); color: var(--slate); }
.nav a[aria-current="page"] { color: var(--slate); font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.top__end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.top__get { white-space: nowrap; }
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--slate-2); font: 500 14px/1 var(--sans); cursor: pointer; }
.lang__btn:hover, .lang.open .lang__btn { border-color: var(--slate); }
.lang__btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang__btn .caret { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lang.open .caret { transform: rotate(180deg); }
.lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 184px; margin: 0; padding: 6px; list-style: none; background: var(--plate); border-radius: var(--r-control); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -12px rgba(23,34,43,.25); z-index: 60; }
.lang__menu a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 7px; font-size: 15px; color: var(--slate-2); }
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--fog); outline-offset: -2px; }
.lang__menu a[aria-current] { font-weight: 600; color: var(--slate); }
[dir="ltr"] .lang__menu a[dir="rtl"] { flex-direction: row-reverse; } /* עברית lines up with the others */
.lang__menu a[aria-current]::after { content: "✓"; color: var(--teal-ink); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; flex: none; border-radius: 8px; }
.burger span { position: absolute; inset-inline: 12px; height: 1.6px; background: var(--slate); transition: transform .2s; }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.drawer { padding: 6px var(--gutter) 18px; box-shadow: 0 -1px 0 var(--line); }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a { padding: 13px 2px; font: 500 24px/1.15 var(--serif); }
.drawer__nav a[aria-current="page"] { color: var(--teal-ink); }
.drawer__langs { display: none; list-style: none; margin: 8px 0 0; padding: 14px 0 0; box-shadow: 0 -1px 0 var(--line); flex-wrap: wrap; gap: 8px; }
.drawer__langs a { display: inline-block; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 14.5px; color: var(--slate-2); }
.drawer__langs a[aria-current] { background: var(--slate); border-color: var(--slate); color: #fff; font-weight: 600; }

/* ---------- section titles ---------- */
.section-title, .chapter h2, .publish h2, .creators h2, .pricing h2, .faq h2, .band h2, .review h2, .rules h2, .contact h2, .flow h2 {
  font: 500 clamp(34px, 3.8vw, 50px)/1.08 var(--serif); letter-spacing: -.018em; max-width: 16ch;
}
:lang(he) :is(.section-title, .chapter h2, .publish h2, .creators h2, .pricing h2, .faq h2, .band h2, .review h2, .rules h2, .contact h2, .flow h2) { font-weight: 600; letter-spacing: 0; line-height: 1.15; }

/* ---------- home: hero ---------- */
.hero { padding: 72px 0 96px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: start; }
.hero__copy { padding-top: 40px; }
.hero h1 { font: 500 clamp(48px, 5.6vw, 76px)/1.04 var(--serif); letter-spacing: -.022em; max-width: 13ch; }
:lang(he) .hero h1 { font-weight: 600; line-height: 1.12; letter-spacing: 0; }
:lang(ru) .hero h1 { font-size: clamp(44px, 5vw, 68px); }
.hero .lead { margin-top: 26px; max-width: 34ch; }
.hero__more { margin-top: 26px; }
.hero__creator { margin-top: 56px; font: 400 15px/1.5 var(--sans); color: var(--stone); max-width: 44ch; }
.hero__creator a { font-weight: 600; color: var(--slate); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.hero__creator a:hover { color: var(--teal-ink); text-decoration-color: currentColor; }
.hero__fig { position: relative; padding-inline-start: 80px; }
.hero__fig .phone--rest { --w: 236px; position: absolute; inset-inline-start: 0; bottom: 92px; }

/* ---------- home: how it works, and any numbered sequence of steps ---------- */
.how { padding: 64px 0 72px; background: var(--plate); }
.how h2 { font: 500 30px/1.15 var(--serif); letter-spacing: -.01em; }
.steps { list-style: none; padding: 0; margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps a, .steps h3 { display: flex; align-items: baseline; gap: 12px; font: 500 23px/1.2 var(--serif); }
.steps a:hover .steps__t { color: var(--teal-ink); }
.steps__n { font: 600 15px/1 var(--sans); color: var(--stone); min-width: 1.2em; flex: none; }
.steps p { margin-top: 10px; padding-inline-start: calc(1.2em + 12px); font: 400 15.5px/1.55 var(--sans); color: var(--slate-2); max-width: 36ch; }

/* ---------- home: chapters ---------- */
.chapter { padding: 120px 0; }
.chapter + .chapter:not(.chapter--dark) { padding-top: 40px; }
.chapter__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.chapter--flip .chapter__copy { order: 2; }
.chapter h2 { font-size: clamp(36px, 3.9vw, 52px); max-width: 15ch; }
.chapter__p { margin-top: 20px; color: var(--slate-2); max-width: 44ch; }

/* A place photo on its plate; the app screen stands beside it, over its edge only. */
.duo { position: relative; justify-self: center; width: 100%; max-width: 560px; padding-bottom: 8px; }
.duo .plate, .duo .cap { width: 74%; }
.duo--wide .plate, .duo--wide .cap { width: 80%; }
.duo--phone-start .plate, .duo--phone-start .cap { margin-inline-start: auto; }
.duo--phone-start .cap { justify-content: flex-end; } /* keeps the place name clear of the phone */
.duo--solo .plate, .duo--solo .cap { width: 78%; margin-inline: auto; }
.duo .phone { --w: 190px; position: absolute; bottom: -12px; }
.duo--phone-start .phone { inset-inline-start: 0; }
.duo--phone-end .phone { inset-inline-end: 0; }
.chapter--dark { background: var(--slate); color: #F2F5F3; margin-top: 80px; }
.chapter--dark .chapter__p { color: rgba(242, 245, 243, .82); }
.chapter--dark .plate { background: #24313B; box-shadow: none; }
.chapter--dark .plate img { background: #2E3A44; }
.chapter--dark .cap { color: rgba(242, 245, 243, .82); }
.chapter--dark .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -24px rgba(0,0,0,.8); }
.chapter--dark :focus-visible { outline-color: var(--teal); }

/* ---------- home: more ---------- */
.more { padding: 110px 0 100px; }
.more h2 { font: 500 34px/1.12 var(--serif); letter-spacing: -.012em; }
.cols { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cols h3 { font: 600 17px/1.3 var(--sans); }
.cols p { margin-top: 8px; font: 400 15.5px/1.6 var(--sans); color: var(--slate-2); }

/* ---------- home: publish + the listed maps ---------- */
.publish { padding: 110px 0; background: var(--fog-2); }
.publish__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.publish .chapter__p { color: var(--slate-2); }

/* The public map page, drawn. */
.sheet { background: var(--plate); border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 1px 2px rgba(23,34,43,.06), 0 30px 60px -36px rgba(23,34,43,.45); font-family: var(--sans); }
.sheet__url { padding: 12px 18px; font: 500 13px/1 var(--sans); color: var(--stone); text-align: center; background: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__map svg { width: 100%; height: auto; }
.sheet .pin path { stroke: #fff; stroke-width: 1.5; }
.pin--coral path { fill: var(--coral); }
.pin--teal path { fill: var(--teal); }
.sheet__body { padding: 20px 22px 16px; }
.sheet__title { font: 500 30px/1.05 var(--serif); text-align: start; }
[dir="rtl"] .sheet__title { text-align: right; }
.sheet__by { margin-top: 4px; font-size: 14px; color: var(--stone); }
.sheet__btns { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.sheet__btns span { min-height: 32px; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; line-height: 1.2; }
.sheet__btns .b1 { background: var(--teal-ink); color: #fff; }
.sheet__btns .b2 { box-shadow: inset 0 0 0 1px var(--line-2); }
.sheet__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; box-shadow: 0 -1px 0 var(--fog-2); }
.sheet__row i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sheet__row i.c { background: var(--coral); } .sheet__row i.t { background: var(--teal); }
.sk { display: block; height: 8px; border-radius: 4px; background: var(--fog-2); }
.sk--a { width: 38%; } .sk--b { width: 28%; }
.sheet__row em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--fog); color: var(--slate-2); white-space: nowrap; }
.sheet__row em:first-of-type { margin-inline-start: auto; }
.sheet figcaption { padding: 10px 14px; font-size: 12.5px; color: var(--stone); text-align: center; background: var(--fog); }

/* Lists of maps (home showcase, Explore): a head line, then rows or an empty state. */
.index { margin-top: 96px; }
.index__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.index__head h2 { font: 500 32px/1.1 var(--serif); letter-spacing: -.01em; max-width: none; }
.index__head p { flex: 1 1 320px; font: 400 15px/1.5 var(--sans); color: var(--stone); }
.index__loading { padding: 40px 0; font: 400 15px/1.5 var(--sans); color: var(--stone); }
.index.is-ready .index__loading { display: none; }
html:not(.js) .index__loading { display: none; }
.index__empty { margin-top: 26px; padding: 40px 36px; background: var(--plate); border-radius: var(--r-panel); display: grid; justify-items: start; gap: 10px; max-width: 640px; }
.js .index:not(.is-ready) .index__empty, .index.has-maps .index__empty { display: none; }
.index__mark { width: 40px; height: 40px; margin-bottom: 6px; }
.index__mark path { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.index__mark circle { fill: var(--plate); stroke: var(--teal); stroke-width: 2.5; }
.index__none { font: 500 26px/1.15 var(--serif); }
.index__empty p { font: 400 16px/1.55 var(--sans); color: var(--slate-2); max-width: 52ch; }
.index__empty .btn { margin-top: 10px; }
.index__list { list-style: none; padding: 0; margin: 20px 0 0; }
.index__row { display: grid; grid-template-columns: 64px 2.2fr .7fr 1.2fr; align-items: center; gap: 20px; padding: 14px 0; box-shadow: 0 1px 0 var(--line); font-family: var(--sans); }
.index__row:hover .index__title { color: var(--teal-ink); }
.index__cover { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--fog-3); }
.index__cover img { width: 100%; height: 100%; object-fit: cover; }
.index__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.index__title { font: 500 22px/1.2 var(--serif); overflow-wrap: anywhere; }
.index__by, .index__where { font-size: 14px; color: var(--stone); }
.index__count { font-size: 15px; font-weight: 600; color: var(--slate-2); }
.index__tag { display: inline-block; margin-inline-start: 4px; padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12px/1.3 var(--sans); color: var(--slate-2); vertical-align: 3px; }

/* ---------- home: creators teaser ---------- */
.creators { padding: 110px 0; }
.creators__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.creators__body { color: var(--slate-2); max-width: 48ch; }
.creators .btn { margin-top: 32px; }

/* ---------- home: pricing ---------- */
.pricing { padding: 110px 0; background: var(--plate); }
.pricing__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; }
.pricing__head p { font: 400 16px/1.5 var(--sans); color: var(--stone); max-width: 44ch; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.plan { padding: 30px 32px 32px; background: var(--fog); border-radius: var(--r-panel); }
.plan h3 { font: 500 32px/1.05 var(--serif); }
.plan__cap { margin-top: 6px; font: 400 14px/1.4 var(--sans); color: var(--stone); }
.plan ul { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; font: 400 15.5px/1.5 var(--sans); color: var(--slate-2); }
.plan li { position: relative; padding-inline-start: 22px; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }
.plan--pro { background: var(--slate); color: #F2F5F3; }
.plan--pro .plan__cap { color: rgba(242,245,243,.72); }
.plan--pro ul { color: rgba(242,245,243,.88); }
.plan--pro li::before { background: rgba(242,245,243,.6); }
.pricing__note { margin-top: 22px; font: 400 14px/1.5 var(--sans); color: var(--stone); max-width: 80ch; }

/* ---------- questions: the home teaser and the accordions ---------- */
.faq { padding: 110px 0; }
.faq__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; }
.qa { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.qa h3 { font: 500 23px/1.25 var(--serif); }
.qa h3 a:hover { color: var(--teal-ink); }
.qa p { margin-top: 10px; font: 400 15.5px/1.6 var(--sans); color: var(--slate-2); }
.accordion { margin-top: 18px; }
.qa-item { box-shadow: 0 1px 0 var(--line); }
.qa-item summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary h3 { font: 500 22px/1.3 var(--serif); }
.qa-item summary::after { content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2);
  background: linear-gradient(var(--slate), var(--slate)) center / 10px 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) center / 1.5px 10px no-repeat; transition: transform .2s; }
.qa-item[open] summary::after { transform: rotate(45deg); }
.qa-item summary:hover h3 { color: var(--teal-ink); }
.qa-item__a { padding: 0 0 22px; padding-inline-end: 46px; }
.qa-item__a p { font: 400 16px/1.6 var(--sans); color: var(--slate-2); max-width: 70ch; }
.qa-item__a a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.qa-item__link { margin-top: 12px; padding: 4px 0; border: 0; background: none; font: 600 13.5px/1.3 var(--sans); color: var(--stone); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.qa-item__link:hover { color: var(--teal-ink); }

/* ---------- closing band ---------- */
.close { padding: 100px 0 108px; background: var(--slate); color: #F2F5F3; }
.close__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.close h2 { font: 500 clamp(44px, 5.6vw, 76px)/1.02 var(--serif); letter-spacing: -.022em; }
:lang(he) .close h2 { font-weight: 600; letter-spacing: 0; line-height: 1.12; }
.close p { font: 400 17px/1.45 var(--sans); color: rgba(242,245,243,.82); }
.close .badge, .close .btn { margin-top: 12px; }
.close :focus-visible { outline-color: var(--teal); }
/* Home: the words in the sky of Alex's photo of Lake Lugano (slate type: 6.7:1 on that sky). */
.close--photo { padding: 0 0 110px; background: none; color: var(--slate); }
.close__fig { position: relative; }
.close__fig picture img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; object-position: 50% 72%; border-radius: var(--r-photo); background: var(--fog-2); }
.close--photo .close__in { position: absolute; inset-inline: 0; top: 0; padding: 60px 48px 0; }
.close--photo h2 { font-size: clamp(48px, 6vw, 84px); line-height: 1; }
.close--photo p { color: var(--slate); font-weight: 500; }
.close--photo .cap { margin-top: 14px; }
.close--photo :focus-visible { outline-color: var(--slate); }

/* ---------- footer ---------- */
.foot { padding: 64px 0 36px; background: var(--plate); font-family: var(--sans); }
.foot__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px 64px; flex-wrap: wrap; }
.foot__brand { max-width: 360px; }
.foot__brand p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--stone); }
.foot__brand .foot__contact a { color: var(--slate); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.foot__badge { margin-top: 22px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(140px, auto)); gap: 32px 56px; }
.foot__cols nav { display: flex; flex-direction: column; gap: 4px; }
.foot__cols h2 { font: 600 14.5px/1.3 var(--sans); color: var(--slate); margin-bottom: 6px; }
.foot__cols a { padding: 5px 0; font-size: 15px; line-height: 1.3; color: var(--slate-2); display: inline-flex; align-items: center; gap: 6px; }
.foot__cols a:hover { color: var(--teal-ink); }
.tag { font: 600 10.5px/1 var(--sans); padding: 3px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--stone); }
.foot__base { margin-top: 48px; display: flex; justify-content: space-between; gap: 12px 40px; font-size: 12.5px; line-height: 1.5; color: var(--stone); }
.foot__base p:first-child { white-space: nowrap; }
.foot__base p:last-child { max-width: 640px; text-align: end; }

/* ---------- page tops (creators, help, download, 404, join, Explore, maps) ---------- */
.phero { position: relative; padding: 80px 0 72px; }
.phero__topo { display: none; } /* the old contour art: the server pages may still send it */
.phero h1 { max-width: 17ch; font: 500 clamp(44px, 5.4vw, 72px)/1.05 var(--serif); letter-spacing: -.022em; }
:lang(he) .phero h1 { font-weight: 600; letter-spacing: 0; line-height: 1.12; }
.phero .lead { margin-top: 24px; max-width: 46ch; }
.phero__url { margin-top: 28px; font: 400 15px/1.5 var(--sans); color: var(--stone); }
.phero__url .url { font-size: 16px; }

/* Search (help, Explore) */
.search { position: relative; margin-top: 32px; max-width: 560px; }
.search svg { position: absolute; top: 50%; inset-inline-start: 18px; transform: translateY(-50%); fill: none; stroke: var(--stone); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; height: 56px; padding: 0 20px; padding-inline-start: 50px; border-radius: var(--r-control); border: 1.5px solid var(--line-2); background: var(--plate); font: 400 17px/1 var(--sans); color: var(--slate); }
.search input::placeholder { color: #67727A; }
.search input:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 4px rgba(18,179,168,.18); }

/* ---------- creators ---------- */
.flow { padding: 96px 0 104px; background: var(--plate); }
.storyboard { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.frame { display: flex; flex-direction: column; }
.frame__art { height: 400px; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: var(--r-panel); background: var(--fog); }
.frame__art .phone { --w: 150px; }
.frame__art .sheet { width: 100%; max-width: 280px; box-shadow: 0 20px 40px -30px rgba(23,34,43,.5); }
.sheet--compact .sheet__body { padding: 14px 16px 10px; }
.sheet--compact .sheet__title { font-size: 22px; }
.sheet--compact .sheet__btns { margin: 10px 0 6px; }
.sheet--compact .sheet__btns span { font-size: 11.5px; min-height: 28px; padding: 4px 10px; }
.sheet--compact .sheet__row em:last-child, .sheet--compact .sheet__row:last-child { display: none; }
.sheet--compact figcaption { font-size: 11.5px; padding: 8px 10px; }
.post { width: 200px; background: var(--plate); border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 20px 40px -30px rgba(23,34,43,.5); }
.post__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 600 12.5px/1 var(--sans); }
.post__head i { width: 22px; height: 22px; border-radius: 50%; background: var(--fog-3); }
.post__photo svg { width: 100%; height: auto; }
.post__lines { padding: 12px 12px 4px; display: grid; gap: 7px; }
.post__lines .sk--a { width: 86%; } .post__lines .sk--b { width: 58%; }
.post__link { margin: 8px 12px 14px; padding: 6px 9px; border-radius: 6px; background: var(--fog); font: 600 11.5px/1.2 var(--sans); color: var(--teal-ink); }
.frame__n { margin-top: 22px; font: 500 23px/1.2 var(--serif); }
.frame__d { margin-top: 8px; font: 400 15.5px/1.55 var(--sans); color: var(--slate-2); max-width: 36ch; }
.flow .steps { margin-top: 72px; }
.flow .steps h3 { font-size: 25px; }
.flow .steps p { max-width: 40ch; }
.later { margin-top: 56px; padding: 26px 30px; border-radius: var(--r-panel); background: var(--fog); max-width: 720px; }
.later h3 { font: 600 17px/1.3 var(--sans); }
.later p { margin-top: 6px; font: 400 15.5px/1.55 var(--sans); color: var(--slate-2); }

.band { padding: 104px 0; background: var(--fog-2); }
.band__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: start; }
.band .bullets { max-width: 52ch; font-size: 16.5px; }
.band__note { margin-top: 22px; font: 400 15px/1.55 var(--sans); color: var(--stone); max-width: 52ch; }
.bio { padding: 32px; background: var(--plate); border-radius: var(--r-panel); }
.bio h3 { font: 500 30px/1.1 var(--serif); }
.bio p { margin-top: 12px; font: 400 16px/1.55 var(--sans); color: var(--slate-2); }

.review { padding: 104px 0; background: var(--slate); color: #F2F5F3; }
.review__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: start; }
.review__body { margin-top: 22px; color: rgba(242,245,243,.84); max-width: 54ch; }
.review .bullets { margin-top: 0; color: rgba(242,245,243,.88); max-width: none; }
.review .bullets li::before { background: rgba(242,245,243,.6); }
.rules { padding: 104px 0 64px; }
.rules .bullets { margin-top: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 56px; max-width: none; font-size: 16.5px; }
.rules__foot { margin-top: 30px; font: 400 15.5px/1.55 var(--sans); color: var(--stone); }
.rules__foot a { color: var(--slate); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.rules__foot a:hover { color: var(--teal-ink); text-decoration-color: currentColor; }
.faq--accordion { padding-top: 64px; }

/* ---------- help ---------- */
.phero--help { padding-bottom: 56px; }
.help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 24px; padding-bottom: 96px; align-items: start; }
.help__toc { position: sticky; top: 96px; }
.help__toc ol, .legal__toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.help__toc a, .legal__toc a { display: block; padding: 7px 0; font: 400 14.5px/1.35 var(--sans); color: var(--slate-2); }
.help__toc a:hover, .legal__toc a:hover { color: var(--teal-ink); }
.help__cat { padding-bottom: 44px; }
.help__cat > h2 { font: 500 clamp(30px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.012em; }
.help__none { display: none; padding: 28px 0; font: 400 17px/1.5 var(--sans); color: var(--slate-2); }
.help__none.show { display: block; }
.help__tour { padding: 18px 22px; border-radius: var(--r-panel); background: var(--plate); font: 400 15px/1.55 var(--sans); color: var(--slate-2); }
.guide { margin-top: 26px; padding: 26px 28px; border-radius: var(--r-panel); background: var(--slate); color: #F2F5F3; }
.guide h3 { font: 500 26px/1.15 var(--serif); }
.guide p { margin-top: 6px; font: 400 15px/1.5 var(--sans); color: rgba(242,245,243,.78); }
.guide ol { list-style: none; counter-reset: g; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide li { counter-increment: g; display: flex; gap: 10px; font: 400 15px/1.5 var(--sans); color: rgba(242,245,243,.92); }
.guide li::before { content: counter(g); flex: none; min-width: 1.2em; font-weight: 600; color: rgba(242,245,243,.66); }
.contact { padding: 88px 0 96px; background: var(--fog-2); }
.contact__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.contact h2 { max-width: none; }
.contact p { font: 400 17px/1.55 var(--sans); color: var(--slate-2); max-width: 50ch; }
.contact p a { color: var(--slate); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.contact .btn { margin-top: 8px; }

/* ---------- download ---------- */
.dl { padding: 72px 0 0; overflow: hidden; }
.dl__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; }
.dl__copy { padding-bottom: 88px; }
.dl h1 { font: 500 clamp(48px, 6vw, 84px)/1.02 var(--serif); letter-spacing: -.022em; }
:lang(he) .dl h1 { font-weight: 600; letter-spacing: 0; }
.dl .lead { margin-top: 20px; }
.dl__case { margin-top: 40px; }
.dl__case h2 { font: 500 26px/1.15 var(--serif); }
.dl__case p { margin-top: 10px; font: 400 16px/1.55 var(--sans); color: var(--slate-2); max-width: 44ch; }
.dl__case .badge, .dl__case .btn { margin-top: 22px; }
.dl__case--desktop { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding: 28px; background: var(--plate); border-radius: var(--r-panel); max-width: 640px; }
.dl__status { font: 500 26px/1.2 var(--serif) !important; color: var(--slate) !important; }
.qr { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--line); }
.qr svg { width: 100%; height: 100%; }
.dl__req { margin-top: 30px; font: 400 14px/1.5 var(--sans); color: var(--stone); }
.dl__art { display: flex; justify-content: center; height: 520px; align-items: flex-start; overflow: hidden; }
.dl__art .phone { --w: 280px; margin-top: 10px; }

/* ---------- 404 + join ---------- */
.nf, .join { min-height: 62vh; display: flex; align-items: center; padding: 80px 0; }
.nf__in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.nf__code { font: 600 15px/1 var(--sans); color: var(--stone); }
.nf h1 { margin-top: 14px; font: 500 clamp(40px, 5vw, 64px)/1.06 var(--serif); letter-spacing: -.018em; max-width: 16ch; }
:lang(he) .nf h1 { font-weight: 600; letter-spacing: 0; }
.nf .lead { margin-top: 18px; max-width: 40ch; }
.nf .cta { justify-content: center; }
.join__in { display: flex; justify-content: center; }
.join__card { width: 100%; max-width: 480px; padding: 40px 36px 34px; background: var(--plate); border-radius: var(--r-panel); box-shadow: 0 30px 60px -40px rgba(23,34,43,.45); text-align: center; }
.join__mark { width: 56px; margin: 0 auto; }
.join__card h1 { margin-top: 18px; font: 500 34px/1.12 var(--serif); }
.join__card > div > p { margin-top: 14px; font: 400 16px/1.55 var(--sans); color: var(--slate-2); }
.join__code { margin: 20px 0 16px !important; padding: 18px; border-radius: var(--r-control); background: var(--fog); font: 800 32px/1 var(--sans) !important; letter-spacing: .12em; color: var(--slate) !important; overflow-wrap: anywhere; }
.join__missing { color: var(--coral-ink) !important; }
.join__steps { list-style: none; counter-reset: j; margin: 22px auto 0; padding: 0; max-width: 320px; text-align: start; display: grid; gap: 10px; }
.join__steps li { counter-increment: j; display: flex; gap: 12px; font: 400 15px/1.5 var(--sans); color: var(--slate-2); }
.join__steps li::before { content: counter(j); min-width: 1.2em; font-weight: 600; color: var(--stone); }
.join__open { margin-top: 24px; width: 100%; }
.join__get { margin-top: 26px; padding-top: 22px; box-shadow: 0 -1px 0 var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; font: 400 14.5px/1.5 var(--sans); color: var(--stone); }
.join__get a:not(.badge) { color: var(--slate); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ---------- legal pages ---------- */
.legalpage { padding-top: 56px; padding-bottom: 100px; }
.legal__note { margin-bottom: 28px; padding: 14px 18px; border-radius: var(--r-control); background: var(--plate); font: 400 15px/1.5 var(--sans); color: var(--slate-2); }
.legalpage__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal__toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
.legal { max-width: 720px; font-size: 17px; line-height: 1.65; color: var(--slate-2); }
.legal h1 { font: 500 clamp(40px, 4.6vw, 60px)/1.06 var(--serif); letter-spacing: -.02em; color: var(--slate); }
.legal h2 { margin: 52px 0 12px; font: 500 28px/1.2 var(--serif); letter-spacing: -.01em; color: var(--slate); }
.legal h3 { margin: 28px 0 8px; font: 600 17px/1.35 var(--sans); color: var(--slate); }
.legal p { margin: 12px 0; }
.legal ul, .legal ol { margin: 12px 0; padding-inline-start: 22px; }
.legal li { margin: 7px 0; }
.legal li::marker { color: var(--stone); }
.legal a { color: var(--teal-ink); text-decoration: underline; text-decoration-color: rgba(8,119,111,.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: currentColor; }
.legal strong { color: var(--slate); font-weight: 600; }
.legal .muted { font: 400 14.5px/1.5 var(--sans); color: var(--stone); }
.legal .callout { margin: 22px 0; padding: 20px 22px; border-radius: var(--r-panel); background: var(--plate); }
.legal .callout > :first-child { margin-top: 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font: 400 15px/1.5 var(--sans); }
.legal th, .legal td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal th { color: var(--stone); font-weight: 600; }
.legal td.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legal tr.total td { font-weight: 700; color: var(--slate); border-bottom: none; }
.legal .callout table { margin: 6px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero__copy { padding-top: 0; }
  .hero__fig { max-width: 560px; }
  .chapter__grid, .publish__grid, .creators__in, .band__grid, .review__grid { grid-template-columns: 1fr; gap: 56px; }
  .chapter--flip .chapter__copy { order: 0; }
  .duo { justify-self: start; }
  .foot__grid { flex-direction: column; }
  .foot__brand { max-width: 520px; }
  .dl__grid { grid-template-columns: 1fr; }
  .dl__art { height: 380px; }
}
@media (max-width: 960px) {
  .storyboard { grid-template-columns: 1fr; gap: 44px; max-width: 520px; }
  .frame__art { height: 380px; }
  .help, .legalpage__grid { grid-template-columns: 1fr; gap: 24px; }
  .help__toc, .legal__toc { position: static; max-height: none; }
  .help__toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .help__toc a { padding: 8px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
  .legal__toc { display: none; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }
  .top__in { gap: 12px; }
  .steps, .cols, .plans, .qa { grid-template-columns: 1fr; }
  .steps { gap: 26px; }
  .rules .bullets { grid-template-columns: 1fr; }
  .guide ol { grid-template-columns: 1fr; gap: 10px; }
  .foot__base { flex-direction: column; }
  .foot__base p:last-child { text-align: start; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  :lang(he) body { font-size: 18px; }
  .top__in { height: 60px; gap: 8px; }
  .wordmark { font-size: 19px; }
  .brand img { width: 28px; }
  /* The picker moves into the menu on phones: translated "Get the app" labels need the room. */
  .top .lang { display: none; }
  .drawer__langs { display: flex; }
  .top .btn--sm { min-height: 38px; padding: 0 12px; font-size: 13.5px; min-width: 0; }
  .burger { margin-inline-end: -10px; }
  .lead { font-size: 18.5px; }

  .hero { padding: 36px 0 72px; }
  .hero h1 { font-size: 44px; line-height: 1.06; }
  :lang(he) .hero h1 { font-size: 40px; line-height: 1.14; }
  :lang(ru) .hero h1 { font-size: 40px; }
  .hero .lead { margin-top: 18px; }
  .cta { margin-top: 28px; }
  .hero__creator { margin-top: 36px; }
  .hero__fig { padding-inline-start: 52px; }
  .hero__fig .phone--rest { --w: 124px; bottom: 100px; }
  .how { padding: 52px 0 56px; }
  .how h2 { font-size: 27px; }
  .section-title, .chapter h2, .publish h2, .creators h2, .pricing h2, .faq h2, .band h2, .review h2, .rules h2, .contact h2, .flow h2 { font-size: 34px; }
  :lang(he) :is(.section-title, .chapter h2, .publish h2, .creators h2, .pricing h2, .faq h2, .band h2, .review h2, .rules h2, .contact h2, .flow h2) { font-size: 32px; }
  :lang(ru) :is(.section-title, .chapter h2, .publish h2, .creators h2, .pricing h2, .faq h2, .band h2, .review h2, .rules h2, .contact h2, .flow h2) { font-size: 31px; }
  .chapter { padding: 84px 0; }
  .chapter + .chapter:not(.chapter--dark) { padding-top: 20px; }
  .chapter__grid { gap: 44px; }
  .duo .phone { --w: 124px; bottom: -8px; }
  .chapter--dark { margin-top: 40px; }
  .more, .publish, .creators, .pricing, .faq, .flow, .band, .review { padding: 76px 0; }
  .rules { padding: 76px 0 40px; }
  .faq--accordion { padding-top: 40px; }
  .index { margin-top: 64px; }
  .index__head h2 { font-size: 28px; }
  .index__row { grid-template-columns: 56px 1fr auto; gap: 14px; }
  .index__cover { width: 56px; height: 44px; }
  .index__where { grid-column: 2 / -1; margin-top: -8px; }
  .index__title { font-size: 20px; }
  .index__empty { padding: 28px 22px; }
  .sheet__row em:last-child { display: none; }
  .plan { padding: 24px 22px 26px; }
  .plan h3 { font-size: 28px; }
  .qa h3 { font-size: 21px; }
  .qa-item summary h3 { font-size: 19.5px; }
  .qa-item__a { padding-inline-end: 0; }
  .close { padding: 76px 0 84px; }
  .close h2 { font-size: 46px; }
  .close--photo { padding: 0 0 80px; }
  .close--photo .wrap { padding: 0; }
  .close__fig picture img { aspect-ratio: 3 / 4; border-radius: 0; object-position: 50% 50%; }
  .close--photo .close__in { padding: 22% 20px 0; }
  .close--photo h2 { font-size: 50px; }
  :lang(he) .close--photo h2, :lang(ru) .close--photo h2 { font-size: 42px; }
  .close--photo .cap { padding: 0 var(--gutter); }
  .foot { padding-top: 52px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; width: 100%; }
  .foot__base p:first-child { white-space: normal; }

  .phero { padding: 48px 0 52px; }
  .phero h1 { font-size: 36px; }
  :lang(he) .phero h1, :lang(ru) .phero h1 { font-size: 34px; }
  .storyboard { margin-top: 32px; }
  .frame__art { height: auto; min-height: 240px; padding: 28px 20px; }
  .flow .steps { margin-top: 56px; }
  .later { padding: 22px 20px; }
  .bio { padding: 26px 22px; }
  .bio h3 { font-size: 26px; }
  .help { padding-top: 12px; }
  .search input { height: 52px; font-size: 16px; }
  .guide { padding: 22px 20px; }
  .dl { padding-top: 44px; }
  .dl h1 { font-size: 46px; }
  .dl__copy { padding-bottom: 40px; }
  .dl__case--desktop { grid-template-columns: 1fr; padding: 22px; }
  .qr { width: 180px; height: 180px; }
  .dl__art { height: 320px; }
  .dl__art .phone { --w: 220px; }
  .join__card { padding: 32px 22px 28px; }
  .join__card h1 { font-size: 30px; }
  .join__code { font-size: 26px !important; }
  .legalpage { padding-top: 36px; }
  .legal { font-size: 16.5px; }
  .legal h2 { font-size: 24px; margin-top: 40px; }
  .legal table { font-size: 14px; }
  .legal th, .legal td { padding: 9px 8px; }
}
/* On a phone, a legal table with a header row (privacy: who, what, why) becomes one short block per row. */
@media (max-width: 560px) {
  .legal table.stack, .legal .stack tbody, .legal .stack tr, .legal .stack td { display: block; width: 100%; }
  .legal .stack tr:first-child { display: none; }
  .legal .stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal .stack td { border: 0; padding: 2px 0; }
  .legal .stack td:first-child { font-weight: 600; color: var(--slate); }
  .legal .stack td:last-child { color: var(--stone); }
  .legal .stack td:last-child::before { content: attr(data-label) ": "; font-weight: 600; color: var(--slate-2); }
}
@media (max-width: 400px) {
  .top__in { gap: 6px; }
  .brand { gap: 8px; }
  .wordmark { font-size: 18px; }
  .top .btn--sm { padding: 0 10px; font-size: 13px; }
}
/* The narrowest phones (320 px): the longer "Get the app" labels (French, Russian) pushed the
   menu button off the edge, so the logo stands alone there (the link keeps its name). */
@media (max-width: 359px) {
  .wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .top, .foot, .legal__toc, .help__toc, .close { display: none; }
  body { background: #fff; }
}