/* rainer.co.il, v6: direction 3 "יורה" (Amir, 2026-11-05). Storm blue, one blue for actions,
   one green for results only, condensed Noto Sans Hebrew headings, figures in Cousine. The
   motif is the rain's angle, 32 degrees: the markers, and one short shower over the hero cards. */
:root {
  --bg: #0b1017;
  --bg-2: #0e141d;
  --panel: #131b25;
  --panel-2: #1a2430;
  --line: rgba(238, 243, 248, .1);
  --line-2: rgba(238, 243, 248, .2);
  --text: #eef3f8;
  --dim: #c9d4e0;
  --muted: #93a3b5;
  --acc: #74c7ff;
  --acc-ink: #04121e;
  --acc-soft: rgba(116, 199, 255, .12);
  --grow: #b8f25e;
    --red: #ff8585;
  --amber: #f5b21a;
  --sans: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --mono: Cousine, ui-monospace, "Cascadia Mono", monospace;
  --gutter: clamp(16px, 4.6vw, 72px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--mono); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-family: var(--sans); font-stretch: 75%; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(3.25rem, 1.1rem + 6.4vw, 7rem); line-height: .95; letter-spacing: -.01em; }
h2 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.02; }
h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); line-height: 1.12; }
p { margin: 0; }
.label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15.5px; font-weight: 700; color: var(--acc); }
.label::before, .eyebrow i { content: ""; flex: none; width: 2px; height: 16px; border-radius: 2px; background: currentColor; transform: rotate(-32deg); }
.sub { color: var(--dim); }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 20px; border-radius: 12px; border: 1px solid rgba(238, 243, 248, .3); font-size: 16.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; }
.btn.big { min-height: 60px; padding: 15px 28px; border-radius: 14px; font-size: 18px; }
.btn .arr { transition: transform .25s var(--ease); }
@media (hover: hover) {
  .btn:hover { border-color: var(--acc); color: var(--acc); }
  .btn.primary:hover { background: #a2dbff; border-color: #a2dbff; color: var(--acc-ink); }
  .btn:hover .arr { transform: translateX(-4px); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.go { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc); font-weight: 700; text-decoration: none; }
@media (hover: hover) { .go:hover { text-decoration: underline; text-underline-offset: 5px; } }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--gutter); transition: background .25s, padding .25s, border-color .25s; border-bottom: 1px solid transparent; }
.top.solid { padding-block: 12px; background: rgba(11, 16, 23, .88); backdrop-filter: blur(12px); border-color: var(--line); }
.top .logo { display: flex; align-items: center; min-height: 44px; }
.top .logo img { width: 133px; height: auto; }
.top nav { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 34px); font-size: 16.5px; font-weight: 600; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text); }
@media (hover: hover) { .top nav a:hover { color: var(--acc); } }
@media (max-width: 960px) { .top nav a { display: none; } .top .logo img { width: 112px; } }

/* ---------- hero: copy on the right, Amir on the left, rain across all of it ---------- */
.hero { position: relative; display: flex; min-height: calc(100svh - 64px); padding-top: 92px; overflow: hidden; background: radial-gradient(60% 75% at 20% 62%, rgba(116, 199, 255, .11), transparent 70%), var(--bg); }
.hero canvas.rain { position: absolute; inset: 0; z-index: 61; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; padding-block: 12px 40px; animation: up .7s var(--ease) both; }
.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px; border: 1px solid rgba(238, 243, 248, .18); border-radius: 99px; font-size: 15px; font-weight: 600; color: var(--dim); }
.eyebrow i { color: var(--acc); height: 14px; }
.hero h1 { font-size: clamp(2.8rem, 1rem + 4.8vw, 5.5rem); line-height: 1.02; }
.hero h1 > span { display: block; }
.hero h1 > span + span { color: var(--acc); }
.lead { max-width: 21em; font-stretch: 75%; font-weight: 700; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
.hero .sub { text-wrap: pretty; max-width: 44ch; font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); }
.hero .cta-row { margin-top: 8px; }
.rainbox { padding-block: 12px 40px; animation: up .9s .1s var(--ease) both; }
.rainbox .label { margin-bottom: 14px; }
.legends { display: flex; flex-direction: column; gap: 14px; }
.legend { display: flex; align-items: center; gap: 16px; width: min(460px, 94%); margin: 0; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(116, 199, 255, .28); background: var(--panel); }
.legend:nth-child(even) { align-self: flex-end; }
.face { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(116, 199, 255, .4); }
.face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.legend figcaption { min-width: 0; }
.legend b { display: block; font-stretch: 75%; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.legend small { display: block; font-size: 13.5px; color: var(--muted); text-align: right; }
.legend q { display: block; margin-top: 5px; color: var(--dim); font-size: 16.5px; line-height: 1.35; quotes: none; }
.ground { position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(150, 212, 255, .55) 22%, rgba(150, 212, 255, .55) 78%, transparent); }
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: 88px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-copy { padding-bottom: 12px; }
  .rainbox { padding-block: 8px 30px; }
}
@media (max-width: 620px) { .hero .btn.big { flex: 1 1 100%; } }

.logos { border-bottom: 1px solid var(--line); }
.logos .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; padding-block: 20px; color: var(--muted); font-size: 16px; }
.logos p { margin: 0; }
.logos ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; font-weight: 700; }

/* ---------- sections ---------- */
.sec { padding-block: clamp(72px, 9vw, 130px); }
.sec.tight { padding-top: 0; }
.head { max-width: 860px; margin-bottom: clamp(32px, 4vw, 56px); }
.head .sub { margin-top: 14px; font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); }
.rv { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv { opacity: 0; transform: translateY(20px); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- the park ---------- */
.park { background: linear-gradient(180deg, #0e1620, var(--bg) 70%); }
.head.center { margin-inline: auto; text-align: center; }
.head.center .label { justify-content: center; }
.park h2 { font-size: clamp(3.2rem, 1.6rem + 7vw, 7.5rem); line-height: .96; }
.rides { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.rides button { min-height: 50px; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--dim); font-size: 16.5px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.rides button[aria-selected="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
@media (hover: hover) { .rides button:not([aria-selected="true"]):hover { border-color: var(--acc); color: var(--acc); } }
.ride { max-width: 760px; margin-inline: auto; animation: up .4s var(--ease) both; }
.ride[hidden] { display: none; }
.myth { padding: clamp(24px, 4vw, 44px); text-align: center; min-height: 300px; }
.myth { border-radius: 20px; border: 1px solid rgba(116, 199, 255, .28); background: var(--panel); }
.ride.wide { max-width: none; }
.tool-frame { display: block; width: 100%; height: 640px; border: 0; border-radius: 20px; background: var(--panel); }
.q-count { display: block; margin: 0 0 12px; font: 700 14px/1 var(--mono); color: var(--acc); }
.myth h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.1; }
.q-ans { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.q-ans .btn { min-width: 150px; cursor: pointer; background: transparent; color: var(--text); }
.q-ans .btn.primary { background: var(--acc); color: var(--acc-ink); }
.q-ans .btn:disabled { opacity: .45; cursor: default; }
.q-ans .btn.right { opacity: 1; border-color: var(--grow); color: var(--grow); }
.q-why:not(:empty) { margin-top: 20px; animation: up .35s var(--ease) both; }
.q-why p { max-width: 36em; margin: 0 auto 16px; color: var(--dim); font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); }
.q-why b { color: var(--text); }
.q-why .btn { cursor: pointer; }
.q-score { margin: 0 0 8px; font: 700 clamp(4rem, 3rem + 4vw, 6.5rem)/1 var(--mono); color: var(--acc); }


/* ---------- mission, campaign vs project ---------- */
.mission { border-block: 1px solid var(--line); background: repeating-linear-gradient(122deg, transparent 0 46px, rgba(116, 199, 255, .035) 46px 47px); }
.mission h2 { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.75rem); line-height: 1; }
.mission h2 em { font-style: normal; color: var(--acc); }
.mission .sub { max-width: 52ch; margin-top: 22px; font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); }

/* ---------- what we do ---------- */


.pull { margin-top: clamp(28px, 4vw, 48px); max-width: 22em; font-stretch: 75%; font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.08; }
.pull span { color: var(--acc); }
.plain { max-width: 46em; display: grid; gap: 18px; font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--dim); }
.plain p { margin: 0; }
.plain b { color: var(--text); font-weight: 700; }
.plain a { color: var(--acc); font-weight: 600; text-underline-offset: 4px; }

.stand { margin-top: clamp(32px, 4.5vw, 56px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.stand .pull { margin-top: 0; max-width: none; font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.5rem); line-height: 1.02; }
.stand p:not(.pull) { max-width: 40em; margin-top: 18px; color: var(--dim); font-size: clamp(1.14rem, 1rem + .55vw, 1.5rem); line-height: 1.5; text-wrap: pretty; }
.stand b { color: var(--text); font-weight: 700; }

.scene { max-width: 40em; margin-top: clamp(26px, 3.5vw, 44px); color: var(--dim); font-size: clamp(1.14rem, 1rem + .55vw, 1.5rem); line-height: 1.5; }
.scene p { margin: 0 0 14px; text-wrap: pretty; }
.scene b { color: var(--text); font-weight: 700; }
.scene-time { font-stretch: 75%; font-weight: 800; font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1; color: var(--text); text-align: right; }

/* ---------- projects ---------- */
.pages { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 44px); border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; overflow: hidden; }
.pages h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; }
.pages p:not(.label) { margin-top: 12px; color: var(--dim); }
.pages .go { margin-top: 14px; }
.phones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px); margin: 0 0 -80px; padding: 0; list-style: none; }
.phones li { aspect-ratio: 390 / 760; border-radius: 16px; border: 2px solid var(--line-2); overflow: hidden; transition: transform .45s var(--ease); }
.phones li:nth-child(even) { transform: translateY(28px); }
.phones img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) { .pages:hover .phones li { transform: translateY(-8px); } .pages:hover .phones li:nth-child(even) { transform: translateY(16px); } }
.more-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 16px; padding: clamp(20px, 2.4vw, 30px) clamp(24px, 3vw, 44px); border-radius: 18px; border: 1px solid rgba(116, 199, 255, .35); background: linear-gradient(165deg, rgba(116, 199, 255, .12), var(--panel) 62%); text-decoration: none; font-stretch: 75%; font-size: clamp(1.45rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.more-link b { color: var(--acc); font-weight: 800; }
@media (max-width: 960px) {
  .pages { grid-template-columns: minmax(0, 1fr); }
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: -60px; }
  .phones li:nth-child(n + 4) { display: none; }
}

