/* The public home page at /. Tokens, the buzzer and the Ready screen come from app.css, so the
   demo in the hero is the customer's own screen, not a drawing of it. The boldness is all in
   that demo: everything around it stays on the paper in rows, and the page closes on the
   product's own pomegranate. */

/* --phone-rem is a 390px phone in this page's rems, and --phone-floor the narrowest panel a wide
   screen gets, 272px: an Arabic page's rem is larger, so both come down by the same scale. */
.site { --site-gutter: clamp(1rem, 5vw, 3rem); --site-width: 72rem; --phone-rem: 24.375; --phone-floor: 17rem; }
html:lang(ar) .site { --phone-rem: calc(24.375 / var(--ar-scale)); --phone-floor: calc(17rem / var(--ar-scale)); }

.site-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  max-inline-size: var(--site-width); margin-inline: auto;
  padding: var(--s3) var(--site-gutter);
}
.site-brand { display: inline-flex; font-size: var(--step-1); font-weight: 600; text-decoration: none; }
.site-brand > [lang] + [lang] { margin-inline-start: 0; }

/* The hero: on a phone the demo comes straight after the headline, with Turn on sound above the
   fold; on a wide screen it takes its own column. */
.site-hero {
  display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "demo" "lede" "chat";
  max-inline-size: var(--site-width); margin-inline: auto;
  padding: var(--s2) var(--site-gutter) var(--s7);
}
.site-title {
  grid-area: title;
  font-size: clamp(min(2.5rem, 10.2vw), min(7.4vw, 10.5vh), 5.5rem);
  font-size: clamp(min(2.5rem, 10.2vw), min(7.4vw, 10.5svh), 5.5rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance;
}
html:lang(ar) .site-title { letter-spacing: 0; line-height: 1.2; }
.site-lede { grid-area: lede; max-inline-size: 34rem; font-size: var(--step-1); line-height: 1.4; }
.site-hero > .site-chat { grid-area: chat; }

/* The demo: the customer's whole screen in a phone-sized panel. --r is a rem of that screen at
   the panel's width, so the screen scales as one and its lines break where a 390px phone's do.
   The tokens app.css sizes the screen with take --r only while it waits: Ready leaves the panel
   and fills the real screen at the real sizes. --above is what stands over the panel on a phone
   and --around what stands over and under it on a wide screen. --fold-h is the room that leaves
   down to the fold, and the buzzer takes what the words leave of it, as on the real page, with
   --fold-min under it for a screen too short to hold them. No container and no transform here:
   either would keep Ready inside the panel. */
.site-try { grid-area: demo; display: grid; gap: var(--s2); justify-items: center; }
.site-phone {
  --phone-w: min(100vw - 2 * var(--site-gutter), var(--phone-rem) * 1rem);
  --r: calc(var(--phone-w) / var(--phone-rem));
  --fold-h: calc(100vh - var(--above)); --fold-min: calc(31 * var(--r));
  --above: 14.25rem; --around: 7rem;
  display: flex; flex-direction: column; inline-size: var(--phone-w);
  padding: 0 var(--r) calc(1.5 * var(--r)); border: 1px solid var(--line);
}
html:lang(ar) .site-phone { --above: 12rem; --around: 7.25rem; --fold-min: calc(33.5 * var(--r)); }
@supports (height: 100svh) {
  .site-phone { --fold-h: calc(100svh - var(--above)); }
}
.site-demo[data-state="preparing"] {
  --step-0: calc(1.0625 * var(--r)); --step-1: calc(1.3125 * var(--r)); --step-2: calc(1.625 * var(--r));
  --s1: calc(0.25 * var(--r)); --s2: calc(0.5 * var(--r)); --s3: calc(0.75 * var(--r));
  --s4: var(--r); --s5: calc(1.5 * var(--r));
  --tap: calc(3.5 * var(--r)); --radius: var(--r);
  font-size: var(--step-0);
}
/* .site for weight: app.css's fold rules run to five classes, and its short-screen ones take the
   fold from the full height of the window. */
.site .site-demo[data-state="preparing"] > .status-fold {
  --pager-size: calc(18.75 * var(--r)); min-block-size: 0;
}
@supports (width: 1cqmin) and (height: 100svh) {
  .site .site-demo[data-state="preparing"] > .status-fold { max-block-size: max(var(--fold-min), var(--fold-h)); }
  .site .site-demo[data-state="preparing"] > .status-fold > .pager-stage:not(.pager-stage-slab) {
    flex: 0 1 calc(18.75 * var(--r)); min-block-size: calc(6 * var(--r)); max-block-size: none;
  }
}
.site-demo[data-state="preparing"] .venue { min-block-size: calc(4.5 * var(--r)); }
@media (max-height: 46rem) {   /* app.css closes the screen up here, so less of it must stay */
  .site-phone { --fold-min: calc(29 * var(--r)); }
  html:lang(ar) .site-phone { --fold-min: calc(30.5 * var(--r)); }
  .site-demo[data-state="preparing"] .venue { min-block-size: calc(3.5 * var(--r)); }
}
.site-demo[data-state="preparing"] .status-title { font-size: calc(1.75 * var(--r)); }
.site-demo .lang-toggle { min-block-size: calc(2.75 * var(--r)); border-radius: calc(1.375 * var(--r)); }
.site-phone > .page-foot { padding-block-start: var(--r); font-size: calc(1.0625 * var(--r)); }
.site-note { color: var(--fg-2); text-align: center; }
/* A double click on the buzzer would select the number, and the selection would last into Ready. */
.site-demo .pager { -webkit-user-select: none; user-select: none; }
/* site.js moves focus to these keys, and a tap should not leave a ring where a keyboard needs one:
   data-pointer is set by a tap and cleared by any key that presses or moves focus. */
.site-demo[data-pointer] :is(#stop-btn, #sound-btn):focus-visible { outline: none; }

/* While the demo rings, the page behind it stays where it is. overflow stops the wheel, the keys
   and a swipe with Safari's toolbar out. With the toolbar minimised Safari ignores it, and
   touch-action stops the swipe. Sideways Ready scrolls by itself, so touch-action keeps to
   portrait, and overscroll-behavior ends the chain there. */
html:has(.site-demo[data-state="ready"]) { overflow: hidden; }
.site-demo[data-state="ready"] { overscroll-behavior: contain; }
@media (orientation: portrait) {
  .site-demo[data-state="ready"] { touch-action: pinch-zoom; }
}

.site-section { max-inline-size: var(--site-width); margin-inline: auto; padding: var(--s7) var(--site-gutter); }
.site-section h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.15; }
.site-section > h2 { margin-block-end: var(--s5); }
.site h3 { margin: 0 0 var(--s2); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }

/* A piece of the buzzer's channel: small round lamps in the dark, in the buzzer's colour so it
   shows on dark paper. The row fills from the same end on both language pages, as the buzzer's does. */
.site-lamps {
  display: flex; justify-content: space-between; inline-size: 5.5rem; margin-block-end: var(--s3);
  padding: 0.5rem 0.625rem; border-radius: 0.875rem; background: var(--channel);
  box-shadow: 0 0 0 0.1875rem var(--puck); direction: ltr;
}
.site-lamps > i { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--lamp-off); }
.site-lamps > i.on { background: var(--lamp-on); box-shadow: 0 0 0.5rem rgb(255 181 46 / 0.7); }

