/* ============================================================================
   pricelog.fyi — the 2026-10 design (Figma: "pricelog.fyi — עיצוב מחדש").

   A second stylesheet, not a section of styles.css: the generated pages move
   to this design only when pricelog-scaner ships the new templates, and until
   then the old pages must keep the old sheet untouched. Once every page links
   this one, styles.css goes.

   Sizes are the Figma values at its two frames, 390 and 1440 wide, and slide
   between them (see --fl below), so both frames match to the pixel and the
   widths in between are interpolated rather than guessed.

   Logical properties only, as in styles.css: no left/right, except where
   CSS has no logical form (the scroll buttons' anchors, and the section for
   left-to-right pages at the end).
   No script and no third-party request: the fonts are served from /fonts/.
   ========================================================================= */

@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("/fonts/heebo.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* The design has a light theme only. The dark sections (hero, "how it
     works", footer) are dark in both, so a dark-mode visitor is not dazzled. */
  color-scheme: light;

  --night:      #0B2236;
  --sea:        #0E6F8A;
  --sea-light:  #E3F1F4;
  --sand:       #FBF5EC;
  --surface:    #FFFFFF;
  /* Two corals. The bright one (#F2643A in the mock) carries white text at
     only 3.2:1, under the 4.5:1 that 16px text needs, so buttons use the
     darker one (4.5:1) and coral text on light uses the darkest (4.8:1). */
  --coral:      #CF4A23;
  --coral-ink:  #C2410C;
  --coral-glow: #F2643A;
  --coral-tint: #FDE9E1;
  --sun:        #FFB547;
  --ink:        #14212B;
  --muted:      #5E6B75;
  --mint:       #13A574;   /* large text and marks only: 3.2:1 on white */
  --mint-ink:   #0B7A53;
  --mint-tint:  #E6F6EF;
  --mint-deep:  #0B5E40;
  --border:     #E8E1D5;

  --display: "Rubik", "Heebo", system-ui, sans-serif;
  --text:    "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --pill: 999px;
  --shadow-card: 0 12px 32px -8px rgb(11 34 54 / .10);
  --shadow-lift: 0 18px 40px -10px rgb(11 34 54 / .18);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Container: 1200 at 1440 (120 a side), 16 a side on a phone. */
  --gutter: max(clamp(16px, 4vw, 40px), (100% - 1200px) / 2);
}

/* fl(a, b): a at a 390px viewport, b at 1440px, linear between, clamped.
   Written out where used, because CSS has no functions:
     clamp(a, calc(a + (b - a) * ((100vw - 390px) / 1050)), b)            */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.185; text-wrap: balance; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:where(a[href], button, summary, label, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible, .hero :focus-visible, .how :focus-visible, .foot :focus-visible { outline-color: var(--sun); }

.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 20;
  padding: 12px 20px; background: var(--surface); color: var(--ink); border-radius: 0 0 12px 12px;
}
.skip:focus { inset-inline-start: 16px; }

.wrap { padding-inline: var(--gutter); }

.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

/* ---------- nav (floating pill) ---------- */

.nav-wrap {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 10;
  padding-block-start: clamp(12px, calc(12px + 12 * ((100vw - 390px) / 1050)), 24px);
  padding-inline: var(--gutter);
}
.nav-wrap--static { position: static; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 10px;
  padding-inline: clamp(18px, calc(18px + 6 * ((100vw - 390px) / 1050)), 24px) 10px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / .86);
  /* the stroke is drawn inside, as in the mock, so it adds no height */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 10px 30px -10px rgb(11 34 54 / .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* The end padding is narrow for the Telegram button's pill; a bar without one
   (an English page) would put its last link against the edge. */
.nav:not(:has(> .btn)) { padding-inline-end: clamp(18px, calc(18px + 6 * ((100vw - 390px) / 1050)), 24px); }
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, calc(18px + 2 * ((100vw - 390px) / 1050)), 20px);
  color: var(--night); text-decoration: none; direction: ltr;
}
.logo svg { --s: clamp(28px, calc(28px + 2 * ((100vw - 390px) / 1050)), 30px); inline-size: var(--s); block-size: var(--s); flex: none; order: 2; }
.logo span span { font-weight: 500; color: var(--muted); font-size: .9em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  /* 44px to tap, laid out as 40 so the bar keeps the mock's 60px height */
  display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -2px;
  font-weight: 500; font-size: 15px; color: var(--muted); text-decoration: none;
}
.nav-links a[aria-current] { font-weight: 700; color: var(--night); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--night); } }

/* The phone menu is a <details>: it opens without a line of script. */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border-radius: var(--pill); background: var(--sand); color: var(--night);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { inline-size: 22px; block-size: 22px; }
.nav-menu[open] > div {
  position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: -10px;
  display: grid; min-inline-size: 220px; padding: 8px;
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lift);
}
.nav-menu a {
  display: flex; align-items: center; min-block-size: 44px; padding-inline: 14px;
  border-radius: 12px; font-weight: 500; color: var(--night); text-decoration: none;
}
.nav-menu a[aria-current] { font-weight: 700; background: var(--sand); }
@media (max-width: 860px) {
  .nav-links, .nav > .btn { display: none; }
  .nav-menu { display: block; }
  /* The logo leads on a phone, the menu trails: same order as the mock. */
}

/* ---------- buttons, badges, pills ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 44px; padding: 14px 26px; border-radius: var(--pill);
  font: 700 16px/1.47 var(--text); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.btn .icon { inline-size: 20px; block-size: 20px; }
.btn--primary { border-width: 0; background: var(--coral); color: #fff; box-shadow: 0 8px 24px -6px rgb(207 74 35 / .32); }
.btn--ghost { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .6); }
.btn--dark { background: var(--night); color: #fff; }
.btn--sm { position: relative; min-block-size: 40px; padding: 9px 18px; gap: 8px; font-size: 15px; border-width: 0; }
/* drawn 40px tall, tapped 44px: the accessibility statement promises 44 */
.btn--sm::after { content: ""; position: absolute; inset: -2px 0; }
.btn--sm .icon { inline-size: 18px; block-size: 18px; }
.btn--block { display: flex; inline-size: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: 0 12px 28px -6px rgb(207 74 35 / .45); }
  .btn--ghost:hover { background: rgb(255 255 255 / .22); }
}
/* Local preview only: the link is created when the page is published. */
.btn--placeholder { background: var(--border); color: var(--muted); box-shadow: none; cursor: not-allowed; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: var(--pill);
  background: var(--sun); color: var(--night);
  font: 500 13px/1.47 var(--text); white-space: nowrap;
}
.badge b { font: 900 15px/1.185 var(--display); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--pill);
  background: rgb(255 255 255 / .92); color: var(--mint-ink);
  font: 500 12px/1.47 var(--text); white-space: nowrap;
}
.pill::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--mint); }
.pill--rose { color: var(--coral-ink); }
.pill--rose::before { background: var(--coral-glow); }
.pill--expired { color: var(--muted); }
.pill--expired::before { background: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--pill);
  background: var(--sea-light); color: var(--sea);
  font: 500 14px/1.47 var(--text);
}
.chip .icon { inline-size: 18px; block-size: 18px; }

/* ---------- section heads ---------- */