/* ---------- Amir ---------- */
.amir { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (min-width: 861px) { .amir > img { position: sticky; top: 104px; } }
.amir img { width: 100%; aspect-ratio: 871 / 632; object-fit: cover; border-radius: 18px; filter: grayscale(1) contrast(1.05); }
.amir h2 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.75rem); }
.amir .letter p { margin-top: 18px; color: var(--dim); font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); }
.amir .letter p strong { color: var(--text); font-weight: 600; }
.arc { list-style: none; margin: 24px 0 0; padding: 0; }
.arc li { padding-block: 16px; border-top: 1px solid var(--line); }
.arc b { color: var(--acc); font-size: 15.5px; font-weight: 700; }
.amir .letter .arc p { margin-top: 6px; text-wrap: pretty; }
.amir cite { display: block; margin-top: 22px; font-style: normal; color: var(--muted); }
.amir cite b { color: var(--text); }
@media (max-width: 860px) { .amir { grid-template-columns: minmax(0, 1fr); } }

/* ---------- faq ---------- */
.faq { max-width: 900px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 26px/1 var(--mono); color: var(--acc); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 20px; color: var(--dim); max-width: 66ch; }

/* ---------- final ---------- */
.final { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); border-radius: 22px; border: 1px solid rgba(116, 199, 255, .35); background: linear-gradient(160deg, rgba(116, 199, 255, .16), var(--panel) 58%); }
.final h2 { max-width: 15em; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem); }
.final p { max-width: 46ch; margin: 18px 0 28px; color: var(--dim); font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); }
@media (max-width: 560px) { .final .btn.big { flex: 1 1 100%; } }

.amir-q { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.amir-q blockquote { margin: 0; font-stretch: 75%; font-weight: 700; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); line-height: 1.25; }
.amir-q figcaption { margin-top: 8px; color: var(--muted); font-size: 15px; }
.amir-q figcaption b { color: var(--text); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.contact h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); }
#contact { scroll-margin-top: 90px; }
.contact form { margin: 0; }
.contact .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.contact label { display: grid; gap: 5px; font-size: 15px; font-weight: 700; }
.contact .wide { grid-column: 1 / -1; }
.contact input, .contact textarea, .contact select { width: 100%; min-height: 50px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 400 17px/1.4 var(--sans); }
.contact input:focus, .contact textarea:focus, .contact select:focus { outline: none; border-color: var(--acc); }
.contact .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.contact button { width: 100%; cursor: pointer; }
.contact button:disabled { opacity: .6; cursor: wait; }
.contact .privacy, .contact .alt { margin: 10px 0 0; font-size: 15px; color: var(--dim); }
.contact .privacy a, .contact .alt a, .contact .msg a { color: var(--acc); }
.contact .alt a { font-weight: 700; }
.contact .msg { margin: 10px 0 0; font-size: 16px; }
.contact .msg:empty { display: none; }
.contact .msg.err { color: var(--red); }
.contact .msg.ok { color: var(--grow); font-weight: 700; font-size: 1.3rem; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .contact .fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- /projects/ ---------- */
.proj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proj-card { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; text-decoration: none; transition: border-color .2s; }
@media (hover: hover) { .proj-card:hover { border-color: rgba(116, 199, 255, .5); } }
.mock { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.mock::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 26px; background: #0e141d radial-gradient(circle at 16px 13px, #ff8585 3.5px, transparent 4px) no-repeat, #0e141d; }
.mock img { position: absolute; inset: 26px 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: top; }
.mock.chatmock { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 40px 22px 18px; }
.mock.chatmock p { margin: 0; max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 16px; line-height: 1.4; }
.mock.chatmock .me { align-self: flex-end; background: var(--acc); color: var(--acc-ink); font-weight: 600; }
.mock.chatmock .him { align-self: flex-start; background: var(--panel-2); }
.proj-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: clamp(20px, 2.4vw, 30px); }
.proj-k { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.proj-k b { color: var(--grow); font-weight: 700; }
.proj-body p { color: var(--dim); }
.proj-body .go { margin-top: auto; }
@media (max-width: 760px) { .proj { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.foot { margin-top: clamp(56px, 7vw, 96px); padding-bottom: 32px; color: var(--muted); font-size: 16px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 36px; border-top: 1px solid var(--line); }
.foot-grid > div > img { margin-bottom: 14px; }
.foot h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { display: flex; align-items: center; min-height: 34px; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { color: var(--acc); } }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- letters and legal ---------- */
.letter-page { padding-top: clamp(112px, 12vw, 160px); }
.letter-page .head h1 { font-size: clamp(2.8rem, 1.5rem + 5vw, 5.5rem); }
.prose { max-width: 720px; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); }
.prose h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem); line-height: 1.02; }
.prose h2 { margin: 1.6em 0 .4em; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.1; }
.prose h3 { margin: 1.3em 0 .3em; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; color: var(--dim); }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose strong, .prose b { color: var(--text); font-weight: 700; }
.prose a { color: var(--acc); text-underline-offset: 3px; }
.prose img { width: 100%; margin: 1.2em 0; border-radius: 14px; }
.prose .label a { color: inherit; text-decoration: none; }
.prose .byline { margin-top: 12px; color: var(--muted); font-size: 16px; }
.next-letter { display: block; max-width: 720px; margin-top: 40px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line-2); text-decoration: none; }
.next-letter small { display: block; color: var(--muted); font-size: 14.5px; }
.next-letter b { font-stretch: 75%; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); color: var(--acc); }
.letter-page .final { margin-top: clamp(48px, 7vw, 88px); }
.letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.letter-card { display: block; height: 100%; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; text-decoration: none; }
.letter-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.letter-card span { display: block; padding: 18px 22px 22px; }
.letter-card small { display: block; color: var(--muted); font-size: 14.5px; }
.letter-card b { display: block; margin-top: 4px; font-stretch: 75%; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1.1; }
@media (hover: hover) { .letter-card:hover { border-color: rgba(116, 199, 255, .45); } }
@media (max-width: 720px) { .letters { grid-template-columns: minmax(0, 1fr); } }

