/*
 * SACRED EDITORIAL, THE SAME RETUNE THE ADMIN CONSOLE GOT.
 *
 * Arik: this page, the board and the kiosk app should look like one
 * product, not a marketing page bolted on beside them. The fonts were
 * already right -- Frank Ruhl Libre and IBM Plex Sans Hebrew, which is
 * why they stay untouched here. What changes is the palette (flat
 * charcoal and brass instead of a radial-gradient glow behind the
 * header), the corners (0px on every real UI element -- buttons, cards,
 * photo frames, form fields -- not on things that are ICONOGRAPHY of a
 * phone or a physical dot, which keep their natural shape), and the
 * shadows (removed from the screen gallery and the dedication demo,
 * which is where they showed up).
 */
:root {
  --ink:    #141619;
  --navy:   #1A1D24;
  --paper:  #F4EFEA;
  --muted:  #8C857B;
  --brass:  #C5A059;
  --brick:  #6E2229;
  --brick-l:#B8756B;
  --rule:   rgba(197,160,89,0.22);
  --display: 'Frank Ruhl Libre', Georgia, serif;
  --text:    'IBM Plex Sans Hebrew', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--text); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* Both languages ship in the markup; the root element decides which is shown.
   Without JavaScript the page stays Hebrew rather than showing both at once. */
:root[lang="he"] [data-en] { display: none; }
:root[lang="en"] [data-he] { display: none; }

/* --------------------------------------------------------------- toggle -- */
.langbar { display: flex; justify-content: flex-end; padding: 16px 0 0; }
.langbtn {
  background: none; border: 1px solid var(--rule); color: var(--paper);
  font-family: var(--text); font-size: 13px; letter-spacing: .16em;
  padding: 7px 16px; cursor: pointer; border-radius: 3px;
}
.langbtn:hover { border-color: var(--brass); color: var(--brass); }