.sec { padding-block: clamp(56px, calc(56px + 54 * ((100vw - 390px) / 1050)), 110px); }
.sec--tight-top { padding-block-start: clamp(24px, calc(24px + 16 * ((100vw - 390px) / 1050)), 40px); }
.sec--no-top { padding-block-start: 0; }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-block-end: clamp(20px, calc(20px + 28 * ((100vw - 390px) / 1050)), 48px);
}
.sec-head > div { display: grid; gap: clamp(6px, calc(6px + 4 * ((100vw - 390px) / 1050)), 10px); }
.eyebrow { font: 700 clamp(13px, calc(13px + 1 * ((100vw - 390px) / 1050)), 14px)/1.47 var(--text); color: var(--coral-ink); }
.sec-title {
  font: 700 clamp(28px, calc(28px + 16 * ((100vw - 390px) / 1050)), 44px)/1.185 var(--display);
  color: var(--night);
}
.sec-sub { max-inline-size: 620px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.sec-link {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; flex: none;
  font-weight: 700; color: var(--sea); text-decoration: none;
}
.sec-link .icon { inline-size: 18px; block-size: 18px; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .sec-link:hover .icon { transform: translateX(-4px); } }
@media (max-width: 640px) { .sec-sub { display: none; } .sec-head .sec-link { display: none; } }

.on-dark .eyebrow { color: var(--sun); }
.on-dark .sec-title { color: #fff; }
.on-dark .sec-sub { color: rgb(255 255 255 / .75); }

/* ---------- hero ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-block-size: clamp(780px, calc(780px + 80 * ((100vw - 390px) / 1050)), 860px);
  /* the nav floats over the top: its offset plus its height, plus a gap. Without
     the gap, a hero taller than its min-height (the home page with the search
     box) loses the auto margin and its first line sits against the nav. */
  padding-block: clamp(94px, calc(94px + 18 * ((100vw - 390px) / 1050)), 112px) clamp(28px, calc(28px + 36 * ((100vw - 390px) / 1050)), 64px);
  padding-inline: var(--gutter);
  color: #fff; background: var(--night);
}
.hero-img, .hero::before, .hero::after { position: absolute; inset: 0; z-index: -1; }
.hero-img { z-index: -2; }
.hero-img { inline-size: 100%; block-size: 100%; object-fit: cover; max-inline-size: none; }
/* Two shades, as in the mock: one across, darker behind the text, and one
   down, for the nav at the top and the stats at the bottom. */
.hero::before { content: ""; background: linear-gradient(to left, rgb(11 34 54 / .85), rgb(11 34 54 / .15)); }
.hero::after { content: ""; background: linear-gradient(to bottom, rgb(11 34 54 / .35), rgb(11 34 54 / 0) 25%, rgb(11 34 54 / 0) 70%, rgb(11 34 54 / .55)); }
@media (max-width: 860px) {
  .hero::before { background: linear-gradient(to bottom, rgb(11 34 54 / .35), rgb(11 34 54 / .1) 30%, rgb(11 34 54 / .55) 60%, rgb(11 34 54 / .92)); }
  .hero::after { content: none; }
}
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block: auto; }
.hero-copy { display: grid; gap: clamp(18px, calc(18px + 6 * ((100vw - 390px) / 1050)), 24px); justify-items: start; max-inline-size: 700px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: clamp(6px, calc(6px + 2 * ((100vw - 390px) / 1050)), 8px) clamp(12px, calc(12px + 2 * ((100vw - 390px) / 1050)), 14px);
  border-radius: var(--pill); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .35);
  font: 500 clamp(13px, calc(13px + 2 * ((100vw - 390px) / 1050)), 15px)/1.47 var(--text);
}
.hero-tag::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sun); }
.hero h1 {
  font: 900 clamp(40px, calc(40px + 28 * ((100vw - 390px) / 1050)), 68px)/1.08 var(--display);
  letter-spacing: 0; text-wrap: wrap;
}
.hero h1 em { font-style: normal; color: var(--sun); }
.hero h1 em.u { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .14em; }
.hero-lede {
  font-size: clamp(17px, calc(17px + 3 * ((100vw - 390px) / 1050)), 20px); line-height: 1.6;
  color: rgb(255 255 255 / .88);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .hero .btn-row { display: grid; gap: 18px; inline-size: 100%; }
  .hero .btn-row .btn { inline-size: 100%; }
  /* on a phone the copy sits on the stats, as in the mock */
  .hero-row { margin-block: auto 18px; }
}
.hero-card { flex: none; display: grid; place-items: center; inline-size: 358px; block-size: 362px; }
/* The box is the tilted card's bounding box, as Figma lays it out, so the
   card sits where the mock puts it rather than overhanging by 9px. */
.hero-card .card { inline-size: 340px; rotate: 3deg; }
@media (max-width: 1100px) { .hero-card { display: none; } }

.stats {
  display: inline-flex; align-self: flex-start; align-items: center;
  border-radius: clamp(18px, calc(18px + 2 * ((100vw - 390px) / 1050)), 20px);
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.stats > div { display: grid; padding: 16px 28px; }
.stats > div + div { border-inline-start: 1px solid rgb(255 255 255 / .25); }
.stats dd { order: -1; font: 900 30px/1.185 var(--display); }
.stats dt { font: 500 13px/1.47 var(--text); color: rgb(255 255 255 / .8); }
.stats .s { display: none; }
@media (max-width: 640px) {
  .stats { display: flex; align-self: stretch; }
  .stats > div { flex: 1; padding: 12px 8px; text-align: center; }
  .stats dd { font-size: 22px; }
  .stats dt { font-size: 12px; }
  .stats .l { display: none; }
  .stats .s { display: inline; }
}

/* ---------- deal card ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card-media {
  position: relative; isolation: isolate; block-size: 210px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden;
}
.card-media img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 400ms var(--ease); }
.card-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(11 34 54 / .15), rgb(11 34 54 / 0) 40%, rgb(11 34 54 / .8));
}
/* The top row wraps: the longer status pills ("נמצא שוב במחיר דומה") are wider
   than a 300–350px card next to the badge, and .card's overflow: hidden cut
   them off instead of letting them move down. */
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.card-city { font: 700 30px/1.185 var(--display); }
.card-country { font: 500 14px/1.47 var(--text); color: rgb(255 255 255 / .88); }
/* Body layout (Figma "Card layout options — 12.10", option א): dates and price
   share the first row, the median line and a full-width button each get their
   own. The mock's short "לפרטים" beside the price stopped fitting once the
   button and median line said what they mean, so the button left that row.
   Done in CSS over the markup pages.py already writes, by dissolving the
   price wrappers into the body grid; DOM order, and so reading order, stays
   dates, price, median, button. Flex rather than grid so the rare row that
   cannot hold both (a four-digit price beside "2 עצירות" and a range, in the
   home page's 300px phone card) drops the price to its own line instead of
   breaking the date range in the middle. */
.card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 18px 20px 20px; }
.card-dates { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; font: 500 14px/1.47 var(--text); color: var(--muted); white-space: nowrap; }
.card-dates .stops { font-size: 13px; color: var(--sea); }
/* Stops, range and price on one line need about 330px of body (measured
   ~172px + ~96px + gap). Narrower cards, i.e. the 300px phone row and the
   ~280px four-up row on desktop, stack stops over the range instead, which
   is about the price's own height, so the price keeps its place beside them. */