/* ---------- members pages: same URLs as on WordPress, reached from the course ---------- */
.m { max-width: 900px; margin-inline: auto; padding: clamp(24px, 4vw, 56px) var(--gutter) 28px; }
.m-brand { margin-bottom: 16px; font: 700 14px/1.2 var(--mono); color: var(--acc); }
.m h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.5rem); line-height: 1.02; }
.ltr-title { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.m-sub { margin-top: 10px; color: var(--dim); font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); }
.m-sec { margin-top: clamp(36px, 5vw, 64px); }
.m-sec > h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.75rem); line-height: 1.08; }
.m-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; margin-top: 14px; padding: clamp(20px, 2.4vw, 30px); border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.m-card.noimg { grid-template-columns: minmax(0, 1fr); }
.m-card > img { width: 96px; height: auto; }
.m-card h3 { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.m-card p { margin-top: 6px; color: var(--dim); }
.m-card .m-status { margin-top: 10px; font-size: 15.5px; font-weight: 700; color: var(--grow); }
.m-card .m-status.locked { color: var(--amber); }
.m-card ul { margin: 14px 0 0; padding-inline-start: 1.2em; color: var(--dim); font-size: 16.5px; }
.m-card li { margin-bottom: 6px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.m .btn { white-space: normal; text-align: center; }
.m .btn small { display: block; font-size: 13.5px; font-weight: 500; opacity: .8; }
.m-video { position: relative; aspect-ratio: 16 / 9; margin-top: 22px; border-radius: 14px; overflow: hidden; background: #000; }
.m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-hero { width: 100%; margin-top: 22px; border-radius: 14px; }
.m .prose { margin-top: 24px; max-width: none; }
.m-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.m-foot a { min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .m-card { grid-template-columns: minmax(0, 1fr); } .m-card > img { width: 72px; } }

/* ---------- small print ---------- */
.micro { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.intro .lede { margin: 16px 0 24px; color: var(--dim); }

/* ---------- the numbers check (/check/) ---------- */
.check { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 100px var(--gutter) 64px; isolation: isolate; }
.check::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000, transparent 75%); }
.check-box { width: min(100%, 720px); }
@media (max-width: 600px) { .check { place-items: start center; padding-top: 88px; } }
.progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 32px; }
.progress i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .5s var(--ease); }
.q { animation: up .45s var(--ease) both; }
.q .count { font: 500 13px/1 var(--mono); color: var(--muted); }
.q h2 { margin: 12px 0 8px; font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); line-height: 1.15; }
.q .help { margin: 0 0 20px; color: var(--dim); min-height: 1.2em; }
.intro h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 11px 16px; text-align: start; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); font-size: 1.02rem; transition: border-color .15s, background .15s; }
@media (hover: hover) { .opt:hover { border-color: rgba(116, 199, 255, .5); } }
.opt[aria-pressed="true"] { border-color: var(--acc); background: var(--acc-soft); }
.opt kbd { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); font: 500 12.5px/1 var(--mono); color: var(--muted); }
.opt.unknown { border-style: dashed; background: transparent; color: var(--dim); }
.back { margin-top: 18px; border: 0; background: none; padding: 10px 0; color: var(--muted); font-size: 15px; }
.back:hover { color: var(--text); }
.result { animation: up .55s var(--ease) both; }
.score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; }
.score b { font: 700 clamp(3.6rem, 2.8rem + 3.6vw, 6rem)/.9 var(--mono); color: var(--acc); }
.score span { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--dim); }
.result .verdict { margin-top: 16px; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
.result .why { margin: 12px 0 0; color: var(--dim); }
.map { list-style: none; margin: 24px 0; padding: 0; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.map li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 15px; }
.map li:last-child { border-bottom: 0; }
.map li b { font-weight: 600; }
.map li .ans { color: var(--dim); }
.map li .st { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.map li .st.ok { background: var(--acc-soft); color: var(--acc); }
.map li .st.leak { background: rgba(255, 100, 100, .12); color: var(--red); }
.map li .st.unk { background: rgba(245, 178, 26, .12); color: var(--amber); }
.map li.unk .ans { color: var(--muted); }
@media (max-width: 560px) { .map li { grid-template-columns: 1fr auto; } .map li .ans { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; } }
.money { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--dim); }
.todo { display: grid; gap: 10px; }
.todo div { padding: 18px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.todo .kicker { margin: 0 0 6px; font: 600 13.5px/1 var(--sans); color: var(--acc); }
.todo h3 { font-size: 1.1rem; margin-bottom: 4px; }
.todo p { margin: 0; color: var(--dim); font-size: 15.5px; }
.next { margin-top: 24px; padding: 26px; border-radius: 16px; background: linear-gradient(160deg, rgba(116, 199, 255, .12), var(--panel) 60%); border: 1px solid rgba(116, 199, 255, .35); }
.next h3 { font-size: 1.3rem; margin-bottom: 6px; }
.next p { margin: 0 0 16px; color: var(--dim); }
.signup { margin-top: 16px; padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.signup h3 { margin-bottom: 4px; }
.signup > p { margin: 0 0 14px; color: var(--dim); }
.signup .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.signup input[type=text], .signup input[type=email], .signup input[type=tel] { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.signup input:focus { outline: none; border-color: var(--acc); }
.signup .wide { grid-column: 1 / -1; }
.signup label.consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 14px; font-size: 13.5px; color: var(--dim); }
.signup label.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--acc); flex: none; }
.signup .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.signup .msg { margin: 12px 0 0; font-size: 15px; }
.signup .msg.err { color: var(--red); }
.signup .msg.ok { color: var(--acc); font-weight: 600; }
@media (max-width: 560px) { .signup .fields { grid-template-columns: 1fr; } }
.again { margin-top: 22px; border: 0; background: none; color: var(--muted); padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

.mock.barmock { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 40px 26px 18px; }
.barmock strong { font: 700 3rem/1 var(--mono); color: var(--grow); direction: ltr; text-align: right; }
.barmock strong small { font-size: 1rem; color: var(--muted); }
.barmock span { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; color: var(--dim); }
.barmock i { display: block; height: 7px; border-radius: 7px; background: linear-gradient(90deg, var(--line) var(--o), var(--acc) var(--o)); }

/* ---------- the rain cycle: chapters scroll past a ring that stays ---------- */
.cy { margin-block: clamp(20px, 3vw, 36px); }
.cy-steps { list-style: none; margin: 0; padding: 0; }
.cy-step { padding-block: 14px; }
.cy-step .n { display: block; font: 700 15px/1 var(--mono); color: var(--acc); text-align: right; }
.cy-step h3 { margin: 10px 0 8px; font-stretch: 75%; font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.9rem); line-height: 1.02; }
.cy-step p { margin: 0; max-width: 30em; color: var(--dim); font-size: clamp(1.14rem, 1rem + .55vw, 1.5rem); line-height: 1.5; text-wrap: pretty; }
.cy-col { display: none; }
.cy.live .cy-wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 56px); }
.cy.live .cy-col { display: block; }
.cy.live .cy-steps { padding-block: 21svh; }
.cy.live .cy-step { min-height: 58svh; display: grid; align-content: center; padding: 0; opacity: .2; transition: opacity .35s ease; }
.cy.live .cy-step.on { opacity: 1; }
.cy-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.cy-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cy-ring { position: relative; width: min(100%, calc(100svh - 170px), 680px); aspect-ratio: 1; container-type: inline-size; }
.cy-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cy-note { position: absolute; bottom: 16px; inset-inline-start: 0; font-size: 12.5px; color: var(--muted); }