/* ---------------------------------------------------------------- hero -- */
header {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.hero { padding: 54px 0 66px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.brandline { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.brandline b { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.01em; }
.brandline span { font-size: 13px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
h1 {
  font-family: var(--display); font-weight: 900; font-size: 62px; line-height: 1.06;
  margin: 0 0 20px; letter-spacing: -.015em;
}
h1 em { font-style: normal; color: var(--brass); }
.lede { font-size: 21px; color: #C9CFDB; margin: 0 0 30px; max-width: 30em; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 3px; text-decoration: none;
  font-weight: 600; letter-spacing: .04em; font-size: 16px;
}
.btn.primary { background: var(--brick); color: var(--paper); border: 1px solid var(--brick-l); }
.btn.ghost { border: 1px solid var(--rule); color: var(--paper); }
/* The mock screen is a link, so it has to say so without turning into a button. */
a.tv { display: block; text-decoration: none; position: relative; }
a.tv:hover { border-color: var(--brass); }
.tvcue {
  display: block; margin-top: 12px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brass); opacity: .8;
}
a.tv:hover .tvcue { opacity: 1; }

/* The price, in the hero. Big enough to answer the question, quiet enough not
   to be the loudest thing on the page. */
/* The photograph of the real board, framed the way the drawn one was. */
.tv.shot { padding: 10px; }
.tv.shot img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* A drawn stand-in for the board, so the page needs no screenshot to keep
   current. Deliberately abstract — it suggests the layout, it does not
   pretend to be a photograph. */
.tv { border: 1px solid var(--rule); background: var(--navy); padding: 12px; border-radius: 4px; }
.mock { background: #101a30; padding: 18px 20px; display: grid; gap: 12px; direction: rtl; }
.mock .r { display: flex; align-items: baseline; gap: 10px; }
.mock .r .lbl { font-family: var(--display); font-weight: 700; font-size: 17px; }
.mock .r .dot { flex: 1; border-bottom: 1px dotted var(--rule); }
.mock .r .val { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--brass); }
.mock .top { font-family: var(--display); font-weight: 900; font-size: 26px; }
.mock .sm { font-size: 12px; color: var(--muted); letter-spacing: .12em; }

/* ------------------------------------------------------------- sections -- */
section { padding: 66px 0; border-bottom: 1px solid var(--rule); }
h2 { font-family: var(--display); font-weight: 900; font-size: 36px; margin: 0 0 12px; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0 0 34px; font-size: 18px; max-width: 46em; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { border: 1px solid var(--rule); padding: 24px; background: rgba(255,255,255,0.015); }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0 0 8px; }
.card p { margin: 0; color: #B6BFCE; font-size: 16px; }
.card .k { font-size: 12px; letter-spacing: .18em; color: var(--brass); text-transform: uppercase; display: block; margin-bottom: 10px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { padding: 9px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 12px; }
ul.ticks li b { font-family: var(--display); font-weight: 700; min-width: 9em; }
ul.ticks li span { color: #B6BFCE; }

/* ----------------------------------------------------------- live board -- */
/* A real board, at the size a real board is: 16:9, and nothing around it that
   a wall would not have. */
.stage { margin-top: 26px; }
.stage-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--rule); background: #0A101C; overflow: hidden;
}
.stage-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The board is a display, not a control panel — clicking into it would only
   let somebody scroll a screen that is supposed to run itself. */
.stage-frame iframe { pointer-events: none; }
.stage-open {
  position: absolute; inset-inline-end: 14px; bottom: 14px; z-index: 2;
  background: rgba(10,16,28,.86); border: 1px solid var(--rule); color: var(--paper);
  text-decoration: none; font-size: 13px; letter-spacing: .05em; padding: 8px 14px;
}
.stage-open:hover { border-color: var(--brass); color: var(--brass); }
.stage-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* Four boards, each held on its own day. Two up on a phone, four across on a
   desk — never one long column of identical boxes. */
.moadim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.moadim figure { margin: 0; }
.moadim figcaption {
  margin-top: 9px; font-family: var(--display); font-weight: 700; font-size: 16px;
}
.stage-frame.small { border-color: rgba(244,239,229,.10); }
@media (max-width: 900px) { .moadim { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .moadim { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- offline -- */
/* Four plain statements, each on its own rule. It replaced a panel of IP
   addresses and port numbers — true, and none of a gabbai's business. What he
   wants to know is whether the names stay in the building. */
.plainly { display: grid; align-content: center; gap: 0; }
.plainly div {
  padding: 18px 0 18px 0; border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.35;
}
.plainly div:first-of-type { border-top: 0; padding-top: 0; }
.plainly div::before {
  content: ''; display: inline-block; width: 22px; height: 2px;
  background: var(--brass); vertical-align: middle;
  margin-inline-end: 14px; transform: translateY(-3px);
}

/* -------------------------------------------------------------- pricing -- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.price { border: 1px solid var(--rule); padding: 28px; }
.price.feature { border-color: var(--brass); background: rgba(201,146,46,0.06); }
.price .name { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.price .amt { font-family: var(--display); font-weight: 900; font-size: 46px; margin: 10px 0 2px; }
.price .per { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.price ul { list-style: none; padding: 0; margin: 0; font-size: 15px; color: #B6BFCE; }
.price li { padding: 6px 0; }

footer { padding: 44px 0 60px; color: var(--muted); font-size: 15px; }
footer a { color: var(--brass); }

@media (max-width: 900px) {
  .hero, .two, .grid, .prices { grid-template-columns: 1fr; }
  h1 { font-size: 42px; }
  .tv { display: none; }
}
/* ------------------------------------------------------------- enquiry -- */
/*
 * Asking about a board.
 *
 * Six fields and only two of them required, because every extra box on a form
 * loses somebody — and a name with a telephone number is already enough to
 * ring a shul back. The rest is there because knowing the shul and the town
 * before the first call makes that call much better.
 */
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; max-width: 640px; }
.ask .wide { grid-column: 1 / -1; }
.ask label {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 6px;
}
.ask label em { font-style: normal; color: var(--muted); letter-spacing: 0; text-transform: none; }
.ask input, .ask textarea {
  width: 100%; background: #0B1120; border: 1px solid var(--rule); color: var(--paper);
  font-family: var(--text); font-size: 16px; padding: 11px 13px; border-radius: 3px;
}
.ask input:focus, .ask textarea:focus { outline: none; border-color: var(--brass); }
.ask textarea { min-height: 92px; resize: vertical; }
/* The honeypot. Off-screen rather than display:none, which some robots skip. */
  /*
   * THE HONEYPOT, HIDDEN WITHOUT BEING THROWN OFF THE PAGE.
   *
   * It was `left: -9999px`, the old trick — and that is a real box at a real
   * coordinate nine thousand pixels away, so the DOCUMENT is nine thousand
   * pixels wide. On a desktop nobody notices. On a phone the whole site could
   * be dragged sideways into black space, and worst in Hebrew, where the page
   * runs the other way and the scroll lands you nowhere near the content.
   * Measured at 10,374px against a 375px viewport.
   *
   * The clip pattern instead: one pixel at its natural position, clipped to
   * nothing. Still in the DOM, still focusable by a script, still filled in by
   * the bots this is here to catch — `display:none` would not be, which is why
   * the off-screen trick got used in the first place.
   */
  .ask .hp {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
.ask-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ask-msg { font-size: 15px; }
.ask-msg.ok { color: #6FCF97; }
.ask-msg.err { color: var(--brick-l); }
.ask-note { color: var(--muted); font-size: 14px; margin: 14px 0 0; max-width: 52ch; }
@media (max-width: 640px) { .ask { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ yours -- */
/*
 * The correction to a claim that was working too well.
 *
 * "The gabbai never touches the screen" and "0 actions a day" were meant to
 * say there is no daily upkeep. Read cold by a shul that has never seen it,
 * they say something else: that the board cannot be changed at all, and that
 * their own shiurim and announcements are not going on it. Arik spotted it.
 *
 * So the page now draws the line the product actually draws — what follows
 * from the date, and what only the shul knows — and shows the second one being
 * typed.
 */
.yours { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: center; }
.yours-list { list-style: none; margin: 22px 0 0; padding: 0; }
.yours-list li {
  padding: 13px 0; border-top: 1px solid var(--rule);
  display: flex; gap: 14px; align-items: baseline;
}
.yours-list li:last-child { border-bottom: 1px solid var(--rule); }
.yours-list b { font-family: var(--display); font-weight: 700; font-size: 18px; min-width: 8.5em; }
.yours-list span { color: var(--muted); font-size: 15px; }

/* A phone, drawn, with the real admin inside it. Not a photograph: this one
   has to stay current and has to read in two languages. */
.phone {
  width: 300px; margin: 0 auto; border: 1px solid var(--rule); border-radius: 26px;
  background: #0B1120; padding: 12px 10px 16px;
}
.phone-top {
  height: 5px; width: 74px; margin: 0 auto 12px; border-radius: 99px; background: var(--rule);
}
.ad { background: #F2ECDF; color: #161D2B; border-radius: 14px; overflow: hidden; }
.ad-bar {
  display: flex; gap: 14px; padding: 11px 13px 0; font-size: 12px; color: #5F6879;
  border-bottom: 1px solid rgba(22,29,43,.14); overflow: hidden;
}
.ad-bar span { padding-bottom: 9px; white-space: nowrap; }
.ad-bar span.sel { color: #161D2B; font-weight: 600; box-shadow: inset 0 -2px 0 #B4570E; }
.ad-body { padding: 13px; }
.ad-h { font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 11px; }
.ad-f { margin-bottom: 10px; }
.ad-f i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: #8A6110; font-weight: 600; margin-bottom: 4px;
}
.ad-f u {
  display: block; text-decoration: none; background: #FFFDF8; font-size: 13px;
  border: 1px solid rgba(22,29,43,.18); border-radius: 3px; padding: 7px 9px;
}
.ad-save {
  background: #8E1D22; color: #F4EFE5; font-size: 12.5px; font-weight: 600;
  padding: 8px 16px; border-radius: 3px; display: inline-block; margin-top: 3px;
}
/* The little admin scrolls, so it must look like it scrolls: the screens snap,
   the trailing edge fades, and the dots say how many there are. */
.ad-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent 100%);
}
.ad-strip::-webkit-scrollbar { display: none; }
.ad-strip .ad { flex: 0 0 100%; scroll-snap-align: center; min-height: 344px; }
.ad-strip:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.ad-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ad-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--rule); transition: background .25s; }
.ad-dots i.on { background: var(--brass); }

/* A rotation row: a tick, a screen name, and how many seconds it gets. */
.ad-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 7px; }
.ad-row s { width: 13px; height: 13px; flex: none; border-radius: 2px; background: #1B4E8E; text-decoration: none; }
.ad-row s.off { background: none; border: 1px solid rgba(22,29,43,.3); }
.ad-row span { flex: 1; }
.ad-row u {
  text-decoration: none; background: #FFFDF8; border: 1px solid rgba(22,29,43,.18);
  border-radius: 3px; padding: 3px 9px; font-size: 11.5px;
}
/* The day picker, the same seven squares the admin uses. */
.ad-days { display: flex; gap: 3px; }
.ad-days b {
  width: 21px; height: 21px; display: grid; place-items: center; font-size: 11px;
  border: 1px solid rgba(22,29,43,.18); border-radius: 2px; font-weight: 400;
}
.ad-days b.on { background: #8A6110; border-color: #8A6110; color: #F2ECDF; font-weight: 600; }
.ad-note { font-size: 11px; color: #5F6879; margin-bottom: 9px; line-height: 1.5; }
/* Two weeks of a month: enough to read as a calendar, not enough to shout. */
.ad-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ad-cal b {
  border: 1px solid rgba(22,29,43,.14); border-radius: 2px; padding: 3px 2px;
  font-size: 8.5px; font-weight: 400; color: #5F6879; text-align: center; line-height: 1.25;
}
.ad-cal b em { display: block; font-style: normal; font-size: 11px; color: #161D2B; }
.ad-cal b.sh { background: rgba(27,78,142,.12); }
.ad-cal b.now { border-color: #B4570E; }

@media (max-width: 860px) {
  .yours { grid-template-columns: 1fr; gap: 30px; }
}

/* ------------------------------------------------------------- the wall -- */
/*
 * Photographs of the first board, hanging in the shul it was built for.
 *
 * Deliberately NOT a tidy pair of equal cards. A real installation is the one
 * thing on this page that cannot be mocked up, so the first frame is given the
 * room it deserves and the second sits under it, offset, beside the words —
 * the way a page is laid out when somebody has decided what matters most.
 */
.wall { display: grid; gap: 26px; }
.frame {
  /* figure carries a 40px inline margin by default, which quietly took 80px
     off every photograph and was only visible as a too-narrow picture. */
  margin: 0;
  border: 1px solid var(--rule); background: #0B1120; padding: 10px;
  border-radius: 4px;
}
.frame img { display: block; width: 100%; height: auto; border-radius: 2px; }
.frame figcaption {
  margin: 12px 4px 2px; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass);
}
.wall-pair {
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 26px; align-items: start;
}
/*
 * The gabbai, in his own words.
 *
 * A rule down the side rather than a card: a quote is somebody speaking, not
 * a product feature in a box. The stars are small on purpose — with one shul
 * live, five big gold stars read as a shop, and the sentence is worth more
 * than the rating.
 */
.wall-quote { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 20px; }
.stars { color: var(--brass); font-size: 15px; letter-spacing: .22em; margin-bottom: 12px; }
.wall-quote blockquote {
  margin: 0 0 14px; padding-inline-start: 16px;
  border-inline-start: 2px solid var(--brick-l);
  font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.5;
  color: var(--paper);
}
.attrib b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; }
.attrib span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.wall-said { padding-top: 6px; }
.wall-said p { margin: 0 0 16px; color: #C9CFDB; }
.wall-said p:last-child { margin-bottom: 0; }
.wall-said .who {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  color: var(--paper); margin-bottom: 4px; line-height: 1.25;
}
.wall-said .where {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
/* A rule rather than a box: the facts are a list, not a card. */
.wall-facts { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 16px; }
.wall-facts div { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.wall-facts div + div { margin-top: 8px; }
.wall-facts b {
  font-family: var(--display); font-weight: 900; color: var(--brass);
  font-size: 17px; min-width: 2.2em;
}
@media (max-width: 860px) {
  .wall-pair { grid-template-columns: 1fr; }
}

/* ---------------- the rolling screens ---------------- */
/*
 * A marquee that is also a scroller. It rolls on its own so a visitor who does
 * nothing still sees four or five screens, and it is a real overflow container
 * so anybody who wants to go back can simply drag it — no arrows, no dots, and
 * nothing to get out of step with the animation.
 *
 * The track is duplicated in JS rather than in the markup, so the images are
 * declared once and the seam is exact: the animation travels precisely half
 * the track and restarts where it began.
 */
/*
 * THE ROLLER IS ALWAYS LTR, WHATEVER THE PAGE IS.
 *
 * It had a mirrored animation for RTL that translated the track +50%, to the
 * RIGHT. In an RTL scroll container the right is the START edge, and overflow
 * toward the start is NOT reachable by scrolling — so instead of being
 * absorbed by `overflow-x:auto` it spilled onto the document. On a 375px phone
 * the Hebrew page became **10,374px wide**: the whole site could be dragged
 * sideways into empty space, which is how Arik found it.
 *
 * `.roll` itself was innocent and correctly 319px. The leak was entirely the
 * transform escaping in the one direction a scroll container cannot hold.
 *
 * So the strip stops caring which way the page runs. A row of screenshots has
 * no reading order to respect — it is a filmstrip, not a sentence — and one
 * direction means one animation, one pair of fades, and no second code path
 * that only a Hebrew reader on a phone would ever meet.
 */
.roll{position:relative;overflow-x:auto;overflow-y:hidden;margin-top:34px;
  direction:ltr;max-width:100%;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.roll::-webkit-scrollbar{display:none}
.roll.dragging{cursor:grabbing}
.roll::before,.roll::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.roll::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
.roll::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}

/*
 * One animation, one direction.
 *
 * The strip used to have a mirrored keyframe for RTL that translated +50%
 * instead of -50%. That is gone along with the RTL-specific fades: a row of
 * screenshots is a filmstrip, not a sentence, and has no reading order to
 * respect. One direction means one code path instead of a second that only a
 * Hebrew reader would ever meet.
 *
 * It is a CSS animation rather than a script advancing scrollLeft. I wrote the
 * scripted version while chasing the horizontal-scroll bug and could not test
 * it — this pane does not paint, so requestAnimationFrame never fires — and
 * the bug turned out to be the honeypot below, nothing to do with this. A
 * declarative animation that has worked for weeks beats untested JavaScript
 * written for the wrong reason.
 */
.roll-track{display:flex;gap:22px;width:max-content;animation:roll 90s linear infinite}
/* Stop when somebody is reading, and for anyone who asked for less motion. */
.roll:hover .roll-track,.roll.dragging .roll-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.roll-track{animation:none}}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Each caption keeps the page's own direction — the strip is LTR, the words
   in it are not. */
.roll figcaption{direction:inherit}

.roll figure{margin:0;flex:0 0 auto;width:min(520px,74vw)}
.roll img{display:block;width:100%;height:auto;border-radius:3px;
  border:1px solid rgba(244,239,229,.13);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.roll figcaption{margin-top:9px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------------- the dedication ---------------- */
.ded{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center}
.ded-copy p{margin-top:14px}
.ded-copy .ded-note{margin-top:22px;font-size:15px;color:var(--muted)}
.ded-demo{display:flex;flex-direction:column;gap:18px}

/* A board, small, with the strip along the bottom — so the reader sees where
   the line actually sits rather than reading a description of it. */
.ded-board{border:1px solid rgba(244,239,229,.13);border-radius:3px;overflow:hidden;
  background:linear-gradient(178deg,#150F26 0%,#0D1226 24%,#0A101C 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.42)}
.ded-rows{display:flex;flex-direction:column;gap:11px;padding:26px 26px 20px}
.ded-rows span{display:block;height:9px;border-radius:2px;background:rgba(244,239,229,.11)}
.ded-rows span:nth-child(1){width:52%}
.ded-rows span:nth-child(2){width:78%}
.ded-rows span:nth-child(3){width:64%}
.ded-rows span:nth-child(4){width:40%}
.ded-strip{display:flex;align-items:baseline;justify-content:center;gap:13px;
  padding:11px 18px 13px;border-top:1px solid rgba(244,239,229,.13)}
.ded-strip .ded-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;white-space:nowrap}
.ded-strip .ded-v{font-family:var(--display);font-weight:700;font-size:17px;color:var(--paper);opacity:.94}
.ded-board-en{direction:ltr}

@media (max-width:900px){
  .ded{grid-template-columns:1fr;gap:34px}
  .roll figure{width:min(440px,84vw)}
}

  /* Nothing on this page may be dragged sideways. A single element wider than
     the viewport turns the whole site into a horizontal scroller on a phone,
     and it is invisible on a desktop where there is room to spare. */
  html,body{overflow-x:hidden;max-width:100%}

  /* ---- a rav's own words ---- */
  .said { margin: 0; max-width: 34em; }
  .said-q {
    font-family: var(--display); font-weight: 400; font-size: 26px;
    line-height: 1.55; color: var(--paper); margin: 0 0 22px;
  }
  .said-q:empty { display: none; }
  .said-q::before { content: "\201D"; }
  .said-q::after  { content: "\201C"; }
  :root[lang="en"] .said-q::before { content: "\201C"; }
  :root[lang="en"] .said-q::after  { content: "\201D"; }
  .said-by { display: flex; flex-direction: column; gap: 3px;
    border-top: 1px solid var(--rule); padding-top: 16px; }
  .said-by .who {
    font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--paper);
  }
  .said-by .where {
    font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }

  /* =====================================================================
     SHARP CORNERS, FLAT SURFACES -- same rule as the admin console.
     Placed last on purpose: a media query or a later selector adds no
     specificity, so a component declared with its own radius earlier in
     this file would otherwise win. Scoped to real UI chrome -- buttons,
     cards, photo frames, inputs, the roller's captions -- and NOT to the
     .phone illustration or anything inside it (.ad, .ad-save, .ad-f u,
     .ad-days b, .ad-cal b, .ad-dots i, .phone-top): those are drawings of
     a physical phone and a physical UI, not this site's own chrome, and
     a phone with square corners reads as a mistake, not a design choice.
     ===================================================================== */
  .langbtn, .btn, .tv, .tv.shot img, .card, .frame, .frame img,
  .ask input, .ask textarea, .ded-board, .roll img {
    border-radius: 0;
  }
  /* The filmstrip and the dedication demo had a drop shadow on their
     images -- the one place on this page shadows had crept in. */
  .roll img { box-shadow: none; }
  .ded-board { box-shadow: none; }

/* ------------------------------------------------ nav, hero, strip, cream -- */
/*
 * The layout from Arik's reference mock (2026-09-30): a sticky bar with the
 * logo, the links and one gold call to action; a full-bleed photograph with
 * the words on its dark left; a strip of five things the board does; and the
 * live board on a light section. Kept: this page's own fonts (they carry
 * Hebrew) and square corners. Changed: the primary button is now gold, on
 * every button on the page, not brick.
 */
html { scroll-behavior: smooth; }
section, header { scroll-margin-top: 72px; }

.topnav { position: sticky; top: 0; z-index: 20; background: var(--ink); border-bottom: 1px solid var(--rule); }
.topnav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--paper); }
.logo { gap: 12px; align-items: center; }
.logo img { height: 46px; width: auto; display: block; }
.logo b { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .06em; color: var(--brass); }
.logo span { font-size: 15px; color: var(--muted); }
.foot-logo { display: block; width: 190px; height: auto; margin: 0 0 14px; }
.navlinks { display: flex; gap: 30px; margin: 0 auto; }
.navlinks a { color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.navlinks a:hover { border-bottom-color: var(--brass); }
.navend { display: flex; align-items: center; gap: 14px; }
.btn.primary { background: var(--brass); color: var(--ink); border: 1px solid var(--brass); }
.btn.primary:hover { background: #D4B06A; }
.btn.ghost:hover { border-color: var(--brass); color: var(--brass); }
.navcta { padding: 10px 20px; font-size: 15px; }

.hero2 { position: relative; min-height: 580px; display: flex; align-items: center; overflow: hidden; }
.hero2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 35%; }
.hero2-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,25,.97) 0%, rgba(20,22,25,.93) 48%, rgba(20,22,25,.6) 64%, rgba(20,22,25,0) 84%); }
.hero2-wrap { position: relative; direction: ltr; width: 100%; padding-top: 70px; padding-bottom: 70px; }
.hero2-copy { max-width: 540px; text-shadow: 0 1px 14px rgba(20,22,25,.85); }
:root[dir="rtl"] .hero2-copy { direction: rtl; text-align: right; }
:root[dir="ltr"] .hero2-copy { direction: ltr; text-align: left; }
.eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 20px; }
.hero2 h1 { font-size: 60px; }
.hero2 .lede { font-size: 19px; color: #DDD8CE; max-width: none; }

.strip { list-style: none; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: repeat(5, 1fr); }
.strip li { padding: 30px 22px; text-align: center; border-inline-start: 1px solid var(--rule); }
.strip li:first-child { border-inline-start: 0; }
.strip svg { width: 34px; height: 34px; fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 12px; }
.strip b { display: block; font-size: 16px; }
.strip small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 4px; }

#live { background: var(--paper); color: var(--ink); border-bottom-color: rgba(20,22,25,.12); }
#live h2 { color: var(--ink); }
#live .sub { color: #5A554D; margin-bottom: 24px; }
#live .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
#live .stage { margin: 0; }
#live .stage-note { color: #6B665E; }
#live .btn.primary { display: inline-block; }

@media (max-width: 900px) {
  .navlinks { display: none; }
  .topnav-in { justify-content: space-between; }
  .hero2 { display: block; min-height: 0; }
  .hero2-img { position: relative; height: 260px; }
  .hero2-scrim { display: none; }
  .hero2-wrap { padding-top: 34px; padding-bottom: 40px; }
  .hero2 h1 { font-size: 42px; }
  .strip { grid-template-columns: 1fr 1fr; padding: 0 28px; }
  .strip li { border-inline-start: 0; border-top: 1px solid var(--rule); }
  #live .wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* Phones: one compact row that never wraps. The Hebrew name under the logo
   goes (the mark and LUACH CHAI carry it) so the bar keeps to one line. */
.topnav a, .topnav button, .logo b { white-space: nowrap; }
@media (max-width: 600px) {
  .topnav-in { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .logo { gap: 8px; }
  .logo img { height: 32px; }
  .logo b { font-size: 15px; letter-spacing: .05em; }
  .logo span { display: none; }
  .navend { gap: 8px; }
  .langbtn { padding: 7px 10px; font-size: 12px; letter-spacing: .06em; }
  .navcta { padding: 8px 12px; font-size: 13px; }
}

/* ------------------------------------------------ one page per menu item -- */
/*
 * The menu used to scroll to a section of one long page; each item is a page
 * of its own now (tools/build-site.js). The page you are on is underlined in
 * the bar, and every page but the front one opens with a short heading band.
 */
.navlinks a[aria-current="page"] { border-bottom-color: var(--brass); color: var(--brass); }
.pagehead { padding: 54px 0 46px; border-bottom: 1px solid var(--rule); }
.pagehead .eyebrow { margin-bottom: 14px; }
.pagehead h1 { font-size: 46px; margin: 0; }
#next .cta { margin-top: 6px; }
@media (max-width: 600px) { .pagehead { padding: 34px 0 30px; } .pagehead h1 { font-size: 34px; } }

/* Phones and tablets: the menu is the only way between pages, so it stays --
   a second row under the logo that scrolls sideways if it must. */
@media (max-width: 900px) {
  .topnav-in { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; row-gap: 0; }
  .navlinks { display: flex; order: 3; flex: 0 0 100%; margin: 0; gap: 15px; overflow-x: auto; padding: 4px 0 2px; white-space: nowrap; scrollbar-width: none; }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { padding: 8px 0 9px; font-size: 14px; }
}

@media (max-width: 480px) { .navlinks { gap: 12px; } .navlinks a { font-size: 13px; } }