.site-steps { display: grid; gap: var(--s6); }
.site-notes { padding-block-start: 0; }
.site-notes > ul { display: grid; gap: var(--s4); max-inline-size: 34rem; }

/* The close: pomegranate is the product's own colour here, not a venue's, and cream holds on it
   because the tokens are set for it, the key's too. */
.site-close {
  --bg: var(--puck-l); --fg: var(--l-field); --fg-2: var(--l-field);
  background: var(--bg); color: var(--fg); padding-block-end: var(--s5);
}
.site-close .btn-primary { --edge: rgb(0 0 0 / 0.4); }
.site-close-in {
  display: grid; gap: var(--s6); max-inline-size: var(--site-width); margin-inline: auto;
  padding: var(--s7) var(--site-gutter) var(--s6);
}
.site-price { display: grid; gap: var(--s3); justify-items: start; align-content: start; }
.site-price h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.15; }
.site-price ul { display: grid; gap: var(--s2); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.site-price li { text-wrap: balance; }   /* no word alone on a line, in either language */
/* No paragraph ends on one word alone: the licence line left "invoice." alone from 768 wide, and the
   Arabic line under the headline left منها. alone at 402. */
.site-lede, .site-price p { text-wrap: pretty; }
.site-price .btn { margin-block-start: var(--s3); }
.site-close > .page-foot { max-inline-size: var(--site-width); margin-inline: auto; padding-inline: var(--site-gutter); }

@media (max-width: 47.99rem) {
  .site-chat { inline-size: 100%; }
}
/* A phone with its browser's bars showing: the headline takes two lines, then the buzzer gives way. */
@media (max-width: 55.99rem) and (max-height: 50rem) {
  .site-bar { padding-block: var(--s2); }
  .site-title { font-size: min(2.5rem, 7.4vw); }
  .site-phone { --above: 10rem; }
  html:lang(ar) .site-phone { --above: 7.75rem; }
}
/* The shortest: app.css drops the kind line under the key, so it can go past the fold. */
@media (max-width: 55.99rem) and (max-height: 36rem) {
  .site-phone { --above: 8rem; --fold-min: calc(28.5 * var(--r)); }
  html:lang(ar) .site-phone { --above: 6rem; --fold-min: calc(27.75 * var(--r)); }
}
/* From 48rem the Arabic header was one row, so the line under the name took only its own height
   there, not the extra row it took below 48rem: the Arabic panel keeps that much more room above. */
@media (min-width: 48rem) and (max-width: 55.99rem) and (max-height: 50rem) {
  html:lang(ar) .site-phone { --above: 9.25rem; }
}
/* Rows on the wide screen, the way a departures board lines up. */
@media (min-width: 48rem) {
  .site-steps { gap: var(--s5); }
  .site-steps > li {
    display: grid; grid-template-columns: 5.5rem 17rem minmax(0, 34rem);
    column-gap: var(--s5); align-items: start;
  }
  .site-steps .site-lamps { margin-block: 0.5rem 0; }
  .site-steps h3 { margin: 0; }
}
@media (min-width: 56rem) {
  /* The headline in two lines (four at the phone's size left "Your" alone on the first), and the
     headline, the line under it and the chat key read as one block, centred beside the demo. */
  .site-hero {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 6vw, 5rem);
    grid-template-rows: 1fr auto auto auto 1fr; align-items: start; justify-items: start;
    grid-template-areas: ". demo" "title demo" "lede demo" "chat demo" ". demo";
  }
  .site-title { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
  /* The demo in the sales video's phone: a flat ink frame drawn as a spread shadow, so the screen
     inside keeps its size and layout (a border would take its width), and Ready, which is fixed,
     still covers it. No notch, no buttons, no shadow: the video's drawing, not a stock device.
     --around makes room for the frame above and below and the note's larger gap. A phone keeps
     the thin border: there the frame would crowd the headline. */
  .site-phone {
    --around: 8.875rem;
    margin-block-start: calc(0.9 * var(--r)); border-color: var(--fg); border-radius: calc(2.25 * var(--r));
    box-shadow: 0 0 0 calc(0.9 * var(--r) - 1px) var(--fg);
  }
  html:lang(ar) .site-phone { --around: 9rem; }   /* the Arabic rule above is more specific, so it needs its own */
  .site-try { gap: calc(var(--s2) + 0.875rem); }   /* the note clears the frame */
  /* The whole panel beside the title, with the note under it: the height sets the width, and
     38vw keeps it in its column. 0.494 is the width of the panel over its height. */
  .site-phone {
    --phone-w: min(var(--phone-rem) * 1rem, 38vw, max(var(--phone-floor), (100vh - var(--around)) * 0.494));
    --fold-h: calc(var(--phone-w) / 0.494 - 4.5 * var(--r));
    block-size: calc(var(--phone-w) / 0.494);
  }
}
@supports (height: 100svh) {
  @media (min-width: 56rem) {
    .site-phone {
      --phone-w: min(var(--phone-rem) * 1rem, 38vw, max(var(--phone-floor), (100svh - var(--around)) * 0.494));
    }
  }
}