.cy-base { stroke: var(--line-2); stroke-width: 1.5; }
.cy-down { stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cy-rise { stroke: #dff1ff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 14; }
.cy-mask { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cy-dot { fill: var(--bg); stroke: var(--line-2); stroke-width: 2.5; transition: fill .3s ease, stroke .3s ease; }
.cy-dot.on { fill: var(--acc); stroke: var(--acc); }
.cy-dot.deal.on { fill: var(--grow); stroke: var(--grow); }
.cy-fed, .cy-rip { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cy-fed { stroke: var(--acc); stroke-width: 2; }
.landed .cy-fed { animation: cyFed .85s ease-out calc(.72s + var(--k) * 140ms) both; }
.cy-rip { stroke: var(--grow); stroke-width: 1.6; }
.hit .cy-rip { animation: cyRip 1s ease-out both; }
.hit .cy-rip:nth-of-type(n+5) { animation-delay: .13s; }
.hit .cy-rip:nth-of-type(n+6) { animation-delay: .26s; }
.cy-orbit { stroke: #dff1ff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 5 95; opacity: 0; transition: opacity .5s ease; }
.landed .cy-orbit { opacity: .9; animation: cyOrbit 3.2s linear infinite; }

.cy-l { position: absolute; transform: translate(-50%, -50%); font-size: 13px; font-size: clamp(11px, 2.3cqw, 16px); font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .3s ease; }
.cy-l.on { color: var(--text); }
.cy-chip { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: .28em .7em; border-radius: 99px; border: 1px solid rgba(116, 199, 255, .5); background: var(--panel-2); color: var(--text); font-size: 13px; font-size: clamp(10.5px, 2.2cqw, 16px); font-weight: 600; white-space: nowrap; opacity: 0; }
.landed .cy-chip { opacity: 0 !important; transition: left .8s var(--ease) calc(var(--k) * 140ms), top .8s var(--ease) calc(var(--k) * 140ms), opacity .25s linear calc(.72s + var(--k) * 140ms); }

.cy-center { position: absolute; left: 50%; top: 50%; width: 47%; height: 47%; transform: translate(-50%, -50%); font-size: 13px; font-size: clamp(11px, 2.55cqw, 18px); line-height: 1.35; }
.cy-sc { position: absolute; inset-inline: 0; top: 50%; opacity: 0; transform: translateY(calc(-50% + 26px)); transition: opacity .35s ease, transform .5s var(--ease); }
.cy-sc.was { transform: translateY(calc(-50% - 26px)); }
.cy-sc.on { opacity: 1; transform: translateY(-50%); }
.cy-card { padding: 1em 1.1em; border-radius: 1em; border: 1px solid var(--line-2); background: var(--panel); text-align: right; box-shadow: 0 18px 40px -24px #000; }
.cy-card p { margin: 0; }
.cy-q p { font-stretch: 75%; font-weight: 800; font-size: 1.55em; line-height: 1.25; opacity: 0; }
.cy-sc.on .cy-q p { animation: cyUp .45s var(--ease) forwards; }
.cy-sc.on .cy-q p:nth-child(2) { animation-delay: .16s; }
.cy-sc.on .cy-q p:nth-child(3) { animation-delay: .32s; }
.cy-sp { display: flex; align-items: center; gap: .45em; color: var(--muted); font-size: .86em; }
.cy-sp i { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--panel-2); }
.cy-ad b { display: block; margin-block: .55em .7em; font-size: 1.28em; line-height: 1.25; }
.cy-ad u { display: block; height: 1.9em; border-radius: .5em; background: var(--acc-soft); }
.cy-app b { display: block; margin-bottom: .55em; font-size: 1.14em; }
.cy-app span { display: block; margin-top: .35em; padding: .38em .7em; border-radius: .55em; border: 1px solid var(--line-2); color: var(--dim); }
.cy-sc.on .cy-app .pick { animation: cyPick .3s ease .65s forwards; }
.cy-app p { margin-top: .6em; color: var(--acc); font-weight: 700; opacity: 0; }
.cy-sc.on .cy-app p { animation: cyUp .4s var(--ease) 1s forwards; }
.cy-wa { padding: .9em 1em; border-radius: 1em 1em .2em 1em; border: 1px solid rgba(116, 199, 255, .35); background: var(--acc-soft); text-align: right; }
.cy-wa p { margin: 0; font-size: 1.1em; }
.cy-wa time { display: block; margin-top: .4em; color: var(--muted); font: 700 .9em/1 var(--mono); text-align: left; }
.cy-wave { display: flex; align-items: center; gap: .24em; height: 3.2em; }
.cy-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 9px; background: var(--acc); animation: cyWave .8s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1s); }
.cy-sc:not(.on) .cy-wave i { animation-play-state: paused; }
.cy-call { text-align: center; }
.cy-call mark { display: inline-block; margin-top: .75em; padding: .16em .55em; border-radius: .4em; background: var(--acc); color: var(--acc-ink); font-weight: 800; font-size: 1.08em; }
.cy-deal { color: var(--grow); text-align: center; }
.cy-deal svg { display: block; width: 4.6em; height: 4.6em; margin-inline: auto; }
.cy-deal b { display: block; font-stretch: 75%; font-weight: 800; font-size: 2.7em; line-height: 1; }
.cy-back { color: var(--text); }
.cy-sc.on .cy-back svg { animation: cyBob 1.3s ease-in-out infinite; }
.cy-map { padding-block: .7em; }
.cy-map p { display: flex; justify-content: space-between; gap: .7em; padding-block: .28em; opacity: 0; }
.cy-map span { color: var(--acc); font-weight: 600; white-space: nowrap; }
.cy-sc.on .cy-map p { animation: cyUp .4s var(--ease) calc(.8s + var(--k) * 140ms) forwards; }

@keyframes cyUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cyPick { to { border-color: var(--acc); background: var(--acc-soft); color: var(--text); } }
@keyframes cyWave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes cyBob { 50% { transform: translateY(-6px); } }
@keyframes cyRip { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes cyFed { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2); } }
@keyframes cyOrbit { to { stroke-dashoffset: -100; } }

@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cy.live .cy-col { order: 1; position: sticky; top: 56px; z-index: 2; height: calc(100svh - 270px); }
  .cy-stage { position: static; height: 100%; }
  .cy-ring { width: min(92%, calc(100svh - 320px)); }
  .cy-note { bottom: 2px; }
  .cy-center { width: 52%; }
  .cy-l:not(.on) { opacity: 0; }
  .cy.live .cy-steps { order: 2; position: relative; z-index: 3; padding-block: 0 8svh; margin-top: calc(-1 * (100svh - 270px)); }
  .cy.live .cy-step { min-height: 76svh; align-content: end; padding-bottom: 12px; opacity: 1; }
  .cy.live .cy-in { padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); transition: opacity .3s ease, transform .3s ease; }
  .cy.live .cy-step:not(.on) .cy-in { opacity: 0; transform: translateY(12px); }
  .cy.live .cy-step h3 { margin-block: 6px 4px; font-size: 1.75rem; }
  .cy.live .cy-step p { font-size: 1.02rem; line-height: 1.42; }
}

/* ---------- the hero is the first chapter of the rain cycle (Amir, 2026-11-11) ---------- */
.cyhero { position: relative; }
.cyhero > canvas.rain { position: absolute; top: 0; left: 0; z-index: 61; width: 100%; height: 100svh; pointer-events: none; }
.cy-hero .hero-copy { padding-block: 12px 24px; }
.cy-hero h1 { font-size: clamp(2.8rem, 1rem + 4.8vw, 5.5rem); line-height: 1.02; }
.cy-hero h1 > span { display: block; }
.cy-hero h1 > span + span { color: var(--acc); }
.cy-hero .sub { text-wrap: pretty; max-width: 44ch; font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); }
.cy-hero .cta-row { margin-top: 8px; }
.cy-belief .label { margin-bottom: 12px; }
.cy-belief h2 { font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem); line-height: 1; }
.cy-belief h2 em { font-style: normal; color: var(--acc); }
.cy-belief p:not(.label) { margin: 14px 0 0; max-width: 30em; color: var(--dim); font-size: clamp(1.14rem, 1rem + .55vw, 1.5rem); line-height: 1.5; }
.cy-belief b, .cy-goal b { color: var(--text); }
.cy-goal h3 { margin: 0 0 10px; }
.cy-tag { position: relative; z-index: 1; align-self: center; }

@media (min-width: 861px), (max-height: 500px) { .cy.live .cy-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cy.live .cy-steps { padding-block: 0 22svh; }
.cy.live .cy-step.cy-hero { min-height: 100svh; padding-top: 72px; opacity: 1; }
.cy.live .cy-step.cy-belief { min-height: 72svh; }
.cy-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.cy-stage .cy-ring { width: min(100%, calc(100svh - 230px), 640px); }
.cy:not(.started) .cy-l { opacity: 0; }
.cy-l { transition: color .3s ease, opacity .5s ease; }

.cy-cue, .cy-name { display: grid; justify-items: center; gap: .5em; text-align: center; }
.cy-cue b { font-size: 1.4em; font-weight: 800; }
.cy-cue small, .cy-name small { color: var(--muted); font-size: .95em; }
.cy-mouse { position: relative; width: 1.9em; height: 3em; border: 2px solid var(--dim); border-radius: 1em; }
.cy-mouse i { position: absolute; left: 50%; top: .55em; width: .3em; height: .6em; margin-left: -.15em; border-radius: .2em; background: var(--acc); animation: cyWheel 1.6s ease-in-out infinite; }
@keyframes cyWheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(1.1em); } }
.cy-name b { display: block; font-stretch: 75%; font-weight: 800; font-size: 3em; line-height: .95; }
.cy-name b + b { color: var(--acc); }

@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-step.cy-hero { position: relative; z-index: 4; min-height: calc(100svh - 56px); align-content: center; padding: 76px var(--gutter) 24px; margin-inline: calc(-1 * var(--gutter)); background: var(--bg); }
  .cy.live .cy-step.cy-belief { min-height: 80svh; }
  .cy-tag { font-size: 13.5px; padding: 6px 12px; }
  .cy-stage .cy-ring { width: min(88%, calc(100svh - 340px)); }
  .cy-hero h1 { font-size: clamp(2.5rem, 1rem + 6vw, 3.4rem); }
  .cy-belief h2 { font-size: 2rem; }
  .cy.live .cy-belief p:not(.label) { font-size: 1.02rem; }
}
@media (max-width: 620px) { .cy-hero .btn.big { flex: 1 1 100%; } }

