/* ---------------------------------------------------------------------------
   Karni Tchelet - showroom clearance landing page.

   The design is a 1440px-wide Adobe XD artboard. Every length below is written
   as `calc(<design px> * var(--u))`, so the numbers in this file are the numbers
   in the design file and the whole page scales as one piece.
   --------------------------------------------------------------------------- */

:root {
  --u: min(1.3333px, 100vw / 1440);   /* 1 design pixel; exact at 1440 and 1920 */
  --cyan: #00aeef;
  --cyan-rule: #00b8f1;
  --ink: #2e2e2e;
  --ink-soft: #383838;
  --dark: #2a2a2a;
  --grey: #f1f1f1;
  --wa: #62ca6e;                      /* the green the artboard uses for WhatsApp */
  --wa-dark: #4fb85b;
  --alef-lh: 1.3618;                  /* Alef hhea ascent+descent, so a line box == the design's text box */
  --mont-lh: 1.219;                   /* same, for Montserrat */
}

/* --- fonts ---------------------------------------------------------------- */
@font-face { font-family: Alef; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/Alef-400-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Alef; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/Alef-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Alef; font-weight: 700; font-style: normal; font-display: swap;
  src: url(../fonts/Alef-700-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Alef; font-weight: 700; font-style: normal; font-display: swap;
  src: url(../fonts/Alef-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url(../fonts/Montserrat-var-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url(../fonts/Montserrat-var-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0 auto;
  max-width: calc(1440 * var(--u));
  background: #fff;
  color: var(--ink);
  font-family: Alef, 'Segoe UI', Arial, sans-serif;
  line-height: var(--alef-lh);
  overflow-x: hidden;
}

img, svg, picture { display: block; }
a { color: inherit; }

/* Headings that exist for structure and search engines, not for the artboard. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* =========================================================================== */
/* Hero                                                                        */
/* =========================================================================== */
.hero {
  position: relative;
  height: calc(900 * var(--u));
  overflow: hidden;
}
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: center; }

.hero > :not(.hero__bg) { position: absolute; margin: 0; white-space: nowrap; }
/* Only a grouping box on mobile - must out-specify the rule above. */
.hero > .hero__rate { position: static; }
.hero__rate > * { position: absolute; margin: 0; white-space: nowrap; }

.hero__logo  { top: calc(29 * var(--u));    right: calc(66 * var(--u));    width: calc(270.4 * var(--u)); color: #212121; }
.hero__logo svg { width: 100%; height: auto; }

.hero__kicker { top: calc(163.7 * var(--u)); right: calc(44.6 * var(--u));
                font-size: calc(50 * var(--u)); letter-spacing: calc(12 * var(--u)); color: #0f0f0f; }
.hero__upto   { top: calc(241.7 * var(--u)); right: calc(55.8 * var(--u));
                font-size: calc(46 * var(--u)); font-weight: 700; letter-spacing: calc(2.27 * var(--u)); }
.hero__pct    { top: calc(251.6 * var(--u)); left: calc(962 * var(--u));
                width: calc(372.9 * var(--u)); height: calc(280.1 * var(--u)); }
.hero__off    { top: calc(452.2 * var(--u)); right: calc(104.7 * var(--u));
                font-size: calc(48 * var(--u)); font-weight: 700; letter-spacing: calc(2.41 * var(--u)); }

.hero__title { position: static; font-size: calc(87 * var(--u)); font-weight: 700; }
.hero__title span,
.hero__sub span { position: absolute; display: block; white-space: nowrap; }
.hero__title span:first-child { top: calc(510.2 * var(--u)); right: calc(60.65 * var(--u)); letter-spacing: calc(4.75 * var(--u)); }
.hero__title span:last-child  { top: calc(580.2 * var(--u)); right: calc(55 * var(--u)); letter-spacing: calc(5.2 * var(--u)); }

.hero__sub { position: static; font-size: calc(49 * var(--u)); letter-spacing: calc(9.8 * var(--u)); }
.hero__sub span:first-child { top: calc(718.5 * var(--u)); right: calc(58 * var(--u)); }
.hero__sub span:last-child  { top: calc(771.5 * var(--u)); right: calc(57 * var(--u)); }

/* =========================================================================== */
/* How it works                                                                */
/* =========================================================================== */
.steps { position: relative; height: calc(990 * var(--u)); background: #fff; --lead-s: .7; }
.steps__list { margin: 0; padding: 0; list-style: none; }
.step { position: static; }
.step > * { position: absolute; margin: 0; }

.step__disc {
  left: calc(355 * var(--u));
  width: calc(226.7 * var(--u)); height: calc(226.7 * var(--u));
  border-radius: 50%; background: var(--cyan);
}
.step__num   { left: calc(446 * var(--u)); width: calc(650.2 * var(--u)); height: auto; }
.step__title { left: calc(596.8 * var(--u)); font-size: calc(40 * var(--u)); font-weight: 700; color: var(--ink);
               letter-spacing: calc(-1.53 * var(--u)); }
.step__text  { left: calc(596.8 * var(--u)); font-size: calc(29 * var(--u)); color: var(--ink-soft);
               line-height: calc(35 * var(--u)); letter-spacing: calc(-0.4 * var(--u)); }
.step__text span { display: block; }

.step--1 .step__disc { top: calc(60 * var(--u)); }
.step--2 .step__disc { top: calc(322.4 * var(--u)); }
.step--3 .step__disc { top: calc(584.9 * var(--u)); }
.step--1 .step__num  { top: calc(98.8 * var(--u)); }
.step--2 .step__num  { top: calc(369.5 * var(--u)); }
.step--3 .step__num  { top: calc(639.5 * var(--u)); }
.step--1 .step__title { top: calc(87.2 * var(--u)); }
.step--2 .step__title { top: calc(361.3 * var(--u)); }
.step--3 .step__title { top: calc(632.9 * var(--u)); }
.step--2 .step__text  { top: calc(416.05 * var(--u)); }

/* The same button as above the footer, under the third step, so it is in reach
   before the catalogue starts. */
.steps .wa--steps { position: absolute; top: calc(830 * var(--u)); right: auto; left: calc(596.8 * var(--u)); }

/* =========================================================================== */
/* Product grid                                                                */
/* =========================================================================== */
.catalog { background: var(--grey); padding: calc(91 * var(--u)) 0 calc(122 * var(--u)); }
.catalog__empty { margin: 0 auto; max-width: calc(800 * var(--u)); text-align: center;
                  font-size: calc(30 * var(--u)); color: var(--ink-soft); }

/* Above the lead band, and so above the dolly leaning up out of it. The design
   never has to think about this - it leaves the slots the dolly reaches into
   empty - but a packed grid puts a product there, and a cardboard box must not
   be in front of one. The dolly still crosses the grey ground behind them. */
.grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, calc(304 * var(--u)));
  gap: calc(40 * var(--u));
  justify-content: center;
}

/* A real link, so the card is crawlable and opens in a new tab on demand; the
   script turns the click into the pop-up. */
.card {
  position: relative;
  display: block;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: initial;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  width: calc(304 * var(--u));
  height: calc(291 * var(--u));
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .09);
  font-family: Montserrat, Alef, Arial, sans-serif;
  color: var(--ink-soft);
}

/* Boxed to the card so the lines inside keep resolving their `top` against the
   same rectangle, while the wrapper alone is what moves. */
.card__meta { position: absolute; inset: 0; pointer-events: none; }

/* A wash in the caption's own colour, under the caption only. The artboard has
   none - it is a mockup, read at full size on a desk - but the same tiles on a
   phone in daylight are a different proposition, and on a handful of photos the
   designer's white lands on a pale wall. --scrim is how much of it there is;
   at 0 the card is the artboard exactly. */
.card__meta::before {
  --scrim: .6;
  content: "";
  position: absolute;
  inset: calc(150 * var(--u)) 0 0 0;
  background: linear-gradient(to top,
              rgb(255 255 255 / var(--scrim)) 42%, rgb(255 255 255 / 0));
}
.card--dark { color: #fff; }
.card--dark .card__meta::before {
  --scrim: .45;
  background: linear-gradient(to top, rgb(0 0 0 / var(--scrim)) 42%, rgb(0 0 0 / 0));
}

/* The photo fills the card, as the artboard has it, so a product shot in a room
   reads as one picture rather than as a grey square floating on white.

   That puts the caption and the maker's mark on the photograph, so each product
   carries the colour its own needs - measured, when the photo is taken in, over
   the rectangle each actually covers. The gradient gives the words a ground:
   over a product cut out on white it is white on white and invisible, and over
   a lit room it does the work. */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The maker's mark, lifted out of the tile so every card hangs it off the same
   edge. `--w` carries the mark's own width from the artboard, per product, so a
   wide wordmark stays wide and a small monogram stays small; --brand-s takes
   them all down together, the artboard drawing them larger than the card needs. */
.card__brand {
  --brand-s: .65;
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(10 * var(--u));
  width: calc(var(--w, 72) * var(--brand-s) * var(--u));
  height: auto;
  pointer-events: none;
}
/* An SVG loaded through <img> is its own document: a `color` set out here never
   reaches the `currentColor` inside it, and the mark comes out its default
   black. Repainting it is what works - to black first, then inverted. */
.card--mark-light .card__brand { filter: brightness(0) invert(1); }

.card__name, .card__sku, .card__note, .card__old, .card__new {
  position: absolute;
  left: calc(12.1 * var(--u));
  margin: 0;                     /* .card__name is an <h3>: its own margin would shift `top` */
  font-weight: inherit;
  direction: ltr;
  line-height: var(--mont-lh);
  white-space: nowrap;
}
.card__name { top: calc(187.61 * var(--u)); font-size: calc(19 * var(--u)); }
.card__sku  { top: calc(211.41 * var(--u)); font-size: calc(19 * var(--u)); }
/* The designer's own line takes the SKU's slot and lifts the two lines above it
   by one, leaving the prices where they always are. */
.card__note { top: calc(211.41 * var(--u)); font-size: calc(19 * var(--u)); direction: rtl; }
.card--noted .card__name { top: calc(164.61 * var(--u)); }
.card--noted .card__sku  { top: calc(188.41 * var(--u)); }
.card__old  { top: calc(231.41 * var(--u)); font-size: calc(19 * var(--u)); }
.card__new  { top: calc(251.4 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 600; }
.card__old i { font-style: normal; font-size: calc(14 * var(--u)); }
.card__new i { font-style: normal; font-size: calc(16 * var(--u)); }

/* The struck-through "before" price: one fixed red stroke, as in the design. */
.card__old s {
  position: absolute;
  left: calc(12.83 * var(--u));
  top: calc(8.05 * var(--u));
  width: calc(48.65 * var(--u));
  height: calc(12.12 * var(--u));
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.65 12.12'%3E%3Cpath d='M48.65 0 0 12.12' stroke='%23ff0000' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* =========================================================================== */
/* Lead prompt                                                                 */
/* =========================================================================== */
/* The artboard sets this band's type and button a good deal larger than they
   need to be on a real screen; --lead-s takes all of it down together, and the
   three `top`s below are the artboard's spacing scaled by the same amount and
   re-centred in the band, so shrinking the type does not leave a hole under it. */
.lead { --lead-s: .7;
        position: relative; z-index: 2; height: calc(440.3 * var(--u)); background: #fff; }
.lead > :not(.lead__dolly) { position: absolute; margin: 0; white-space: nowrap; }

/* The photo carries its own backdrop, matched to the three bands it crosses. */
.lead__dolly { position: absolute; z-index: 3; pointer-events: none;
               left: calc(55 * var(--u)); top: calc(-149 * var(--u));
               width: calc(375 * var(--u)); height: calc(647 * var(--u)); }
.lead__title { top: calc(111.4 * var(--u)); right: calc(80.6 * var(--u));
               font-size: calc(71 * var(--lead-s) * var(--u)); font-weight: 700; color: var(--cyan); }
.lead__sub   { top: calc(173.6 * var(--u)); right: calc(82.3 * var(--u));
               font-size: calc(43 * var(--lead-s) * var(--u)); color: #080808; }

/* =========================================================================== */
/* Footer: brand and contact                                                   */
/* =========================================================================== */
.foot { position: relative; z-index: 1; height: calc(293.4 * var(--u)); background: var(--dark); color: #fff; }

.foot__brand { position: absolute; top: calc(126.9 * var(--u)); left: calc(56.1 * var(--u));
               width: calc(316.1 * var(--u)); color: #fff; }
.foot__brand svg { width: 100%; height: auto; }

/* The artboard sets this 51 from the edge, having no floating button to think
   about. Ours lands in that corner at the foot of the page, so the contact is
   held clear of it - a fixed distance, because the button is a fixed size and a
   scaling one would run back under it on a narrow desktop. */
.foot__contact { position: absolute; top: calc(137.5 * var(--u));
                 right: max(calc(51 * var(--u)), 128px);
                 font-style: normal; font-size: calc(33 * var(--u)); text-align: right; }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { text-decoration: underline; }
.foot__contact span { display: block; }

/* Along the bottom edge, in 40 added to the artboard's footer so it clears the
   brand and the contact above it. */
.foot__terms { position: absolute; bottom: calc(18 * var(--u)); left: 0; right: 0; margin: 0;
               text-align: center; font-size: calc(15 * var(--u)); color: #a7aeb4; }

/* =========================================================================== */
/* Product card: the affordance that it opens a pop-up                         */
/* =========================================================================== */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover, .card:focus-visible {
  box-shadow: 0 calc(7 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .15);
  transform: translateY(calc(-2 * var(--u)));
}
.card:focus-visible { outline: calc(3 * var(--u)) solid var(--cyan); outline-offset: calc(2 * var(--u)); }

/* A cyan disc with the page's own chevron - the same motif as the numbered
   step markers - in the one corner the photo's brand mark and the caption
   both leave free. */
.card__go {
  position: absolute;
  right: calc(15 * var(--u));
  bottom: calc(15 * var(--u));
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.card__go svg {
  width: calc(15 * var(--u));
  height: auto;
  rotate: 90deg;               /* the chevron is drawn pointing down */
}
.card:hover .card__go,
.card:focus-visible .card__go { opacity: 1; transform: scale(1); }

/* The disc is a hover affordance and nothing more - the whole card is the tap
   target - so on a touch screen, where there is no hover, it simply stays out
   of the photograph rather than sitting on every card at once. */

@media (prefers-reduced-motion: reduce) {
  .card, .card__go { transition-duration: .01ms; }
  .card:hover, .card:focus-visible { transform: none; }
}

/* =========================================================================== */
/* WhatsApp                                                                    */
/* =========================================================================== */
/* One button in three sizes: the call to action above the footer, the one
   inside the pop-up, and the bubble that follows the page down. */
.wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wa:hover { background: var(--wa-dark); }
.wa:active { transform: translateY(calc(1 * var(--u))); }
.wa__label { white-space: nowrap; }   /* a button label never reads as two lines */
.wa__arrow { direction: ltr; unicode-bidi: isolate; }
/* The artboard sets the mark in white straight onto the green, no disc behind. */
.wa__mark { display: grid; place-items: center; }
.wa__mark svg { width: 100%; height: auto; }

/* Above the footer, sized to the artboard. */
.wa--cta {
  top: calc(255 * var(--u)); right: calc(67 * var(--u));
  width: calc(521.6 * var(--lead-s) * var(--u)); height: calc(105.6 * var(--lead-s) * var(--u));
  /* Mark hard against one end, label against the other, as the artboard sets
     them; the artboard also tracks this one line out by 75/1000. */
  justify-content: space-between;
  padding: 0 calc(16.4 * var(--lead-s) * var(--u)) 0 calc(25 * var(--lead-s) * var(--u));
  font: 700 calc(45 * var(--lead-s) * var(--u)) / 1 Alef, Arial, sans-serif;
  letter-spacing: .075em;
}
.wa--cta .wa__mark { width: calc(82.6 * var(--lead-s) * var(--u));
                     height: calc(82.6 * var(--lead-s) * var(--u)); }

/* Inside the pop-up. */
.wa--pm {
  width: 100%;
  height: calc(64 * var(--u));
  gap: calc(14 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(20 * var(--u));
  font: 700 calc(24 * var(--u)) / 1 Alef, Arial, sans-serif;
}
.wa--pm .wa__mark { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }

/* And the bubble, which the artboard draws once but a page carries with it. */
/* The artboard draws this one at 129, which on a wide screen scales up into a
   bubble that shouts over the page. It is a fixed affordance rather than part
   of the artboard's flow, so it keeps one size at every width. */
.wa--float {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  color: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}

/* The pop-up has a WhatsApp button of its own; two would be one too many. */
.is-locked .wa--float { display: none; }
.wa--float svg { width: 64%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .wa { transition-duration: .01ms; }
  .wa:active { transform: none; }
}

/* =========================================================================== */
/* Product pop-up                                                              */
/* =========================================================================== */
html.is-locked, html.is-locked body { overflow: hidden; }

.pm {
  width: calc(1080 * var(--u));
  max-width: calc(100vw - 40px);
  /* 520 x 497.6 is the product tile's own 304:291. Matching it means the photo
     fills its half without being cropped, so the window shows what the card
     showed - including the corner the maker's mark was measured against. */
  height: calc(497.6 * var(--u));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--ink);
  overflow: visible;
  box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, .35);
}
.pm[open] { display: flex; flex-direction: row-reverse; }
.pm::backdrop { background: rgba(20, 22, 24, .62); }

.pm__x {
  position: absolute; left: 0; top: calc(-54 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border: 0; background: none; color: #fff; cursor: pointer;
  font: 400 calc(40 * var(--u)) / 1 Alef, Arial, sans-serif;
}
.pm__x:hover { color: var(--cyan); }
.pm__x:focus-visible { outline: calc(2 * var(--u)) solid var(--cyan); outline-offset: calc(2 * var(--u)); }

/* The photo fills its half of the window, as it fills the card, so the maker's
   mark sits on the picture rather than floating in a white band above it. */
.pm__media {
  position: relative;
  flex: 0 0 calc(520 * var(--u));
  overflow: hidden;
  background: #fff; border-inline-end: 1px solid #f0f0f0;
}
.pm__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm__brand {
  position: absolute; top: calc(20 * var(--u)); right: calc(20 * var(--u));
  width: calc(96 * var(--u)); height: auto;
}
.pm--mark-light .pm__brand { filter: brightness(0) invert(1); }
.pm__body {
  flex: 1; min-width: 0; overflow-y: auto;
  outline: none;               /* it only takes focus so the close button does not */
  padding: calc(46 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u));
  display: flex; flex-direction: column;
}

.pm__name { margin: 0; direction: ltr; text-align: right;
            font: 400 calc(36 * var(--u)) / 1.15 Montserrat, Alef, Arial, sans-serif; }
.pm__sku  { margin: calc(7 * var(--u)) 0 0; color: #8a8a8a;
            font: 400 calc(20 * var(--u)) / 1.2 Montserrat, Alef, Arial, sans-serif; }
.pm__note { margin: calc(4 * var(--u)) 0 0; font-size: calc(21 * var(--u)); color: var(--ink-soft); }

.pm__prices { display: flex; align-items: baseline; flex-wrap: wrap;
              gap: calc(16 * var(--u)); margin-top: calc(22 * var(--u)); }
.pm__old { position: relative; direction: ltr; color: #9a9a9a;
           font: 400 calc(24 * var(--u)) / 1.2 Montserrat, Alef, Arial, sans-serif; }
.pm__new { direction: ltr;
           font: 600 calc(46 * var(--u)) / 1.1 Montserrat, Alef, Arial, sans-serif; }
.pm__old i, .pm__new i { font-style: normal; font-size: .74em; }
.pm__old s {
  position: absolute; left: calc(3 * var(--u)); top: 26%;
  width: 100%; height: calc(14 * var(--u));
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.65 12.12'%3E%3Cpath d='M48.65 0 0 12.12' stroke='%23ff0000' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.pm__save {
  padding: calc(6 * var(--u)) calc(15 * var(--u)) calc(7 * var(--u));
  border-radius: 999px; background: var(--cyan); color: #fff;
  font: 700 calc(17 * var(--u)) / 1.2 Alef, Arial, sans-serif;
}

/* Shown only for a product whose sheet carried a description. */
.pm__desc { margin: calc(20 * var(--u)) 0 0; color: var(--ink-soft);
            font-size: calc(19 * var(--u)); line-height: 1.55; }

.pm hr { border: 0; border-top: 1px solid #e4e4e4; margin: calc(26 * var(--u)) 0 0; }
.pm__lead { margin: calc(22 * var(--u)) 0 calc(14 * var(--u));
            font: 700 calc(23 * var(--u)) / 1.3 Alef, Arial, sans-serif; }

.pm__or { margin: calc(14 * var(--u)) 0 0; font-size: calc(19 * var(--u)); color: #7b8790; }
.pm__or a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.pm__or a:hover { text-decoration: underline; }

.pm__fine { margin: auto 0 0; padding-top: calc(18 * var(--u));
            font-size: calc(15 * var(--u)); color: #a7aeb4; }
.pm__terms { margin: calc(6 * var(--u)) 0 0; font-size: calc(15 * var(--u)); color: #a7aeb4; }

/* ===========================================================================
   Narrow screens.

   The design is a desktop artboard, so below 900px the absolute layout is
   dropped for ordinary flow. The product card keeps its own --u, which means
   it stays exactly in proportion at any column width.
   =========================================================================== */
@media (max-width: 899px) {
  :root { --u: 1px; }
  body { max-width: none; }

  /* --- hero --- */
  .hero {
    height: auto; min-height: 78vh;
    /* Column flex: the cross axis is the inline axis, so in RTL "start" is the right. */
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 22px 22px 34px; text-align: right;
  }
  .hero__bg img { object-position: 78% center; }
  .hero > :not(.hero__bg) { position: relative; z-index: 1; top: auto; right: auto; left: auto;
                            white-space: normal; }
  /* The photo behind this is a showroom on the left and a pale panel on the
     right, and on a phone only the panel's width is available: the type is set
     to clear the dark side rather than to fill the screen. */
  .hero__logo { width: min(160px, 42vw); margin-bottom: auto; }
  .hero__title span, .hero__sub span { top: auto; right: auto; }
  .hero__kicker { margin: 22px 0 0; font-size: clamp(16px, 4.3vw, 24px); letter-spacing: .2em; }
  .hero > .hero__rate { position: static; display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
  .hero__rate > * { position: static; }
  .hero__upto, .hero__off { font-size: clamp(14px, 3.5vw, 21px); letter-spacing: .04em; }
  .hero__pct { width: clamp(96px, 27vw, 152px); height: auto; }
  .hero__title { font-size: clamp(31px, 8.8vw, 50px); line-height: 1.02; margin: 6px 0 10px; }
  .hero__title span, .hero__sub span { position: static; letter-spacing: 0; }
  .hero__sub { font-size: clamp(15px, 3.9vw, 21px); letter-spacing: .12em; line-height: 1.3; }

  /* --- steps --- */
  .steps { height: auto; padding: 44px 22px 48px; overflow: hidden; }
  /* Stacked on narrow screens: the numeral's rule then runs above the copy
     instead of through it. */
  .step { position: relative; padding: 116px 0 0; margin-bottom: 26px; }
  .step > * { position: absolute; }
  .step__title, .step__text { position: static; letter-spacing: 0; }
  .step--1 .step__disc, .step--2 .step__disc, .step--3 .step__disc {
    left: 0; top: 0; width: 100px; height: 100px;
  }
  .step--1 .step__num, .step--2 .step__num, .step--3 .step__num {
    left: 40px; top: 20px; width: min(288px, 76vw);
  }
  /* The numeral's rule runs under the copy, so the copy needs its own layer.
     Desktop pins these by step class, which out-specifies a bare class here. */
  .step--1 .step__title, .step--2 .step__title, .step--3 .step__title,
  .step--1 .step__text,  .step--2 .step__text,  .step--3 .step__text {
    position: relative; z-index: 1; top: auto; left: auto;
  }
  .step__title { font-size: clamp(19px, 5vw, 26px); line-height: 1.25; }
  .step__text  { font-size: clamp(15px, 4vw, 19px); line-height: 1.35; margin-top: 4px; }
  .step__text span { display: block; }
  .steps .wa--steps { position: static; }

  /* --- product grid --- */
  .catalog { padding: 36px 0 44px; }
  .grid {
    --gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    padding: 0 20px;
  }
  /* aspect-ratio keeps the card's own box exact; cqw then scales everything
     inside it off the card's real width (304 design px == 100cqw). */
  .card { container-type: inline-size; --u: 0.328947cqw;
          width: 100%; height: auto; aspect-ratio: 304 / 291; }
  .catalog__empty { max-width: none; padding: 0 22px; font-size: 18px; }

  /* --- lead prompt --- */
  .lead { height: auto; padding: 46px 22px 40px; text-align: right; }
  .lead > :not(.lead__dolly) { position: static; white-space: normal; }
  .lead__dolly { display: none; }             /* its backdrop is painted for the desktop bands */
  /* One line, whatever the screen: the title reads as a sentence, not as two. */
  .lead__title { font-size: min(6.5vw, 28px); line-height: 1.15; white-space: nowrap; }
  .lead__sub { font-size: clamp(16px, 4.4vw, 24px); margin-top: 8px; }
  .wa--cta { width: 50%; min-width: 196px; height: 46px; margin-top: 20px;
             justify-content: center; gap: 10px;
             padding: 0 8px 0 14px; font-size: clamp(15px, 3.9vw, 19px); }
  .wa--cta .wa__mark { width: 34px; height: 34px; }
  .wa--float { right: 16px; bottom: 16px; width: 62px; height: 62px; }

  /* --- footer --- */
  /* Room at the bottom for the floating bubble, which otherwise sits on the
     phone number. */
  .foot { height: auto; padding: 34px 22px 112px; }
  .foot__brand { position: static; width: min(230px, 62vw); margin: 34px 0 0; }
  .foot__contact { position: static; margin-top: 18px; font-size: 18px; }
  .foot__terms { position: static; margin-top: 18px; text-align: right; font-size: 13px; }

  /* --- pop-up becomes a bottom sheet --- */
  .pm {
    width: 100%; max-width: 100%;
    height: auto; max-height: 92dvh;
    margin: auto 0 0;                       /* pin to the bottom of the viewport */
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .3);
  }
  .pm[open] { flex-direction: column; }
  .pm::before {
    content: ''; position: absolute; z-index: 2; left: 50%; top: 9px; translate: -50% 0;
    width: 46px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .85); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }
  .pm__x { left: 8px; top: 8px; width: 38px; height: 38px; z-index: 2;
           display: grid; place-items: center; font-size: 26px; line-height: 1;
           color: #fff; background: rgba(0, 0, 0, .38); border-radius: 50%; }
  /* No padding here: it would leave a white strip above the photo, and the
     maker's mark, pinned to this pane, would sit in it. The sheet's handle and
     its close button ride over the picture instead, each carrying enough of a
     ground of its own to be seen on any of them. */
  .pm__media { flex: none; height: 40vh; min-height: 230px; border: 0;
               border-bottom: 1px solid #f0f0f0; }
  .pm__img { width: 100%; height: 100%; object-fit: cover; }
  .pm__brand { top: 12px; right: 14px; width: 74px; }
  .pm__body { padding: 16px 20px 0; }
  .pm__name { font-size: 25px; }
  .pm__sku { font-size: 15px; margin-top: 4px; }
  .pm__prices { margin-top: 12px; gap: 12px; }
  .pm__old { font-size: 18px; }
  .pm__old s { left: 2px; height: 11px; }
  .pm__new { font-size: 32px; }
  .pm__save { font-size: 14px; padding: 4px 12px 5px; }
  .pm__desc { margin-top: 12px; font-size: 15px; }
  .pm hr { margin-top: 16px; }
  .pm__lead { margin: 16px 0 10px; font-size: 19px; }
  .wa--pm { height: 56px; font-size: 19px; }
  .wa--pm .wa__mark { width: 42px; height: 42px; }
  .pm__or { font-size: 15px; margin-top: 12px; }

  /* The send button stays reachable however far the sheet is scrolled. */
  .pm__actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 18px -20px 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #e4e4e4;
    gap: 12px; flex-wrap: nowrap;
  }
  .pm__send { flex: 1; width: auto; height: 52px; font-size: 22px; border-radius: 26px; }
  .pm__or {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    height: 52px; padding: 0 16px; border: 2px solid var(--cyan); border-radius: 26px;
    font-size: 0;
  }
  .pm__or a { font-size: 17px; }
  .pm__fine { margin: 14px 0 0; padding: 0; font-size: 13px; }
  .pm__terms { margin: 4px 0 0; padding: 0 0 16px; font-size: 13px; }
}

@media (max-width: 559px) {
  .grid { grid-template-columns: 1fr; }
}