.card { container-type: inline-size; }
@container (max-width: 359px) {
  .card-dates { flex-direction: column; align-items: flex-start; gap: 0; }
  .card-dates > [aria-hidden] { display: none; }
}
.card-price, .card-price > div { display: contents; }
.card-price strong { flex: none; display: block; font: 900 36px/1.185 var(--display); color: var(--ink); }
.card-price small { flex-basis: 100%; display: block; font-size: 13px; line-height: 1.47; color: var(--muted); }
.card-go {
  flex-basis: 100%; margin-block-start: 4px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--pill); background: var(--sea-light); color: var(--sea);
  font: 700 14px/1.47 var(--text);
}
.card-go .icon { inline-size: 18px; block-size: 18px; transition: transform 200ms var(--ease); }
/* The whole card is the link; the stretched ::before keeps one tab stop. */
.card-link { color: inherit; text-decoration: none; }
.card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--sea); outline-offset: 3px; }
.card-link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .card:hover .card-media img { scale: 1.05; }
  .card:hover .card-go .icon { transform: translateX(-4px); }
}
.card--expired .card-media img { filter: grayscale(.85); }

/* phone: today's deals are a swipeable row that snaps */
@media (max-width: 640px) {
  .cards--row {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: 4px 24px;
    scrollbar-width: none;
  }
  .cards--row::-webkit-scrollbar { display: none; }
  .cards--row > .card { flex: 0 0 300px; scroll-snap-align: start; }
}

/* ---------- destination tiles ---------- */

/* Every destination, in a row that scrolls sideways: five to a 1200px row as
   in the mock, the rest a swipe or a scroll away. Adding a destination adds a
   tile and changes nothing else on the page. */
.tiles {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-block-end: 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.tiles > li { scroll-snap-align: start; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  block-size: 280px; padding: 18px; border-radius: 22px; color: #fff;
}
.tile img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(11 34 54 / 0) 50%, rgb(11 34 54 / .75)); }
.tile b { font: 700 24px/1.185 var(--display); }
.tile span { font: 500 13px/1.47 var(--text); color: rgb(255 255 255 / .85); }
/* Each tile opens its destination's page (/he/flights/<slug>/). The name is the
   link and its ::before covers the tile: one tab stop, as on the cards. The
   focus ring is drawn inside the tile, since the row scrolls and would clip it. */
.tile-link { color: inherit; text-decoration: none; }
.tile-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile:has(.tile-link:focus-visible) { outline: 3px solid #fff; outline-offset: -6px; }
.tile-link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .tile img { transition: scale 400ms var(--ease); }
  .tile:hover img { scale: 1.05; }
}
/* Arrows on the row, drawn by the browser itself (::scroll-button, Chrome and
   Edge 135+): no script, and keyboard and screen-reader support come with it.
   Only where a mouse can hover them: on a touch screen the row is swiped. They
   sit faint over the row's edges and come up when the pointer is over the row;
   each hides at its end. Where the selector is unknown (Safari, Firefox as of
   2026-10) none of this applies and the row keeps its scrollbar. */
@supports selector(::scroll-button(*)) {
  @media (hover: hover) and (pointer: fine) {
    .tiles { anchor-name: --tiles; scrollbar-width: none; }
    .tiles::scroll-button(*) {
      position: fixed; position-anchor: --tiles; position-visibility: anchors-visible;
      inset-block-start: anchor(center); translate: 0 -50%; z-index: 2;
      display: grid; place-items: center; inline-size: 48px; block-size: 48px;
      border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); color: var(--night);
      box-shadow: 0 8px 24px -6px rgb(11 34 54 / .35);
      font: 700 22px/1 var(--text); cursor: pointer;
      opacity: .45; transition: opacity 200ms var(--ease);
    }
    .tiles:hover::scroll-button(*),
    .tiles::scroll-button(*):focus-visible { opacity: 1; }
    .tiles::scroll-button(*):focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
    .tiles::scroll-button(*):disabled { opacity: 0; cursor: default; }
    /* In Hebrew the row starts on the right: the start button is the right one. */
    .tiles::scroll-button(inline-start) { content: "→" / "ליעדים הקודמים"; right: calc(anchor(right) + 12px); }
    .tiles::scroll-button(inline-end) { content: "←" / "ליעדים הבאים"; left: calc(anchor(left) + 12px); }
  }
}
@media (max-width: 1000px) { .tiles { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 640px) {
  .tiles { grid-auto-columns: calc((100% - 12px) / 2.3); gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .tile { block-size: 200px; }
  .tile b { font-size: 20px; }
}

/* ---------- how it works ---------- */

.how { background: var(--night); color: #fff; padding-block-end: clamp(56px, calc(56px + 64 * ((100vw - 390px) / 1050)), 120px); }
.how .sec-head { margin-block-end: clamp(20px, calc(20px + 44 * ((100vw - 390px) / 1050)), 64px); }
#destinations .sec-head { margin-block-end: clamp(16px, calc(16px + 24 * ((100vw - 390px) / 1050)), 40px); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.how-step {
  display: grid; align-content: start; gap: 16px; padding: 28px; border-radius: 24px;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .10);
}
.how-step header { display: flex; align-items: center; justify-content: space-between; }
.how-step header i {
  display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 16px;
  background: rgb(255 181 71 / .14); color: var(--sun);
}
.how-step header i svg { inline-size: 26px; block-size: 26px; }
.how-step header span { font: 900 40px/1 var(--display); color: rgb(255 255 255 / .12); }
.how-step h3 { font-size: 24px; }
.how-step p { font-size: 16px; line-height: 1.65; color: rgb(255 255 255 / .72); }
.how-path { display: block; inline-size: 100%; block-size: 40px; margin-block: 64px; color: var(--sun); }
.how-out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.how-out ul { display: contents; }
.how-out b { font-size: 15px; color: var(--sun); }
.how-out li {
  padding: 10px 16px; border-radius: var(--pill); border: 1px solid rgb(255 255 255 / .25);
  font: 500 14px/1.47 var(--text); color: rgb(255 255 255 / .85);
}
.how-out li::before { content: "\2715\00a0\00a0"; content: "\2715\00a0\00a0" / ""; }
.how-note { margin-block-start: 24px; max-inline-size: 760px; font-size: 14px; line-height: 1.65; color: rgb(255 255 255 / .6); }
/* phone: the same four steps as a timeline down a rail */
@media (max-width: 1000px) {
  .how-steps { grid-template-columns: 1fr; gap: 0; }
  .how-step {
    grid-template-columns: 1fr auto; gap: 6px 16px; padding: 0 0 28px;
    background: none; border: 0; position: relative;
  }
  .how-step header { grid-column: 2; grid-row: 1 / span 2; align-self: start; flex-direction: column; }
  .how-step header i { inline-size: 42px; block-size: 42px; border-radius: 14px; }
  .how-step header i svg { inline-size: 22px; block-size: 22px; }
  .how-step header span { display: none; }
  .how-step:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-end: 20px; inset-block: 48px 0;
    inline-size: 2px; background: rgb(255 181 71 / .35);
  }
  .how-step h3 { grid-column: 1; font-size: 20px; }
  .how-step p { grid-column: 1; font-size: 15px; }
  .how-path { display: none; }
  .how-out { margin-block-start: 8px; }
}

/* ---------- compare ---------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare > div {
  display: grid; align-content: start; gap: 14px;
  padding: clamp(22px, calc(22px + 14 * ((100vw - 390px) / 1050)), 36px);
  border-radius: clamp(22px, calc(22px + 6 * ((100vw - 390px) / 1050)), 28px);
  border: 1px dashed rgb(11 34 54 / .15);
}
.compare dt { font: 700 clamp(13px, calc(13px + 2 * ((100vw - 390px) / 1050)), 15px)/1.47 var(--text); color: var(--muted); }
.compare dd {
  font: 500 clamp(19px, calc(19px + 7 * ((100vw - 390px) / 1050)), 26px)/1.38 var(--display); color: var(--muted);
}
.compare .is-us { background: var(--surface); border: 2px solid var(--sea); box-shadow: 0 20px 40px -12px rgb(14 111 138 / .18); }
.compare .is-us dt { color: var(--sea); }
.compare .is-us dd { font-weight: 700; color: var(--night); }
.compare svg { inline-size: 100%; block-size: 70px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; gap: 16px; } .compare svg { display: none; } }

/* ---------- boxes: honesty, telegram ---------- */