/* ---------- the giants: baseball cards in a fan ---------- */
.giants { overflow: hidden; }
.giants .head { margin-bottom: clamp(8px, 2vw, 20px); }
.g-row { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; justify-content: center; gap: 14px; overflow-x: auto; padding: 30px 20px 46px; scrollbar-width: none; }
.g-row::-webkit-scrollbar { display: none; }
.g-card { position: relative; display: flex; flex-direction: column; aspect-ratio: 5 / 7; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, #f4f1e8, #e6dfcd); color: #10161f; box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .7); transform-origin: 50% 85%; z-index: var(--z, 1); }
.g-top { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: #0e3a5c; }
.g-top .ltr { font-family: var(--mono); }
.g-photo { flex: 1; min-height: 0; overflow: hidden; border-radius: 8px; border: 3px solid #0e3a5c; background: #c9c2b0; }
.g-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.g-name { margin: 8px -10px 0; padding: 7px 12px 6px; background: #0e3a5c; color: #fff; }
.g-name b { display: block; font-stretch: 75%; font-weight: 800; font-size: 1.32rem; line-height: 1.05; }
.g-name small { display: block; font-size: 11.5px; opacity: .8; text-align: right; }
.g-card q { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35; quotes: none; min-height: 3.4em; }
@keyframes fan {
  0%, 14% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(.9); animation-timing-function: ease-in-out; }
  48%, 52% { transform: translate(0, var(--ay, 0px)) rotate(var(--ar, 0deg)); animation-timing-function: ease-in-out; }
  86%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(.9); }
}
@supports (animation-timeline: view()) {
  .giants { view-timeline: --fan block; }
  .fan-on .g-card { animation: fan linear both; animation-timeline: --fan; animation-range: cover 0% cover 100%; }
}
@media (max-width: 620px) { .g-row { grid-auto-columns: min(46vw, 200px); justify-content: start; } .g-card q { font-size: 12.5px; } }

/* ---------- the numbers, beside the hero's button and the form ---------- */
.stats-row { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 6px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); }
.stats-row b { display: block; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1 var(--mono); color: var(--text); text-align: right; }
.stats-row span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.contact .stats-row { margin-top: 26px; }
@media (max-width: 620px) { .stats-row { gap: 10px 22px; } .stats-row b { font-size: 1.45rem; } .stats-row span { font-size: 13px; } }

.pages h2 del { color: var(--muted); text-decoration-thickness: .08em; text-decoration-color: var(--red); margin-inline-end: .2em; }

/* ---------- the park, denser (Amir, 2026-11-11) ---------- */
.park.sec { padding-block: clamp(52px, 6vw, 88px); }
.park h2 { font-size: clamp(2.8rem, 1.5rem + 5vw, 5.6rem); }
.park .head { margin-bottom: clamp(18px, 2.4vw, 30px); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact input::placeholder, .contact textarea::placeholder { color: var(--muted); }
.contact select:invalid { color: var(--muted); }

/* ---------- documents open over the page ---------- */
dialog.doc { width: min(760px, calc(100vw - 24px)); max-height: min(86svh, 900px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); color: var(--text); overflow: auto; overscroll-behavior: contain; }
dialog.doc::backdrop { background: rgba(4, 8, 13, .72); backdrop-filter: blur(3px); }
.doc-in { padding: clamp(22px, 4vw, 44px); }
.doc-in h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.doc-x { position: sticky; top: 10px; float: left; margin: 10px; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-2); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }

/* ---------- what clients said (verbatim, from the old site and the DR System page) ---------- */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; margin-top: clamp(32px, 4vw, 52px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.quotes::-webkit-scrollbar { display: none; }
.quotes figure { margin: 0; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.quotes blockquote { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--dim); }
.quotes blockquote::before { content: "״"; display: block; font: 800 2.4rem/0.6 var(--sans); color: var(--acc); margin-bottom: 6px; }
.quotes figcaption { font-size: 14.5px; color: var(--muted); }
.quotes figcaption b { color: var(--text); }
@media (max-width: 760px) { .quotes { grid-auto-columns: 82%; } }

.scene.morning { margin-top: clamp(14px, 2vw, 24px); }
.scene.morning .scene-time { color: var(--acc); }

/* ---------- hero fits the first screen: more room for the copy, a smaller ring (Amir, 2026-11-11) ---------- */
@media (min-width: 861px), (max-height: 500px) {
  .cy.live .cy-wrap { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  .cy-stage .cy-ring { width: min(100%, calc(100svh - 250px), 540px); }
  .cy.live .cy-step.cy-hero { padding-top: 64px; }
  .cy-hero h1 { font-size: clamp(2.6rem, 1rem + 3.9vw, 4.8rem); }
  .cy-hero .hero-copy { gap: 16px; }
}
/* the scroll hint sits in the ring's top part, under the arc, so a phone shows it on the first screen (Amir, 2026-11-11) */
.cy-hint { position: absolute; z-index: 1; left: 50%; top: 27.5%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55em; color: var(--muted); font-size: 13px; font-size: clamp(11px, 2.45cqw, 17px); white-space: nowrap; pointer-events: none; }
.cy-hint .cy-mouse { width: 1.2em; height: 1.9em; border-width: 1.5px; }
.cy-hint .cy-mouse i { top: .35em; height: .45em; }

.cy-av p { font-stretch: 100%; font-weight: 400; font-size: 1.04em; line-height: 1.4; margin-top: .3em; color: var(--dim); }
.cy-av p b { color: var(--text); font-weight: 800; }

.cy-hint { transition: opacity .4s ease; }
.past-hero .cy-hint { opacity: 0; }

.amir .founder { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; color: var(--acc); text-decoration: none; }
@media (hover: hover) { .amir .founder:hover { text-decoration: underline; text-underline-offset: 4px; } }
.founder-arc { list-style: none; padding: 0; }
.founder-arc li { padding-block: 14px; border-top: 1px solid var(--line); }
.founder-arc b { color: var(--acc); }
.contact .privacy { text-wrap: balance; }
.contact .privacy a { white-space: nowrap; }

/* the numbers as cards, as in the Zeus quote */
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 0; border-top: 0; }
.stats-row li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.stats-row b { font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); color: var(--acc); }
.stats-row span { font-size: 13.5px; line-height: 1.3; }
.contact .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stats-row li { padding: 10px 12px; } .stats-row b { font-size: 1.3rem; } }

/* the cards hold a square portrait that fills the frame (Amir, 2026-11-11) */
.g-card { aspect-ratio: auto; }
.g-photo { flex: none; aspect-ratio: 1; }
.g-photo img { object-position: 50% 30%; }
.g-row { grid-auto-columns: 200px; }
.g-credit { margin: 0 auto; padding: 0 var(--gutter); max-width: 900px; text-align: center; font-size: 12px; color: var(--muted); }
.g-credit a { color: inherit; }

/* ---------- the menu: a tools submenu on desktop, a drawer on phones (Amir, 2026-11-11) ---------- */
.menu-btn { display: none; }
.nav-only-menu { display: none !important; }
.nav-group { position: relative; }
.nav-tools { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.nav-tools::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.nav-menu { position: absolute; top: 100%; inset-inline-start: -14px; z-index: 5; display: grid; gap: 2px; width: 330px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(14, 20, 29, .97); box-shadow: 0 24px 50px -20px #000; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: grid !important; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.nav-menu a:hover { background: var(--panel-2); }
.nav-menu b { font-weight: 700; }
.nav-menu small { color: var(--muted); font-size: 13.5px; font-weight: 400; }
@media (max-width: 1180px) {
  .top nav { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 84px var(--gutter) 32px; overflow-y: auto; background: rgba(9, 13, 19, .98); font-size: 19px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
  .top.menu-open nav { opacity: 1; visibility: visible; }
  .top nav a, .top nav a:not(.btn), .nav-only-menu { display: flex !important; min-height: 52px; align-items: center; border-bottom: 1px solid var(--line); }
  .nav-tools { display: none; }
  .nav-menu { position: static; width: auto; opacity: 1; visibility: inherit; transform: none; padding: 0; border: 0; background: none; box-shadow: none; }
  .nav-menu a { padding: 10px 0; border-radius: 0; }
  .menu-btn { position: relative; z-index: 71; display: grid; place-content: center; gap: 5px; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(14, 20, 29, .7); cursor: pointer; }
  .menu-btn i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
  .menu-open .menu-btn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-btn i:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 1180px) { .top .nav-menu a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: 10px; } .top .nav-menu small { font-size: 14px; } }

/* ---------- the ring is pinned from the very first pixel (Amir, 2026-11-11: the hero jumped 36px first) ---------- */
.cy.cyhero { margin-block: 0; }

/* ---------- phone: hero copy, then the ring as the anchor, then the numbers and the chapters under it ---------- */
@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-wrap { display: flex; flex-direction: column; }
  .cy.live .cy-steps, .cy.live .cy-step.cy-hero { display: contents; }
  .cy.live .cy-col { order: 1; position: sticky; top: 80px; z-index: 3; height: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 30px; background: linear-gradient(180deg, var(--bg) 80%, rgba(11, 16, 23, 0)); }
  .cy.live .cy-stage { height: auto; }
  .cy.live .cy-stage .cy-ring { width: min(86vw, 46svh); }
  .cy.live .cy-step:not(.cy-hero) { order: 3; position: relative; z-index: 2; min-height: 58svh; align-content: start; padding: 0 0 12px; margin: 0; background: none; }
  .cy.live .cy-step.cy-belief { min-height: 62svh; }
  .cy.live .cy-steps { margin: 0; padding: 0; }
  .cy.live .cy-step:not(.on) .cy-in { opacity: .28; transform: none; }
}
@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-step:not(.cy-hero) { min-height: 42svh; }
  .cy.live .cy-step.cy-belief { min-height: 46svh; }
}

/* ---------- the park leads: myth or truth first, then "what next?" (Amir, 2026-11-11) ---------- */
.park.guided .rides { display: none; }
.q-ans .btn.wrong { opacity: 1; border-color: var(--red); color: var(--red); background: rgba(255, 133, 133, .1); }
.q-ans .btn.right { background: rgba(184, 242, 94, .1); }
.q-skip { margin-top: 18px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; }
.q-next { margin: 22px 0 12px; font-stretch: 75%; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: var(--text); }
.q-rides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.q-rides button { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(116, 199, 255, .35); background: var(--bg-2); color: var(--text); font: inherit; text-align: right; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.q-rides button:hover { border-color: var(--acc); background: var(--acc-soft); }
.q-rides b { font-size: 17.5px; }
.q-rides small { color: var(--muted); font-size: 14px; line-height: 1.35; }
@media (max-width: 720px) { .q-rides { grid-template-columns: 1fr; } }

/* ---------- the hero breathes: on a phone the copy and the numbers fill the first screen and the ring starts halfway
   between the numbers and the bottom (Amir, 2026-11-11). cycle.js sets the height from the real screen. ---------- */
.hero-main { display: contents; }
@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-hero .hero-copy { order: 0; justify-content: center; gap: 20px; margin: 0; min-height: calc(100svh - .2 * min(86vw, 46svh) - 4px); padding: 76px 0 32px; }
  .cy.live .cy-hero .hero-copy > *, .cy.live .cy-hero .hero-main > * { margin: 0; }
  /* the four numbers in one row, under the buttons */
  .cy-hero .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
  .cy-hero .stats-row li { padding: 9px 6px; border-radius: 12px; }
  .cy-hero .stats-row b { font-size: clamp(.78rem, .1rem + 3.4vw, 1.2rem); }
  .cy-hero .stats-row span { margin-top: 4px; font-size: 11.5px; line-height: 1.25; }
}
@media (max-width: 860px) and (min-height: 501px) and (max-height: 700px) {
  .cy.live .cy-hero .hero-copy { gap: 14px; padding: 66px 0 18px; }
  .cy.live .cy-hero h1 { font-size: clamp(2.2rem, 1rem + 5.4vw, 3rem); }
}

/* ---------- "בואו נדבר" opens the form over the page, from anywhere on the site (Amir, 2026-11-11) ---------- */
dialog.talk { width: min(580px, calc(100vw - 24px)); }
.talk-in.contact { display: block; }
.talk-in h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); max-width: 13em; }
.talk-in > p { margin: 10px 0 22px; color: var(--dim); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }

/* ---------- a closed drawer is closed: nothing inside it takes a tap (the tools list sat over the hero's button) ---------- */
@media (max-width: 1180px) {
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { visibility: inherit; }
}

/* ---------- "ובחזרה" in the hero's lead, with the cycle's arrows (Amir, 2026-11-11) ---------- */
.and-back { white-space: nowrap; color: var(--acc); }
.cy-hero .lead .nw { white-space: nowrap; }
.and-back svg { display: inline-block; width: .95em; height: .95em; margin-inline-start: .3em; vertical-align: -.14em; }
@media (prefers-reduced-motion: no-preference) { .and-back svg { animation: back-turn 1.1s .5s var(--ease) both; } }
@keyframes back-turn { from { transform: rotate(-360deg); } to { transform: none; } }
/* the phrases climb the left arc right where "ובחזרה" would stand, and the ring's middle says it already (phone and desktop) */
.cy-l[data-a="270"] { opacity: 0 !important; }

/* the pinned ring stops 24px under the header (Amir, 2026-11-11: more headroom); the band above it is covered once it's
   pinned, so the chapters don't show through */
@media (max-width: 860px) and (min-height: 501px) {
  .cy.live .cy-col::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 24px; background: var(--bg); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
  .cy.live.pinned .cy-col::before { opacity: 1; }
}
/* nothing in the cycle may widen the page sideways (the ring's turn once did, on phones) */
.cy { overflow-x: clip; }

/* ---------- the opening, like a trailer (Amir, 2026-11-11): the headline's two lines come up one at a time in the middle
   of the screen and move to their place, then the rest of the hero comes in where it stands. Once a session; the page's
   head adds .trailer and takes it off by itself if the script never runs. ---------- */
.trailer #top, .trailer .cy-hero h1 > span, .trailer .cy-hero .lead, .trailer .cy-hero .sub, .trailer .cy-hero .cta-row, .trailer .cy-hero .stats-row, .trailer .cy-col { opacity: 0; }
.cy-hero h1 > span { width: fit-content; }

/* ---------- the hero is laid out as the ring's from the first paint (an inline script marks .live), and waits hidden
   until cycle.js has measured it (.ready), then rises in: no jump when the scripts arrive late (Amir, 2026-11-11) ---------- */
.cy.live:not(.ready) .cy-hero .hero-copy { animation: none; opacity: 0; }
.cy.live:not(.ready) .cy-col { opacity: 0; }
.cy.live .cy-col { transition: opacity .5s ease; }

/* the phone and email fields type left to right, but sit on the right like the rest of the form (Amir, 2026-11-11) */
.contact input.ltr { text-align: right; }

/* ---------- the giants on a phone: narrower cards, so two and a bit show and the next one peeks in (Amir, 2026-11-11) ---------- */
@media (max-width: 620px) {
  .g-row { grid-auto-columns: 152px; gap: 10px; padding-inline: 18px; }
  .g-card { padding: 8px; }
  .g-top { padding-bottom: 5px; font-size: 10px; }
  .g-name { margin: 6px -8px 0; padding: 5px 9px 5px; }
  .g-name b { font-size: 1.06rem; }
  .g-name small { font-size: 10px; }
  .g-card q { margin-top: 6px; font-size: 11.5px; line-height: 1.3; }
}



/* the belief starts a fifth of the screen lower on a phone, so it comes in after the ring settles (Amir, 2026-11-11) */
@media (max-width: 860px) and (min-height: 501px) { .cy.live .cy-step.cy-belief { margin-top: 20svh; } }

/* ---------- the hero's main button is a swipe to the right, "it's a match": the knob stands on the left, drag it across
   (or just tap) and the form opens with confetti (Amir, 2026-11-11). Without the script it's a plain link to the form. ---------- */
.btn.swipe { position: relative; overflow: hidden; padding-inline: 74px; /* the same on both sides: the text sits in the middle, whatever the knob does */ touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.btn.swipe:active { cursor: grabbing; }
.swipe-fill { position: absolute; inset-block: 0; inset-inline-end: 0; width: calc(var(--p, 0) * 100%); background: rgba(4, 18, 30, .14); pointer-events: none; }
.swipe-knob { position: absolute; z-index: 1; inset-block: 6px; inset-inline-end: 6px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: var(--acc-ink); color: var(--acc); font-size: 1.25em; line-height: 1; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); will-change: transform; }
.swipe-t { position: relative; opacity: calc(1 - var(--p, 0) * 1.6); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .btn.swipe:not(.dragging):not(.done) .swipe-knob { animation: swipe-hint 3.2s var(--ease) 1.2s infinite; } }
/* the hint: the start of a swipe across, and back */
@keyframes swipe-hint { 0%, 70%, 100% { translate: 0; } 79% { translate: 24px; } 87% { translate: 0; } 92% { translate: 8px; } 96% { translate: 0; } }
.confetti { position: fixed; inset: 0; z-index: 70; width: 100vw; height: 100vh; pointer-events: none; } /* the rain's answer to the swipe: on the page above the rain and the dock, or inside the dialog */