.box {
  display: flex; align-items: center; gap: 32px;
  padding: clamp(24px, calc(24px + 20 * ((100vw - 390px) / 1050)), 44px) clamp(22px, calc(22px + 26 * ((100vw - 390px) / 1050)), 48px);
  border-radius: clamp(24px, calc(24px + 8 * ((100vw - 390px) / 1050)), 32px);
  background: var(--sea-light);
}
.box > div { display: grid; gap: 10px; flex: 1; }
.box h2 { font-size: clamp(24px, calc(24px + 10 * ((100vw - 390px) / 1050)), 34px); color: var(--night); }
.box p:not(.eyebrow) { font-size: clamp(16px, calc(16px + 2 * ((100vw - 390px) / 1050)), 18px); line-height: 1.65; color: var(--muted); }
.box .eyebrow { color: var(--sea); }
.box-icon { display: grid; place-items: center; inline-size: 96px; block-size: 96px; border-radius: 50%; background: var(--surface); color: var(--sea); flex: none; }
.box-icon svg { inline-size: 48px; block-size: 48px; }
@media (max-width: 640px) { .box-icon { display: none; } }

.tg {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: clamp(28px, calc(28px + 28 * ((100vw - 390px) / 1050)), 56px) clamp(24px, calc(24px + 32 * ((100vw - 390px) / 1050)), 56px);
  border-radius: clamp(28px, calc(28px + 8 * ((100vw - 390px) / 1050)), 36px);
  background: linear-gradient(to right, var(--coral-glow), var(--sun));
  color: var(--night);
}
.tg > div { display: grid; gap: 10px; }
.tg h2 { font: 900 clamp(28px, calc(28px + 12 * ((100vw - 390px) / 1050)), 40px)/1.185 var(--display); }
.tg p { max-inline-size: 560px; font-size: clamp(16px, calc(16px + 2 * ((100vw - 390px) / 1050)), 18px); line-height: 1.6; }
.tg-deco { position: absolute; inset-inline-end: 40px; inset-block-start: 10px; inline-size: 420px; block-size: 220px; color: #fff; opacity: .9; pointer-events: none; }
@media (max-width: 760px) { .tg { flex-direction: column; align-items: flex-start; gap: 18px; } .tg-deco { display: none; } }

/* ---------- footer ---------- */

.foot {
  display: grid; justify-items: start; gap: 20px;
  padding: clamp(40px, calc(40px + 16 * ((100vw - 390px) / 1050)), 56px) var(--gutter) 40px;
  background: var(--night); color: #fff;
}
.foot .logo { color: #fff; font-size: 20px; }
.foot .logo span span { color: rgb(255 255 255 / .7); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot nav a { display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -10px; font: 500 14px/1.47 var(--text); color: rgb(255 255 255 / .8); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: #fff; text-decoration: underline; } }
.foot p { max-inline-size: 1200px; font-size: 13px; line-height: 1.6; color: rgb(255 255 255 / .6); }
@media (max-width: 640px) { .foot nav { gap: 0 14px; } }

/* ---------- deal page ---------- */

.deal-hero { min-block-size: 640px; justify-content: flex-end; padding-block-end: 190px; }
.deal-hero::before { background: linear-gradient(to bottom, rgb(11 34 54 / .45), rgb(11 34 54 / .05) 30%, rgb(11 34 54 / .25) 65%, rgb(11 34 54 / .85)); }
.deal-hero::after { content: none; }
.deal-hero .hero-copy { gap: 14px; max-inline-size: none; }
.crumbs { display: flex; gap: 8px; font: 500 15px/1.47 var(--text); }
.crumbs a { color: rgb(255 255 255 / .75); text-decoration: none; }
.crumbs a::after { content: "/"; content: "/" / ""; margin-inline-start: 8px; color: rgb(255 255 255 / .5); }
.deal-hero h1 { font-size: clamp(38px, calc(38px + 38 * ((100vw - 390px) / 1050)), 76px); line-height: 1.05; }
.deal-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 18px/1.47 var(--text); }
.deal-meta li { display: inline-flex; align-items: center; gap: 8px; }
.deal-meta .icon { inline-size: 18px; block-size: 18px; }
.deal-published { font: 500 14px/1.47 var(--text); color: rgb(255 255 255 / .75); }
.credit { position: absolute; inset-block-end: 16px; inset-inline-end: var(--gutter); font-size: 12px; color: rgb(255 255 255 / .6); }
.credit a { color: inherit; }

.deal-body {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start;
  margin-block-start: -150px; padding-inline: var(--gutter); padding-block-end: 96px;
}
.deal-main { display: grid; gap: 24px; }
.deal-side { position: sticky; inset-block-start: 24px; display: grid; gap: 16px; }
.panel {
  display: grid; gap: 20px; padding: 36px; border-radius: 28px;
  background: var(--surface); box-shadow: 0 16px 40px -12px rgb(11 34 54 / .08);
}
.panel h2 { font-size: 28px; color: var(--night); }
.panel .eyebrow { color: var(--sea); }

.price-panel { padding: 32px; border: 1px solid rgb(207 74 35 / .25); }
.price-panel .eyebrow { color: var(--coral-ink); }
.price-line { display: flex; align-items: baseline; gap: 12px; }
.price-line strong { font: 900 80px/1 var(--display); color: var(--night); }
.price-line > span { font: 500 15px/1.47 var(--text); color: var(--muted); }
.price-asof { font: 500 14px/1.47 var(--text); color: var(--muted); }

/* The gauge: where the price sits between the cheapest tenth and the median.
   Positions come from the page as --at (share of the scale, from the start
   edge, so the cheap end is on the right in Hebrew). Decorative: the same
   three numbers are in the rows under it. */
.gauge { position: relative; block-size: 74px; }
.gauge-track {
  position: absolute; inset-inline: 0; inset-block-start: 30px; block-size: 10px; border-radius: var(--pill);
  background: linear-gradient(to left, var(--mint), #BFE7D6 28%, var(--border) 45%, var(--border));
}
.gauge-mark { position: absolute; inset-inline-start: var(--at); inset-block-start: 35px; translate: 50% -50%; }
.gauge-mark::before {
  content: ""; display: block; inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: var(--muted); border: 3px solid #fff; box-sizing: content-box;
}
.gauge-mark span { position: absolute; inset-block-end: 18px; inset-inline-start: 50%; translate: 50% 0; white-space: nowrap; font: 500 12px/1.47 var(--text); color: var(--muted); }
.gauge-mark--low::before { background: var(--mint); }
.gauge-mark--low span { inset-block: 18px auto; }
.gauge-mark--deal::before { inline-size: 16px; block-size: 16px; background: var(--coral-glow); box-shadow: 0 0 0 4px rgb(242 100 58 / .25); }
.gauge-mark--deal span { font-weight: 700; color: var(--coral-ink); }

.facts { display: grid; }
.facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-block-start: 1px solid var(--border); }
.facts dt { display: grid; font-weight: 700; font-size: 15px; line-height: 1.5; }
.facts dt small { font-weight: 400; font-size: 13px; color: var(--muted); }
.facts dd { font: 700 22px/1.185 var(--display); color: var(--night); }
.facts .is-key dd { color: var(--mint); }
.disclosure { font-size: 12px; line-height: 1.6; color: var(--muted); }

.status {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-radius: 20px;
  background: var(--mint-tint); border: 1px solid rgb(19 165 116 / .35); color: var(--mint-deep);
}
.status p { font-size: 14px; line-height: 1.5; opacity: .8; }
.status p:first-child { font-weight: 400; font-size: 16px; opacity: 1; }
.status p:first-child strong { font-weight: 700; }
.status > div { flex: 1; display: grid; gap: 2px; }
.status svg { inline-size: 30px; block-size: 30px; flex: none; }
.status--price_rose { background: #FFF3E8; border-color: rgb(207 74 35 / .35); color: #8A3412; }
.status--expired { background: #EFF1F3; border-color: rgb(94 107 117 / .35); color: var(--ink); }

.about h2 { font-size: 32px; }
.about p { font-size: 18px; line-height: 1.7; color: rgb(20 33 43 / .85); }
.about ul { display: flex; flex-wrap: wrap; gap: 10px; }
.about small { font-size: 12px; color: var(--muted); }

/* The deal page's flight times: one row per way, Tel Aviv on the side reading
   starts from both times. The markup keeps departure before landing (the
   order a screen reader should read them in), so the way back is the same row
   placed the other way round here, and the plane turns to the way it flies. */
.times-panel { gap: 16px; }
.leg { display: grid; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid var(--border); }
.times-panel h2 + .leg { padding-block-start: 0; border: 0; }
.leg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 15px/1.4 var(--text); }
.leg-dir { padding: 2px 10px; border-radius: 999px; background: var(--sea-light); color: var(--sea); font-weight: 700; font-size: 13px; }
.leg-airline { margin-inline-start: auto; color: var(--muted); font-size: 14px; }
.leg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.leg-end { display: grid; gap: 2px; justify-items: start; text-align: start; }
.leg--out .leg-to, .leg--back .leg-from { justify-items: end; text-align: end; }
.leg-from { order: 1; }
.leg-mid { order: 2; }
.leg-to { order: 3; }
.leg--back .leg-from { order: 3; }
.leg--back .leg-to { order: 1; }
.leg-time { font: 700 34px/1.1 var(--display); color: var(--night); }
.leg-days {
  display: inline-block; margin-inline: 6px; padding: 1px 6px; border-radius: 6px; vertical-align: top;
  background: rgb(255 181 71 / .3); color: var(--ink); font: 700 12px/1.4 var(--text);
}
.leg-place { font: 500 14px/1.4 var(--text); color: var(--muted); }
.leg-mid { display: grid; justify-items: center; gap: 6px; font: 500 13px/1.4 var(--text); color: var(--muted); text-align: center; }
.leg-line { display: flex; align-items: center; gap: 8px; inline-size: 100%; }
.leg-line::before, .leg-line::after { content: ""; flex: 1; block-size: 2px; border-radius: 1px; background: var(--border); }
.leg-jet { inline-size: 18px; block-size: 18px; color: var(--muted); }
/* The icon's nose points right: the way out flies toward the end of the line,
   the way back toward its start. */
[dir="rtl"] .leg--out .leg-jet, [dir="ltr"] .leg--back .leg-jet { scale: -1 1; }
.leg-stops { padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.leg-stops--direct { background: var(--mint-tint); color: var(--mint-deep); }
.leg-stops--stops { background: var(--coral-tint); color: var(--coral-ink); }
.times-note { font-size: 13px; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) {
  .leg-row { gap: 10px; }
  .leg-time { font-size: 27px; }
  .leg-place { font-size: 13px; }
}

.chart-panel p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mini-stats > div { display: grid; padding: 14px 16px; border-radius: 16px; background: var(--sand); }
.mini-stats dd { order: -1; font: 700 24px/1.185 var(--display); color: var(--night); }
.mini-stats dt { font: 500 13px/1.47 var(--text); color: var(--muted); }
.mini-stats .is-deal { background: var(--coral-tint); }
.mini-stats .is-deal dd { color: var(--coral-ink); }
.chart-note { font-size: 13px; color: var(--muted); }
/* How many recorded prices were this low, in words, before the chart: not every
   reader reads a scatter plot. Above .chart-panel p in specificity on purpose. */
.chart-panel .chart-rank {
  padding: 12px 16px; border-radius: 14px; background: var(--coral-tint);
  border-inline-start: 3px solid var(--coral-ink); font-weight: 500; color: var(--night);
}

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-grid > div { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 20px; background: var(--sand); }
.why-grid i { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; background: var(--surface); color: var(--coral-glow); }
.why-grid i svg { inline-size: 24px; block-size: 24px; }
.why-grid h3 { font-size: 19px; color: var(--night); }
.why-grid p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.why-rule { font-weight: 500; font-size: 15px; color: var(--sea); }

.share {
  display: flex; justify-content: center; padding: 14px; border-radius: 20px;
  border: 1px solid rgb(11 34 54 / .15); font-weight: 700; font-size: 15px; color: var(--night); text-decoration: none;
}

/* The chart: the same SVG from chart.py, in this design's colours. Time runs
   left to right on the axis, as on every chart. */
.chart { display: block; inline-size: 100%; block-size: auto; direction: ltr; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick { stroke: #A9B2B9; stroke-width: 1; }
.chart-label { fill: var(--muted); font-family: var(--text); font-size: 11px; }
.chart-year { font-size: 10px; }
/* 0.7 is the lowest opacity that keeps a lone dot at 3:1 against white (WCAG
   1.4.11); the dots are the data. */
.chart-dots { fill: none; stroke: var(--sea); stroke-width: 3; stroke-linecap: round; stroke-opacity: .7; }
.chart-median { stroke: var(--night); stroke-width: 2; stroke-dasharray: none; }
.chart-deal { fill: var(--coral-glow); stroke: #fff; stroke-width: 3; }
.chart-deal-label { fill: var(--coral-ink); font-family: var(--text); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block-start: 12px; font-size: 14px; color: var(--muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; flex: none; }
.key--dots { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--sea); opacity: .7; }
.key--median { inline-size: 20px; border-block-start: 2px solid var(--night); }
.key--deal { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--coral-glow); }
@media (max-width: 560px) {
  .chart-label { font-size: 15px; } .chart-year { font-size: 13px; } .chart-deal-label { font-size: 16px; }
}
@media (forced-colors: active) {
  .chart-dots { stroke: GrayText; stroke-opacity: 1; }
  .chart-median { stroke: CanvasText; }
  .chart-deal, .key--deal { fill: Highlight; background: Highlight; forced-color-adjust: none; }
  .chart-deal-label { fill: Highlight; stroke: Canvas; }
  .chart-label { fill: CanvasText; }
  .gauge { display: none; }
}

.more { padding-inline: var(--gutter); padding-block-end: 110px; }
.more h2 { margin-block-end: 32px; font-size: 36px; color: var(--night); }

/* phone: one column, and the booking button follows the reader down */
@media (max-width: 1000px) {
  .deal-body { grid-template-columns: 1fr; margin-block-start: -64px; gap: 16px; }
  .deal-side { position: static; order: -1; }
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .deal-hero { min-block-size: 520px; padding-block-end: 88px; }
  .deal-meta { font-size: 15px; gap: 4px 12px; }
  .deal-meta .icon { display: none; }
  .panel { padding: 22px; gap: 14px; border-radius: 24px; }
  .panel h2, .about h2 { font-size: 22px; }
  .about p { font-size: 16px; }
  .price-panel { padding: 22px; }
  .price-line strong { font-size: 56px; }
  .mini-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mini-stats > div:nth-child(2) { display: none; }   /* the median; the price panel lists it too */
  .mini-stats dd { font-size: 19px; }
  .why-grid > div { grid-template-columns: 1fr auto; padding: 0; background: none; }
  .why-grid i { grid-column: 2; grid-row: 1 / span 2; background: var(--sand); }
  .why-grid h3 { font-size: 16px; }
  .why-grid p { font-size: 14px; }
  .more { padding-block-end: 56px; }
  .more h2 { font-size: 24px; margin-block-end: 16px; }
}
.sticky-cta { display: none; }
@media (max-width: 640px) {
  .sticky-cta {
    position: sticky; inset-block-end: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-block-start: 16px; padding: 12px 16px 24px;
    background: rgb(255 255 255 / .94); box-shadow: 0 -6px 24px -6px rgb(11 34 54 / .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .sticky-cta strong { display: block; font: 900 26px/1.185 var(--display); color: var(--night); }
  /* It rises once the price panel and its own button have scrolled away, so
     the two are never on screen together. Without scroll-driven animations it
     simply stays, which is the safe side to fail on. */
  @supports (animation-timeline: scroll()) {
    .sticky-cta { animation: bar-in linear both; animation-timeline: scroll(root); animation-range: 900px 1000px; }
  }
  .sticky-cta small { font: 500 12px/1.47 var(--text); color: var(--muted); }
}
/* 320px: two things here were wider than the 288px a deal page has inside
   its gutters, and in RTL that scrolls the page sideways (scrollWidth 332).
   The three mini-stats cells cannot shrink below their content plus 16px
   padding a side (268px against the panel's 244px), and a 1fr track takes
   its content's minimum, so the chart panel pushed the whole .deal-body
   column out to 313px. The booking bar's nowrap button and the price beside
   it came to 316px. Tighter padding fits the cells; the bar's button gets a
   smaller font, and the price yields first (flex-basis 0) so the button stays
   on one line, which can still wrap rather than overflow if a price is long. */
@media (max-width: 360px) {
  .mini-stats > div { padding: 12px 10px; }
  .sticky-cta { gap: 8px; }
  .sticky-cta .btn { gap: 8px; padding-inline: 16px; font-size: 15px; white-space: normal; }
  .sticky-cta > div { flex: 1 1 0; }
}

/* ---------- deals index ---------- */

.list-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(88px, calc(88px + 56 * ((100vw - 390px) / 1050)), 144px) var(--gutter) clamp(32px, calc(32px + 40 * ((100vw - 390px) / 1050)), 72px);
  background: var(--night); color: #fff;
}
.list-head .collage { position: absolute; inset-inline-end: -40px; inset-block-start: 120px; z-index: -2; display: flex; gap: 16px; opacity: .35; }
.list-head .collage img { inline-size: 300px; block-size: 380px; object-fit: cover; border-radius: 24px; }
.list-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgb(11 34 54 / 1), rgb(11 34 54 / .92) 40%, rgb(11 34 54 / .2)); }
.list-head h1 { font: 900 clamp(40px, calc(40px + 32 * ((100vw - 390px) / 1050)), 72px)/1.1 var(--display); margin-block: 8px 16px; }
.list-head p { max-inline-size: 640px; font-size: clamp(15px, calc(15px + 4 * ((100vw - 390px) / 1050)), 19px); line-height: 1.6; color: rgb(255 255 255 / .8); }
.list-head .eyebrow { color: var(--sun); }
@media (max-width: 760px) { .list-head .collage { display: none; } }

/* Filters are radio buttons and :has(): no script. */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 40px 8px; }
.filters fieldset { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.filters legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.filters input { position: absolute; opacity: 0; }
.filters label {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 18px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--border); font: 500 15px/1.47 var(--text); cursor: pointer;
}
.filters input:checked + label { background: var(--night); border-color: var(--night); color: #fff; font-weight: 700; }
.filters input:focus-visible + label { outline: 3px solid var(--sea); outline-offset: 3px; }
main:has(#f-rt:checked) .card[data-trip="OW"],
main:has(#f-ow:checked) .card[data-trip="RT"] { display: none; }
@media (max-width: 640px) { .filters { padding-block: 20px 0; } .filters label { padding: 9px 16px; font-size: 14px; } }

.day { display: grid; gap: 28px; padding-block: 40px 80px; }
.day-head { display: flex; align-items: center; gap: 16px; }
.day-head h2 { font-size: clamp(20px, calc(20px + 8 * ((100vw - 390px) / 1050)), 28px); color: var(--night); white-space: nowrap; }
.day-head span { font: 500 15px/1.47 var(--text); color: var(--muted); white-space: nowrap; }
.day-head::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }
.cards--index { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
@media (max-width: 640px) { .cards--index { grid-template-columns: 1fr; gap: 16px; } .day { padding-block: 24px 48px; gap: 16px; } }

.archive-row {
  display: flex; align-items: center; gap: 20px; padding: 14px 14px 14px 24px; border-radius: 20px;
  background: var(--surface); text-decoration: none; color: inherit; opacity: .85;
}
.archive-row img { inline-size: 72px; block-size: 72px; border-radius: 14px; object-fit: cover; }
.archive-row > div { flex: 1; display: grid; }
.archive-row b { font: 700 19px/1.3 var(--display); color: var(--night); }
.archive-row small { font-size: 14px; color: var(--muted); }
.archive-row strong { font: 700 24px/1.185 var(--display); color: var(--muted); }
.archive-row a { color: inherit; text-decoration: none; }
.archive-row a::after { content: ""; position: absolute; inset: 0; }
.archive-row { position: relative; }
@media (hover: hover) and (pointer: fine) { .archive-row:hover { opacity: 1; } .archive-row:hover a { text-decoration: underline; } }
.archive { display: grid; gap: 20px; }
.deal-archive h3 { margin-block: 12px -8px; font-size: 17px; color: var(--muted); }
main:has(#f-rt:checked) .archive-row[data-trip="OW"],
main:has(#f-ow:checked) .archive-row[data-trip="RT"] { display: none; }
@media (max-width: 640px) { .archive-row { gap: 12px; padding: 12px; } .archive-row img { display: none; } .archive-row .pill { display: none; } }
.empty { padding: 28px; border-radius: 24px; background: var(--surface); font-size: 17px; color: var(--muted); }

/* ---------- destination pages ---------- */

/* /he/flights/<slug>/, generated by pricelog-scaner (pages.py, destination_page).
   The deal page's hero, without the overlap the deal body makes; then the prices
   collected for the place, one trip type at a time. The tabs are radio buttons
   and :has(), like the index filter: no script. */
.dest-hero { min-block-size: 520px; padding-block-end: 72px; }
.dest-prices { display: grid; gap: 24px; }
.dest-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.dest-tabs input { position: absolute; opacity: 0; }
.dest-tabs label {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 18px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--border); font: 500 15px/1.47 var(--text); cursor: pointer;
}
.dest-tabs input:checked + label { background: var(--night); border-color: var(--night); color: #fff; font-weight: 700; }
.dest-tabs input:focus-visible + label { outline: 3px solid var(--sea); outline-offset: 3px; }
.dest-prices:has(#dt-rt:checked) .dest-panel[data-trip="OW"],
.dest-prices:has(#dt-ow:checked) .dest-panel[data-trip="RT"] { display: none; }
/* Since the direct / with-stops views (scanner #50) a trip panel holds one or
   more .dest-view, each a chart and its numbers. The second selector keeps a
   page built before that laid out as it was, so this file can ship first. */
.dest-view,
.dest-panel:not(:has(> .dest-view)) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.dest-panel:has(> .dest-view) { display: grid; gap: 16px; }
.dest-panel > .empty { grid-column: 1 / -1; }
/* The stops views are one native dropdown, styled as a pill. CSS reads the
   selected option with :has(option:checked), so it needs no script either. */
.dest-stops { justify-self: start; position: relative; display: inline-flex; }
.dest-stops select {
  appearance: none; min-block-size: 40px; padding-block: 8px; padding-inline: 16px 40px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--night);
  font: 600 14px/1.47 var(--text); cursor: pointer;
}
.dest-stops::after {
  content: ""; position: absolute; inset-inline-end: 16px; inset-block-start: 50%; inline-size: 8px; block-size: 8px;
  border-right: 2px solid var(--night); border-bottom: 2px solid var(--night);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.dest-stops select:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
.dest-panel:has(.dest-stops option[value="all"]:checked) .dest-view:not([data-stops="all"]),
.dest-panel:has(.dest-stops option[value="direct"]:checked) .dest-view:not([data-stops="direct"]),
.dest-panel:has(.dest-stops option[value="stops"]:checked) .dest-view:not([data-stops="stops"]) { display: none; }
.chart-panel h3 { font: 700 26px/1.25 var(--display); color: var(--night); }
.dest-stats { gap: 6px; }
.dest-about { padding-block-start: 0; }
/* The index's day headings are a date and stay on one line; these are sentences. */
.dest-flights .day-head h2 { white-space: normal; }
.dest-about .about { max-inline-size: 820px; }
@media (max-width: 1000px) {
  .dest-view, .dest-panel:not(:has(> .dest-view)) { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .dest-hero { min-block-size: 420px; padding-block-end: 40px; }
  .dest-tabs label { padding: 9px 16px; font-size: 14px; }
  .chart-panel h3 { font-size: 19px; }
}

/* Questions and answers (pages.py, _dest_faq; Figma "Q&A — הצעה 21.10"). Each
   question is a <details>, so it opens with no script, and every answer is in
   the HTML open or closed. The chevron turns on [open] with no transition. On a
   wide screen the heading and its note sit beside the list; on a narrow one,
   above and below it. */
.dest-faq {
  display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head list" "meta list"; gap: 16px 32px; align-items: start;
  padding-block-start: clamp(24px, calc(24px + 32 * ((100vw - 390px) / 1050)), 56px);
}
.faq-head { grid-area: head; display: grid; gap: 10px; }
.faq-head .eyebrow { color: var(--sea); }
.faq-head .sec-title { font-size: clamp(26px, calc(26px + 6 * ((100vw - 390px) / 1050)), 32px); color: var(--night); }
.faq-sub { font-size: 16px; line-height: 1.6; color: var(--muted); }
.faq-meta { grid-area: meta; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.faq-meta .price-asof { font-size: 12px; font-weight: 400; }
.faq-list { grid-area: list; gap: 0; padding-block: 8px; }
.faq + .faq { border-block-start: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; gap: 16px; padding-block: 22px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { flex: 1; font: 700 20px/1.3 var(--display); color: var(--night); }
.faq-chev { inline-size: 32px; block-size: 32px; padding: 7px; border-radius: 50%; background: var(--sea-light); color: var(--sea); }
.faq[open] .faq-chev { rotate: 180deg; }
.faq-a { display: grid; gap: 12px; padding-block-end: 22px; font-size: 17px; line-height: 1.7; color: rgb(20 33 43 / .85); }
.faq-months {
  inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; font-size: 15px; line-height: 1.47;
}
.faq-months th, .faq-months td { padding: 12px 16px; text-align: start; font-weight: 400; }
.faq-months thead th { background: var(--sand); font: 700 13px/1.47 var(--text); color: var(--muted); }
.faq-months tbody > tr > * { border-block-start: 1px solid var(--border); }
.faq-months tbody th { font-weight: 500; color: var(--night); }
.faq-months tr > :nth-child(2) { inline-size: 180px; }
.faq-months tr > :nth-child(3) { inline-size: 100px; }
.faq-months td:nth-child(2) { font: 700 18px/1.3 var(--display); color: var(--night); }
.faq-months td:nth-child(3) { color: var(--muted); }
.faq-months .is-low > * { background: var(--sea-light); }
.faq-months .is-low td:nth-child(2) { font-weight: 900; }
.faq-tag {
  display: table; margin-block-start: 4px; padding: 3px 10px; border-radius: var(--pill);
  background: var(--surface); font: 500 12px/1.47 var(--text); color: var(--sea);
}
.faq-foot { font-size: 13px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1000px) {
  .dest-faq { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "list" "meta"; row-gap: 20px; }
}
@media (max-width: 640px) {
  .faq-list { padding: 4px 20px; }
  .faq summary { gap: 12px; padding-block: 18px; }
  .faq summary h3 { font-size: 17px; }
  .faq-a { padding-block-end: 18px; font-size: 16px; }
  .faq-months { border-radius: 14px; font-size: 14px; }
  .faq-months th, .faq-months td { padding: 11px 12px; }
  .faq-months thead th { font-size: 12px; }
  .faq-months tr > :nth-child(2) { inline-size: 84px; }
  .faq-months tr > :nth-child(3) { inline-size: 52px; }
  .faq-months td:nth-child(2) { font-size: 16px; }
}

/* ---------- documents: privacy, accessibility, credits ---------- */

.doc-head { padding: clamp(96px, calc(96px + 48 * ((100vw - 390px) / 1050)), 144px) var(--gutter) clamp(32px, calc(32px + 24 * ((100vw - 390px) / 1050)), 56px); background: var(--night); color: #fff; }
.doc-head h1 { font: 900 clamp(34px, calc(34px + 22 * ((100vw - 390px) / 1050)), 56px)/1.1 var(--display); margin-block: 8px 12px; }
.doc-head p { max-inline-size: 760px; font-size: 18px; color: rgb(255 255 255 / .8); }
.doc-head .eyebrow { color: var(--sun); }
.doc { padding: clamp(32px, calc(32px + 32 * ((100vw - 390px) / 1050)), 64px) var(--gutter) 96px; }
.doc > div { max-inline-size: 820px; padding: clamp(22px, calc(22px + 26 * ((100vw - 390px) / 1050)), 48px); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-card); }
.doc h2 { font-size: clamp(20px, calc(20px + 6 * ((100vw - 390px) / 1050)), 26px); color: var(--night); margin-block: 40px 12px; }
.doc h2:first-child { margin-block-start: 0; }
.doc p, .doc li { color: rgb(20 33 43 / .85); line-height: 1.75; }
.doc p + p { margin-block-start: 12px; }
.doc ul { padding-inline-start: 1.3em; list-style: disc; margin-block: 12px 0; }
.doc li + li { margin-block-start: 6px; }
.doc a { color: var(--sea); }
.doc .updated { font-size: 14px; color: var(--muted); margin-block-start: 32px; }

/* ---------- flight search: /he/search/ ---------- */

/* The form and the results are drawn by Travelpayouts' White Label inside
   these two boxes; the boxes are ours, what is inside them is not. */
.search { display: grid; gap: 24px; padding: clamp(24px, calc(24px + 24 * ((100vw - 390px) / 1050)), 48px) var(--gutter) 96px; }
.search-form { padding: clamp(14px, calc(14px + 10 * ((100vw - 390px) / 1050)), 24px); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); }
.search-form:focus { outline: none; }
/* Until a click, the search is this gate: what loading it means, and the
   button that loads it (js/search.js). Without JavaScript the button stays
   hidden and the <noscript> line says why. */
.search-gate { display: grid; gap: 14px; justify-items: start; line-height: 1.7; color: rgb(20 33 43 / .85); }
.search-gate a { color: var(--sea); }
.search > .search-gate { padding: 22px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); }
/* The gate, its button and the boxes all set their own display, which would
   beat the hidden attribute that js/search.js toggles. */
.search-gate[hidden], .search-gate [hidden], [data-search-box][hidden] { display: none; }

/* The median panel (js/search-median.js): PriceLog's own numbers beside a
   search, on the light sea of the mock so it never reads as one of the
   search's results. Built by script and hidden until it has checked numbers. */
.median {
  display: grid; gap: 12px; justify-items: start; padding: 22px; border-radius: 24px;
  background: var(--sea-light); color: var(--ink);
}
.median[hidden] { display: none; }
.median-tag { padding: 4px 12px; border-radius: var(--pill); background: var(--surface); font: 500 13px/1.47 var(--text); color: var(--sea); }
.median h2 { font-size: 20px; color: var(--night); }
.median-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.median-line strong { font: 900 40px/1.1 var(--display); color: var(--night); }
.median-line > span { font: 500 15px/1.47 var(--text); color: var(--muted); }
.median-note { font-size: 14px; line-height: 1.6; color: rgb(20 33 43 / .85); }
.median-low {
  display: grid; gap: 2px; justify-self: stretch; padding: 12px 16px; border-radius: 16px;
  background: var(--mint-tint); color: var(--mint-deep);
}
.median-low b { font-size: 16px; }
.median-low small { font-size: 13px; }
.median-link { font-weight: 700; color: var(--sea); }

/* The home page's search is a banner under the heading, at every width. As a
   440px card beside the heading it pushed the heading to three lines and read
   as an extra; given the row's full width, the White Label lays its fields out
   in one line by itself (it sizes to its container, not to the window). */
.hero-search { flex: none; display: grid; gap: 12px; padding: 18px 16px; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); }
.hero-search h2 { font: 700 20px/1.3 var(--display); color: var(--ink); }
.hero-search .search-gate { max-inline-size: 70ch; }
/* Stacked, the banner is the row's last thing, and without the bottom margin
   it sits on the stats: only phones (≤640px) had one for the row. */
.hero-row:has(.hero-search) { flex-direction: column; align-items: stretch; gap: 32px; margin-block: auto 24px; }
.hero-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; text-decoration: none; }
.hero-more .icon { inline-size: 20px; block-size: 20px; }
@media (max-width: 640px) {
  .hero-search .search-gate .btn { inline-size: 100%; }
}
.credits { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.credits th, .credits td { padding: 10px 8px; border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; }
.credits th { font-weight: 700; color: var(--muted); }
/* A Commons filename is one word as far as line breaking goes, and
   KeizersgrachtReguliersgrachtAmsterdam.jpg alone is 279px; a table cell
   never goes narrower than its longest word, so at 320px with a classic
   scrollbar the table pushed the page 13px sideways. `anywhere` (unlike
   break-word) also lowers the cell's minimum width, which is what a table
   sizes from; it only breaks a word that would not fit anyway. */
.credits td { overflow-wrap: anywhere; }
@media (max-width: 640px) { .credits thead { display: none; } .credits tr { display: grid; padding-block: 10px; border-block-end: 1px solid var(--border); } .credits td { padding: 2px 0; border: 0; } }

/* ---------- motion ----------
   CSS only. Nothing loops and nothing runs longer than five seconds (WCAG
   2.2.2); what moves on load moves once. Scroll-linked motion follows the
   reader's own scrolling. All of it is off under prefers-reduced-motion, and
   a browser without a feature shows the end state. */

@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 1.2s var(--ease) both; }
  .hero h1 .w { display: inline-block; animation: rise 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .hero-card .card { animation: card-in 700ms 200ms var(--ease) both; }
  .card, .tile, .how-step, .panel, .compare > div, .box, .tg {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  /* A panel can be taller than the screen (the price panel on an English deal
     page is, at 900px), and then 35% of its entry never happens while it is in
     view: it stayed half faded over the photo. A fixed distance ends on any. */
  .panel { animation-range: entry 0% entry 120px; }
  .how-path path { stroke-dasharray: 2 10; }
  .gauge-mark { animation: slide 700ms 300ms var(--ease) both; }
  .gauge-mark--deal::before { animation: pulse 900ms 900ms var(--ease) 1 both; }
  .count { animation: count 900ms 200ms cubic-bezier(.1, .8, .3, 1) both; }

  @view-transition { navigation: auto; }
}
@keyframes bar-in { from { translate: 0 110%; visibility: hidden; } to { translate: 0 0; visibility: visible; } }
@keyframes settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes card-in { from { opacity: 0; translate: 0 40px; rotate: 0deg; } to { opacity: 1; translate: 0 0; rotate: 3deg; } }
@keyframes slide { from { inset-inline-start: 0; opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(242 100 58 / .5); } 100% { box-shadow: 0 0 0 4px rgb(242 100 58 / .25); } }

/* The price counts up from zero. The digits are drawn by counter(), which
   needs an integer, so the page passes it as --to; the real price is in the
   text for readers and search, and the drawn one is aria-hidden. */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.count { --n: var(--to); counter-reset: n var(--n); }
.count::after { content: counter(n); }
@keyframes count { from { --n: 0; } }

/* The bars and dots that only an animation would hide. */
@supports not (animation-timeline: view()) {
  .card, .tile, .how-step, .panel, .compare > div, .box, .tg { animation: none; }
}

/* ============================================================================
   English pages, left to right (/en/, html dir="ltr"). The sheet is logical
   throughout, but four things cannot be: a gradient's direction, a translate
   that centers a gauge mark, the arrow's drawing, and the scroll buttons' own
   arrows and labels. Each is turned here, and nothing else changes.
   ========================================================================= */
[dir="ltr"] .hero::before { background: linear-gradient(to right, rgb(11 34 54 / .85), rgb(11 34 54 / .15)); }
[dir="ltr"] .list-head::after { background: linear-gradient(to right, rgb(11 34 54 / 1), rgb(11 34 54 / .92) 40%, rgb(11 34 54 / .2)); }
/* The cheap end is the start edge: the left in English. */
[dir="ltr"] .gauge-track { background: linear-gradient(to right, var(--mint), #BFE7D6 28%, var(--border) 45%, var(--border)); }
[dir="ltr"] .gauge-mark { translate: -50% -50%; }
[dir="ltr"] .gauge-mark span { translate: -50% 0; }
/* The arrow is drawn pointing left, which is "forward" in Hebrew. Mirrored with
   `scale`, which applies outside `transform`, so the hover nudge of
   translateX(-4px) moves it forward here too. */
[dir="ltr"] svg:has(> use[href="#i-arrow"]) { scale: -1 1; }
@supports selector(::scroll-button(*)) {
  @media (hover: hover) and (pointer: fine) {
    [dir="ltr"] .tiles::scroll-button(inline-start) { content: "←" / "Previous destinations"; right: auto; left: calc(anchor(left) + 12px); }
    [dir="ltr"] .tiles::scroll-button(inline-end) { content: "→" / "Next destinations"; left: auto; right: calc(anchor(right) + 12px); }
  }
}