/* ---------- quick questions after the form, as on the farm page (Amir, 2026-11-11) ---------- */
.contact .after { margin-top: 16px; }
.contact .after-k { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.contact .after h3 { margin: 0 0 12px; font-stretch: 75%; font-weight: 800; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem); line-height: 1.1; }
.contact .after-opts { display: grid; gap: 8px; }
.contact .after-opts button { min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 600 16.5px/1.3 var(--sans); text-align: right; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
@media (hover: hover) { .contact .after-opts button:hover { border-color: var(--acc); background: var(--panel-2); } }
.contact .after-skip { margin-top: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.contact .after-done { margin: 0; color: var(--grow); font-weight: 700; font-size: 1.15rem; }
/* a full arrow in the knob (Amir, 2026-11-11) */
.swipe-knob svg { width: 62%; height: 62%; fill: var(--acc); }

/* ---------- the swipe waits at the bottom of the screen once the hero's has gone, until the form comes near ---------- */
.swipe-dock { position: fixed; z-index: 60; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: 18px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 55%, rgba(11, 16, 23, 0)); transform: translateY(115%); transition: transform .4s var(--ease); pointer-events: none; }
.swipe-dock.on { transform: none; }
.swipe-dock .btn.swipe { width: 100%; max-width: 440px; pointer-events: auto; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }

/* ---------- the form's modal fits a phone screen without scrolling (Amir, 2026-11-11) ---------- */
dialog.talk { max-height: calc(100svh - 16px); }
.talk-in.contact { padding: 18px 18px 14px; }
.talk-in h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.05; margin-top: 4px; }
.talk-in > p { margin: 8px 0 14px; font-size: 1rem; line-height: 1.45; }
.talk .contact .fields, .talk-in .fields { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.talk-in input, .talk-in select { min-height: 46px; padding-block: 9px; }
.talk-in textarea { min-height: 0; height: 64px; padding-block: 9px; resize: none; }
.talk-in .btn.big { min-height: 52px; padding-block: 12px; }
.talk-in .privacy, .talk-in .alt { margin-top: 6px; font-size: 14px; line-height: 1.4; }
.talk .doc-x { margin: 8px; width: 40px; height: 40px; }

/* ---------- the opening's lines, centred in the dark mid-screen before they go to their place (Amir, 2026-11-11) ---------- */
.trailer-veil { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(4, 7, 11, .35), rgba(2, 4, 7, .92) 72%); }
.trailer-line { position: fixed; z-index: 62; left: 50%; top: 50%; width: min(92vw, 1100px); margin: 0; text-align: center; text-wrap: balance; pointer-events: none; will-change: transform, opacity, filter; }
.trailer-line.glow { text-shadow: 0 0 34px rgba(116, 199, 255, .5), 0 0 90px rgba(116, 199, 255, .25); }

/* ---------- the consent box, the same words as every page of ours (the farm's form, Amir 2026-11-11) ---------- */
.contact .consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: var(--dim); cursor: pointer; }
.contact .consent input { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--acc); }
.contact .consent a { color: var(--acc); white-space: nowrap; }
.talk-in .consent { margin-bottom: 10px; font-size: 14px; }
/* the docked swipe stands above the cookie bar while it shows */
.swipe-dock { bottom: var(--consent-h, 0px); transition: transform .4s var(--ease), bottom .3s ease; }
/* hidden, the dock drops below the screen even while it stands on the cookie bar */
.swipe-dock:not(.on) { transform: translateY(calc(115% + var(--consent-h, 0px))); }

/* ---------- the legends' pages: one per giant, for teaching and search (Amir, 2026-11-11) ---------- */
.legend-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.legend-head img { width: 96px; height: 96px; margin: 0; border-radius: 14px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08); border: 3px solid #0e3a5c; }
.legend-head figcaption { display: grid; gap: 2px; }
.legend-head b { color: var(--text); font-size: 1.15rem; }
.legend-head span { color: var(--muted); font-size: .95rem; text-align: right; }
.prose .lede { color: var(--text); font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.5; }
.legend-q { margin: 1.4em 0; padding: 18px 22px; border-inline-start: 4px solid var(--acc); border-radius: 12px; background: var(--panel); }
.legend-q p { margin: 0; color: var(--text); font-size: 1.12em; font-weight: 600; }
.legend-q p.en { margin-top: 8px; color: var(--muted); font-size: .92em; font-weight: 400; font-style: italic; text-align: right; }
.legend-q cite { display: block; margin-top: 10px; color: var(--muted); font-size: .85em; font-style: normal; }
.legend-q cite a { color: var(--muted); }
.legend-src { margin-top: 2em; color: var(--muted); font-size: .9em; }
.legend-src summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.legend-src li { margin-bottom: .3em; }
.legend-src a { color: var(--muted); word-break: break-word; }
.legend-nav { display: flex; justify-content: space-between; gap: 12px; max-width: 720px; margin: 36px 0 0; }
.legend-nav a { flex: 1 1 0; display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; }
.legend-nav a:last-child { text-align: left; }
.legend-nav small { color: var(--muted); }
.legend-index .head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 40px); }
.legend-index .head .sub { color: var(--dim); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.legend-list a { display: flex; gap: 14px; align-items: center; height: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .2s ease; }
@media (hover: hover) { .legend-list a:hover, .legend-nav a:hover { border-color: var(--acc); } }
.legend-list img { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08); }
.legend-list span { display: grid; gap: 2px; }
.legend-list small { color: var(--muted); font-family: var(--mono); font-size: 12.5px; text-align: right; }
.legend-list b { font-size: 1.12rem; }
.legend-list em { color: var(--dim); font-style: normal; font-size: .95rem; line-height: 1.35; }
/* the giants' cards on the home page lead to their pages */
.g-more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; color: #0e3a5c; font-size: 12.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.g-all { display: block; width: fit-content; margin: 10px auto 0; color: var(--acc); font-weight: 700; }

/* ---------- the questions before the form: the fields wait until they're answered ---------- */
.contact form.pre-on > .fields, .contact form.pre-on > .consent, .contact form.pre-on > button[type=submit] { display: none; }
.contact .after.pre { margin: 0 0 12px; }
.contact .pre-note { margin: 0 0 14px; color: var(--dim); font-size: 16px; line-height: 1.5; }
.contact .after-opts .btn.primary { width: 100%; }

/* ---------- a phone on its side (short screens) gets the two columns, the ring sized to the height, and a compact
   form: the phone layout (ring pinned on top, chapters under it) needs a tall screen (Amir, 2026-11-11) ---------- */
@media (max-height: 500px) {
  .cy.live .cy-stage .cy-ring { width: min(100%, calc(100svh - 96px), 560px); }
  .cy.live .cy-step.cy-hero { padding-top: 64px; }
  .cy-hero h1 { font-size: clamp(2rem, 1rem + 3.2vw, 3.2rem); }
  .talk-in.contact { padding: 12px 16px 10px; }
  .talk-in h2 { font-size: 1.45rem; }
  .talk-in > p { margin: 4px 0 8px; font-size: .95rem; }
  .contact .after h3 { margin-bottom: 8px; font-size: 1.2rem; }
  .contact .after-opts { grid-template-columns: 1fr 1fr; gap: 6px; }
  .contact .after-opts button { min-height: 44px; padding: 8px 12px; font-size: 15px; }
  .contact .after-skip { margin-top: 2px; }
  .talk-in input, .talk-in select { min-height: 42px; }
  .talk-in .btn.big { min-height: 46px; }
}
@media (max-height: 420px) {
  .talk-in > p { display: none; } /* the heading says it; every line counts on a phone on its side */
  .talk-in h2 { font-size: 1.3rem; }
  .contact .after-k { margin-bottom: 2px; font-size: 13px; }
  .talk-in .alt { margin-top: 2px; }
}

/* ---------- the link step before the form: an input and its button on one line; right-aligned like the
   other fields (Amir), the link itself typed left to right ---------- */
.contact .pre-link { display: flex; gap: 8px; margin: 0 0 4px; }
.contact .pre-link input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 52px; direction: ltr; text-align: right; }
.contact .pre-link input:placeholder-shown { direction: rtl; }
.contact .pre-link .btn { flex: 0 0 auto; width: auto; min-height: 52px; margin: 0; padding-inline: 22px; }
.contact .pre-err { min-height: 1.2em; margin: 2px 0 0; color: #ff9b8a; font-size: 14px; }
.contact .pre-err:empty { min-height: 0; }
.contact .after.pre .pre-note { margin: -4px 0 12px; font-size: 15px; }

/* ---------- the giants' articles (/legends/): each card opens its article; the article pages ---------- */
.g-card .g-src { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; opacity: .7; }
.g-more { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: #0e3a5c; text-decoration: none; }
.g-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.g-more:focus-visible { outline: none; }
.g-card:has(.g-more:focus-visible) { outline: 3px solid var(--acc); outline-offset: 3px; }
.g-all { margin: 18px auto 10px; text-align: center; }
.legend-head { display: flex; align-items: center; gap: 16px; margin: 14px 0 18px; }
.legend-head img { width: 96px; height: 96px; margin: 0; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.legend-head figcaption b { display: block; color: var(--text); font-size: 1.35rem; line-height: 1.15; }
.legend-head figcaption span { display: block; color: var(--muted); font-size: 15px; text-align: right; }
.legend-q { margin: 1.4em 0; padding: 14px 18px; border-inline-start: 3px solid var(--acc); border-radius: 0 12px 12px 0; background: var(--panel); }
.legend-q p { margin: 0 0 .4em; color: var(--text); font-size: 1.15em; font-weight: 600; line-height: 1.45; }
.legend-q p.en { color: var(--muted); font-size: .85em; font-weight: 400; font-style: italic; text-align: left; }
.legend-q cite { display: block; color: var(--muted); font-size: 13.5px; font-style: normal; }
.legend-q cite a { color: inherit; }
.legend-page .prose h1 { margin-bottom: .4em; }
.legend-src { margin: 1.6em 0 0; color: var(--muted); font-size: 14px; }
.legend-src summary { cursor: pointer; color: var(--dim); font-weight: 600; min-height: 24px; }
.legend-src ul { margin: .6em 0 0; padding-inline-start: 1.2em; }
.legend-src li { margin-bottom: .5em; line-height: 1.4; }
.legend-src a { color: var(--dim); overflow-wrap: anywhere; }
.legend-nav { display: flex; justify-content: space-between; gap: 12px; max-width: 720px; margin: 2.4em 0 0; }
.legend-nav a { flex: 1; min-height: 44px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--text); text-decoration: none; }
.legend-nav a:last-child:not(:first-child) { text-align: left; }
.legend-nav small { display: block; color: var(--muted); font-size: 13px; }
.legend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.legend-list a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); color: var(--text); text-decoration: none; }
.legend-list a:hover { border-color: var(--acc); }
.legend-list img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.legend-list span { min-width: 0; }
.legend-list small { display: block; color: var(--muted); font-size: 13px; text-align: right; }
.legend-list b { display: block; font-size: 1.2rem; line-height: 1.15; }
.legend-list em { display: block; margin-top: 4px; color: var(--dim); font-size: 15px; font-style: normal; line-height: 1.35; }

/* ---------- the ring's wordmark and hint grow and shrink with the ring: on a phone on its side the ring is sized by the
   screen's height (about 200px with the browser's bars), and the text's floor made it spill out of the circle (Amir) ---------- */
.cy-name b { font-size: min(3em, 11cqw); }
.cy-name small { font-size: min(.95em, 4.2cqw); }
.cy-hint { font-size: min(clamp(11px, 2.45cqw, 17px), max(10px, 4.8cqw)); }

/* ---------- the way into the systems: RainCycle and DR System logins, last in the menu (Amir, 2026-11-12). On a desktop
   the tools submenu's pattern, opening toward the page's left edge; in the phone drawer a labelled pair at the bottom.
   Service links, so 24px would pass (LPs CLAUDE.md); they are 50px+ anyway ---------- */
.nav-login .nav-menu { inset-inline-start: auto; inset-inline-end: -14px; width: 250px; }
/* just over the drawer breakpoint the menu is one item too full for the header: the items sit closer, and under 1240px
   the label says only "כניסה" (its full name stays for screen readers) */
@media (min-width: 1181px) and (max-width: 1299px) { .top nav { gap: 20px; } }
@media (min-width: 1181px) and (max-width: 1339px) { .nav-login .nl-more { display: none; } } /* 1339: "מנהל שיווק במיקור חוץ" is longer than "CMO במיקור חוץ" was */
.giants + .park { border-top: 1px solid var(--line); } /* the park used to start under the logos strip line; the giants now sit between them */
@media (max-width: 1180px) {
  .nav-login { margin-top: 26px; }
  .nav-login::before { content: attr(data-label); display: block; margin-bottom: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
  .nav-login .nav-menu { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .top .nav-login .nav-menu a { min-height: 58px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
  .top .nav-login .nav-menu small { font-size: 13px; }
}

/* ---------- the park closes on DR System, the system its tools come from (Amir, 2026-11-12) ---------- */
.park-dr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; max-width: 760px; margin: clamp(22px, 3vw, 34px) auto 0; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px); border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.park-dr p { flex: 1 1 340px; margin: 0; color: var(--dim); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.55; }
.park-dr b { color: var(--text); }
.park-dr bdi { white-space: nowrap; }
.park-dr .btn { flex: none; color: var(--text); }
@media (hover: hover) { .park-dr .btn:hover { border-color: var(--acc); color: var(--acc); } }

/* ---------- the phone menu, rebuilt (Amir, 2026-11-12: "the menu doesn't open in the animation section… not only there.
   Also make it nicer"). The bug: once scrolled, the header's blur (backdrop-filter) makes it the containing block of the
   fixed drawer, so the drawer shrank to the header's 116px and cut everything under the first item. Open, the header
   drops its blur and the drawer is the whole screen again. The drawer itself: opaque, the pages first with an arrow,
   the tools as a grid of cards, one clear "בואו נדבר", the logins last; the items slide in one after another. ---------- */
@media (max-width: 1180px) {
  .top.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border-color: transparent; }
  .top nav { gap: 0; padding: 92px var(--gutter) calc(28px + env(safe-area-inset-bottom)); font-size: 21px;
    background: radial-gradient(120% 55% at 100% 0%, rgba(116, 199, 255, .11), transparent 62%), #080c12; }
  .top nav > a, .top nav > .nav-group { order: 1; }
  .top nav > .nav-group:not(.nav-login) { order: 2; margin-top: 24px; }
  .top nav > a.nav-only-menu[href$="#contact"] { order: 3; }
  .top nav > .nav-login { order: 4; }
  .top nav > a:not([href$="#contact"]) { justify-content: space-between; min-height: 56px; font-weight: 700; }
  .top nav > a:not([href$="#contact"])::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-start: 14px; border: solid var(--muted); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
  .top nav > .nav-group:not(.nav-login)::before { content: "כלים לעסק"; display: block; margin-bottom: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
  .top nav > .nav-group:not(.nav-login) .nav-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .top nav .nav-menu a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 0; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); text-align: right; font-size: 17px; line-height: 1.2; }
  .top nav .nav-menu a:active { border-color: var(--acc); }
  .top nav .nav-menu small { color: var(--muted); font-size: 13px; line-height: 1.35; }
  .top nav > a.nav-only-menu[href$="#contact"] { justify-content: center; min-height: 56px; margin-top: 24px; border: 0; border-radius: 14px; background: var(--acc); color: #04121e; font-weight: 800; }
  .top nav > * { opacity: 0; transform: translateY(10px); transition: opacity .32s ease, transform .32s cubic-bezier(.2, .7, .2, 1); }
  .top.menu-open nav > * { opacity: 1; transform: none; }
  .top.menu-open nav > :nth-child(2) { transition-delay: .03s; }
  .top.menu-open nav > :nth-child(3) { transition-delay: .06s; }
  .top.menu-open nav > :nth-child(4) { transition-delay: .09s; }
  .top.menu-open nav > :nth-child(5) { transition-delay: .12s; }
  .top.menu-open nav > :nth-child(6) { transition-delay: .15s; }
  .top.menu-open nav > :nth-child(7) { transition-delay: .18s; }
  .top.menu-open nav > :nth-child(8) { transition-delay: .21s; }
  .top.menu-open nav > :nth-child(9) { transition-delay: .24s; }
  .top.menu-open nav > :nth-child(n+10) { transition-delay: .27s; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .top nav > * { transition: none; transform: none; }
}

/* the tools menu is five cards since "כל הפרויקטים" left it (Amir, 2026-11-12): in the phone drawer the odd last card takes the row */
@media (max-width: 1180px) {
  .top nav > .nav-group:not(.nav-login) .nav-menu a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* the letters page: the newest letter across the full width with its banner whole, the four parts two by two
   under it (Amir, 2026-11-12: five cards left the last one alone) */
.letters > li:first-child { grid-column: 1 / -1; }
.letters > li:first-child .letter-card img { aspect-ratio: 1200 / 630; }

/* "מי נכנס לעסק" on the CMO page: a portrait, not a full-width poster (Amir, 2026-11-12: "the image is way too big") */
.prose img.who-photo { width: clamp(150px, 40vw, 200px); height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: 50%; margin: .3em 0 1em; }

/* /amir/: the same portrait beside his name, like an author's head (Amir, 2026-11-12) */
.author-head { display: flex; align-items: center; gap: clamp(14px, 3vw, 24px); margin: 6px 0 18px; }
.author-head .who-photo { flex: none; width: clamp(92px, 24vw, 140px); margin: 0; }
.author-head h1 { margin: 0; }
.author-head .byline { margin-top: 6px; }