/* Dhahir v2: the page CSS of the secondary pages (/automations/, /startups/ and their /ar/ twins), on top of page.css.
   Loaded only on those pages (pages.tsx hoists it into <head> after the site's sheets). Only what the kit and page.css
   lack: the pieces drawn for these pages, the rail, the calculator. Logical properties throughout; pages-rtl.css
   holds what the kit draws with physical left and right. */

/* ================================================================ /automations/: 1. the hero (triptych, dealt) */
.hero--triptych .hero__more { margin: var(--s-5) 0 0; }
.hero--triptych .hero__more .link { font-size: var(--t-body); }
/* the one large button keeps one line inside its three columns (302px at 1440): the label at the body size */
.hero--triptych .hero__cta .btn { font-size: var(--t-body); padding-inline: var(--s-5); white-space: nowrap; }
.ly-collage .ly-piece > .rb { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; }
.ly-collage .ly-piece { background: var(--rb-bg); box-shadow: var(--rb-shadow); }
/* the request at product scale: it holds its finished picture (the collage's set change is the hero's one motion) */
.pc-req .rb-req, .pc-req .rb-req *, .pc-follow * { animation: none !important; }
.pc-req .rb-req { height: 100%; overflow: hidden; font-size: 14px; }
.pc-req .rb-req__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-req .rb-req__body { gap: 14px; }
.pc-req::after, .pc-site::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(transparent, var(--rb-bg)); pointer-events: none; }
/* Huda's afternoon: the column the confirm writes into */
.rb-col { display: grid; gap: 8px; align-content: start; padding: 14px; font-size: 13px; }
.rb-col__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rb-line); }
.rb-col__head b { display: block; font-size: 14px; }
.rb-col__ev { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--rb-raise); }
.rb-col__ev em { font-style: normal; color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-col__ev b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.rb-col__ev b img, .rb-mb__ev b img, .rb-follow__msg img { width: 11px; height: 11px; padding: 2px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); flex: none; }
.rb-col__ev.is-new { box-shadow: inset 0 0 0 1.5px var(--dot); }
/* the booking page and what follows it */
.pc-site .rb-site { height: 100%; overflow: hidden; }
.rb-follow { display: grid; gap: 14px; align-content: start; padding: 16px; font-size: 13px; }
.rb-follow__msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border-start-start-radius: 4px; background: var(--rb-wa); line-height: 1.45; }
.rb-follow__msg img { margin-top: 2px; }
.rb-follow .rb-req__done { gap: 8px; }
.rb-follow .rb-req__done li { align-items: flex-start; }
/* 1024 to 1279: the collage is seven columns; the column beside the request keeps its names whole */
@media (min-width: 1024px) and (max-width: 1279px) { .pc-col .rb-col__ev small { display: none; } }
/* a tablet and a phone: the collage is narrower, so the request and the booking page take the whole width and the
   piece beside each steps aside (no piece ever covers another's text) */
@media (max-width: 1023px) {
  /* the pane's foot stays clear for the pause disc: the reply steps aside */
  .pc-req .rb-bubble--out { display: none; }
  .ly-collage .pc-req, .ly-collage .pc-site { inset-inline-start: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  .ly-collage .pc-col, .ly-collage .pc-follow { display: none; }
}
@media (max-width: 639px) {
  .pc-req .rb-req__fields, .pc-req .rb-req__done, .pc-req .rb-bubble--out { display: none; }
  .pc-req .rb-req__slots > .rb-slot:nth-of-type(3) { display: none; }
  .hero--triptych .hero__more { display: none; }
}

/* ================================================================ 2. #flow: the loop by hand, then the system */
#flow { --hm: 2; }
.flow-head { align-items: start; }
.flow-head h2 { margin: 0; }
.flow-manual { margin: 0; font-size: var(--t-lead); line-height: 1.4; color: var(--ink); }
.flow-rail { margin-top: var(--s-7); }
.rail__today { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-bottom: var(--s-4); border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); }
ol.rail { list-style: none; margin: 0; padding: 0; }
.rail > li { position: relative; grid-column: auto / span 2; padding-top: 28px; display: grid; gap: var(--s-2); align-content: start; }
/* the rail row: a hairline to the next column and a still dot, all in the muted (nothing on it moves) */
.rail > li::before { content: ""; position: absolute; top: 4px; inset-inline-start: 0; inset-inline-end: calc(-1 * var(--gutter)); height: 1px; background: var(--line-strong, var(--line)); }
.rail > li:last-child::before { inset-inline-end: 0; }
.rail__dot { position: absolute; top: 0; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.rail__n { color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.rail__t { font-size: var(--t-card); font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.flow-fixed { margin-top: var(--s-8); align-items: stretch; }
.flow-fixed__text .flow-fixed__lead { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 500); letter-spacing: var(--display-tracking, -0.02em); font-size: var(--t-h3); line-height: 1.15; color: var(--ink); max-width: none; }
.flow-fixed__text p + p { margin: var(--s-4) 0 0; color: var(--ink); font-size: var(--t-lead); line-height: 1.5; max-width: 44ch; }
.flow-dg { --ratio: 0px; height: 100%; min-height: 300px; padding: var(--s-5); }
.flow-dg > .dg { flex: 1 1 auto; align-self: stretch; height: 100%; }
@media (min-width: 640px) and (max-width: 1023px) {
  .flow-head > * { grid-column: 1 / -1; }
  .flow-manual { margin-top: var(--s-3); }
  .rail > li { grid-column: auto / span 4; margin-bottom: var(--s-5); }
  .rail > li:nth-child(3n)::before { inset-inline-end: 0; }
  .flow-fixed > * { grid-column: 1 / -1; }
  .flow-dg { height: 300px; margin-top: var(--s-5); }
  .flow-rail { margin-top: var(--s-6); }
  .flow-fixed { margin-top: var(--s-6); }
}
@media (max-width: 639px) {
  .flow-manual { margin-top: var(--s-3); }
  .flow-rail { margin-top: var(--s-6); }
  /* the rail runs down: the dot on the start line, the hairline to the next step */
  .rail { display: grid; gap: 0; }
  .rail > li { grid-column: 1 / -1; padding: 0 0 var(--s-4); padding-inline-start: 28px; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--s-2); align-items: baseline; }
  .rail > li::before { top: 9px; bottom: -9px; height: auto; width: 1px; inset-inline-start: 4px; inset-inline-end: auto; }
  .rail > li:last-child::before { display: none; }
  .rail__dot { top: 5px; }
  .rail__t { font-size: var(--t-body); }
  /* the two screens end on the diagram: it takes what the rail and the words leave */
  .flow-fixed { margin-top: var(--s-7); display: flex; flex-direction: column; flex: 1 1 auto; }
  .flow-dg { flex: 1 1 auto; height: auto; min-height: 300px; margin-top: var(--s-5); padding: var(--s-3); }
}

/* ================================================================ 3. #systems: six open cards over two screens */
.sys-head { align-items: start; }
.sys-head h2 { margin: 0; }
.sys-head__p { margin: 0; color: var(--ink); font-size: var(--t-lead); line-height: 1.5; }
.sys-head + .sys-cards { margin-top: var(--s-7); }
.sys-cards .panel { --p-h: 300px; }
/* the still diagram's labels stand on the sand: they take the ground's ink */
.sys-cards .panel--dg { --muted: var(--ground-muted); }
.sys-cards .panel--photo { padding: 0; overflow: hidden; background: #0d0d0e; }
.sys-cards .panel--photo { display: grid; place-items: center; background: #101011; }
.sys-cards .panel--photo > .sys-photo { display: block; width: auto; height: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); object-fit: contain; border-radius: 12px; }
/* the card's number, as the live page numbered its six systems */
.sys-n { display: inline-block; min-width: 2.2em; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
/* 5. tonight's run: one day's sales, three jobs, each done */
.rb-jobs { width: 360px; padding: 14px 16px 16px; display: grid; gap: 0; font-size: 13px; }
.rb-jobs__head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 12px; }
.rb-jobs__head b { display: block; font-size: 14px; }
.rb-jobs__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rb-line); }
.rb-jobs__row b { font-size: 14px; }
.rb-jobs__row em { font-style: normal; color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-jobs__row i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 600; background: var(--rb-ok-bg); color: var(--rb-ok); }
.rb-jobs .rb-ic { width: 16px; height: 16px; }
.sys-cards .rb-jobs { max-width: 100%; }
/* the fragments stand centred in their panels (the second screen's panels grow to its foot) */
.sys-cards .rb-mb, .sys-cards .rb-wl, .sys-cards .rb-app--card { max-width: 100%; }
/* 1. the request list, a window without its side list: it opens at the panel's top, centred across it, and runs on
   under the panel's fading foot (a list longer than its panel never stands cut at both ends) */
.sys-cards .stage > .at-top { position: absolute; top: 32px; left: 50%; translate: -50% 0; width: calc(100% - 48px); max-width: 380px; }
@media (max-width: 639px) { .sys-cards .stage > .at-top { top: 20px; width: calc(100% - 32px); } }
.rb-app--card .ui-win { width: 380px; max-width: 100%; }
.rb-app--card .ui-win__body { grid-template-columns: minmax(0, 1fr); }
.rb-app--card .ui-win__row.is-sel { background: color-mix(in oklab, var(--rb-ink) 6%, var(--rb-bg)); box-shadow: inset 2px 0 0 var(--dot); }
html[dir="rtl"] .rb-app--card .ui-win__row.is-sel { box-shadow: inset -2px 0 0 var(--dot); }
/* 2. the day from 16:00 to 19:00: three lanes, six half hours */
.rb-mb { width: 360px; padding: 12px 14px 16px; font-size: 13px; --row: 36px; }
.rb-mb__cols, .rb-mb__body { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); column-gap: 6px; }
.rb-mb__cols { padding-bottom: 10px; border-bottom: 1px solid var(--rb-line); }
.rb-mb__cols span { display: flex; align-items: center; gap: 6px; font-weight: 500; min-width: 0; white-space: nowrap; }
.rb-mb__cols .rb-av { width: 20px; height: 20px; font-size: 11px; }
.rb-mb__body { position: relative; height: calc(6 * var(--row)); margin-top: 8px; }
.rb-mb__times { position: relative; }
.rb-mb__times span { position: absolute; top: calc(var(--s) * var(--row)); color: var(--rb-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.rb-mb__lane { position: relative; }
.rb-mb__ev { position: absolute; inset-inline: 0; top: calc(var(--s) * var(--row)); height: calc((var(--e) - var(--s)) * var(--row) - 4px); padding: 6px 8px; border-radius: 8px;
             background: var(--rb-raise); border: 1px solid var(--rb-line); overflow: hidden; }
.rb-mb__ev b { display: flex; align-items: center; gap: 5px; line-height: 1.25; }
.rb-mb__ev small { font-size: 12px; line-height: 1.3; }
.rb-mb__ev.is-short small { display: none; }
.rb-mb__ev.is-new { box-shadow: inset 0 0 0 1.5px var(--dot); border-color: transparent; }
.rb-mb__ev.is-wait { background: var(--rb-ok-bg); }
/* three columns at 1024 to 1279 leave a card 272px: the board keeps Maryam's and Huda's lanes (Noor's booking is in
   Huda's), so no name is cut */
@media (min-width: 1024px) and (max-width: 1279px) {
  .rb-mb__cols, .rb-mb__body { grid-template-columns: 40px repeat(2, minmax(0, 1fr)); }
  .rb-mb__cols > span:nth-child(2), .rb-mb__body > .rb-mb__lane:nth-child(2) { display: none; }
}
/* 4. the waitlist and loyalty card */
.rb-wl { width: 360px; padding: 16px 16px 18px; display: grid; gap: 0; font-size: 13px; }
.rb-wl__head { padding-bottom: 10px; } .rb-wl__head b { font-size: 15px; }
.rb-wl__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rb-line); }
.rb-wl__row b { display: block; font-size: 14px; }
.rb-wl__stamps { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rb-line); }
.rb-wl__stamps i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rb-line); }
.rb-wl__stamps i.is-on { background: var(--rb-ink); border-color: var(--rb-ink); }
html[dir="rtl"] .rb-wl__stamps { justify-content: flex-end; }
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#systems .sys-cards > .card > :not(.panel) { grid-column: 1 / span 6; }
  main > section#systems .sys-cards > .card > .panel { grid-column: 7 / -1; --p-h: 190px; }
  main > section#systems .sys-cards { row-gap: var(--s-5); }
  .sys-head + .sys-cards { margin-top: var(--s-6); }
}
/* a short desktop screen (1024x768): the two rows of cards keep within their screens */
@media (min-width: 1024px) and (max-height: 820px) { main > section#systems .sys-cards .panel { --p-h: 230px; } .sys-head + .sys-cards { margin-top: var(--s-5); } }
@media (max-width: 639px) {
  .sys-head__p { margin-top: var(--s-3); font-size: var(--t-body); }
  .sys-head + .sys-cards { margin-top: var(--s-6); }
  /* a phone keeps two screens: two of the six pictures (the day's board, the messages) and every card's words */
  main > section#systems .sys-cards > .sys-card--2 > .panel { --p-h: 214px; }
  main > section#systems .sys-cards > .sys-card--6 > .panel { --p-h: 250px; }
  main > section#systems .sys-cards > :is(.sys-card--1, .sys-card--3, .sys-card--4, .sys-card--5) > .panel { display: none; }
  .rb-mb { --row: 22px; padding: 10px 12px 12px; }
  .rb-mb__body { margin-top: 8px; }
  .rb-mb__ev { padding: 3px 6px; }
  .rb-mb__ev small { display: none; }
}

/* ================================================================ 4. #own: the dealt moment on the inverse band */
.own-text h2 { margin: 0; font-size: var(--ly-h1-col, var(--t-h1)); line-height: 1.04; }
.own-grid { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
/* the screen runs from the heading down to the quote's foot: the care line and the quote close on one line */
.own-text { display: flex; flex-direction: column; }
.own-text > .own-p2 { margin-top: auto; padding-top: var(--s-5); }
.own-quote { align-self: end; }
.own-p { margin: var(--s-5) 0 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 44ch; }
.own-p2 { margin: var(--s-4) 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink); max-width: 44ch; }
.own-quote { justify-self: stretch; width: 100%; }
.own-quote .rb-quote { font-size: 18px; }
.own-quote .rb-quote__row { font-size: 17px; padding-top: 18px; }
.own-quote .rb-quote__body { gap: 18px; padding: 28px 30px 32px; }
.own-quote .rb-quote__body > b { font-size: 22px; }
.own-quote .rb-quote__row { padding-top: 14px; }
.own-quote .rb-btn { height: 40px; font-size: 16px; padding: 0 18px; }
.own-quote .rb-chat__head { padding: 20px 30px; }
@media (max-width: 639px) { .own-quote .rb-quote { font-size: 15px; } .own-quote .rb-quote__row { font-size: 14px; padding-top: 12px; } .own-quote .rb-quote__body { gap: 12px; padding: 20px 18px 22px; } .own-quote .rb-quote__body > b { font-size: 18px; } .own-quote .rb-chat__head { padding: 14px 18px; } .own-quote .rb-btn { height: 36px; font-size: 14px; padding: 0 14px; } }
@media (max-width: 1023px) { .own-grid { grid-template-rows: auto; align-content: start; } .own-text > .own-p2 { margin-top: var(--s-4); padding-top: 0; } .own-grid > * { grid-column: 1 / -1; } .own-quote { margin-top: var(--s-7); align-self: start; } }

/* ================================================================ 5. #calc: what manual work costs, from two numbers */
.calc-text h2 { margin: 0; }
.calc-p { margin: var(--s-5) 0 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 40ch; }
.calc-grid { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.calc-text { align-self: start; }
.calc { display: grid; gap: var(--s-6); grid-template-rows: auto auto minmax(0, 1fr); align-self: stretch; padding: clamp(var(--s-5), 3.4vw, var(--s-8)); border-radius: var(--r-lg);
        /* the lit sand ground of the cards' panels, with its own ink */
        background: var(--ground-bg); color: var(--ground-ink); --bg: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
        --line: color-mix(in oklab, var(--ground-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 30%, transparent); }
.calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: end; }
.calc .field { font-size: var(--t-body); font-weight: 400; color: var(--ink); line-height: 1.4; }
.calc .field input { height: 56px; font-size: 22px; font-variant-numeric: tabular-nums; font-family: var(--font-latin); background: var(--ground-bg, var(--bg)); }
.calc .field input:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; }
.calc__result { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.calc__ic { display: inline-block; width: 20px; height: 20px; vertical-align: -0.2em; margin-inline-end: 10px; opacity: .8; }
.calc__label, .calc__hours { margin: 0; font-size: var(--t-lead); line-height: 1.4; color: var(--ink); }
.calc__value { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; }
.calc__amount { font-family: var(--font-latin-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc__unit { font-size: var(--t-lead); color: var(--ink); }
.calc__hours output { font-variant-numeric: tabular-nums; font-weight: 500; }
.calc__foot { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); align-self: end; }
.calc__note { margin: 0; font-size: var(--t-body); color: var(--ink); }
.calc__disc { margin: 0; font-size: var(--t-small); color: var(--ink); }
@media (max-width: 1023px) { .calc-grid { grid-template-rows: auto; align-content: start; } .calc-grid > * { grid-column: 1 / -1; } .calc { margin-top: var(--s-7); align-self: start; } }
@media (max-width: 639px) {
  .calc__fields { grid-template-columns: minmax(0, 1fr); }
  .calc { gap: var(--s-6); margin-top: var(--s-6); }
  .calc-p { font-size: var(--t-body); }
}

/* ================================================================ 6. #faq: four answers, open, beside the owner's WhatsApp thread */
.afaq-grid { align-items: start; }
.afaq-grid h2 { margin: 0; }
.afaq-head { display: flex; flex-direction: column; }
.afaq-head .faq-grid__p { color: var(--ink); }
.afaq-list { margin-top: var(--s-6); }
#faq .afaq-grid .faq__item { padding-block: var(--s-5); }
#faq .afaq-grid .faq__item h3 { margin-bottom: var(--s-2); }
#faq .afaq-grid .faq__item p { font-size: var(--t-body); line-height: 1.55; color: var(--ink); }
#faq .afaq-grid .faq > .faq__item:last-child { border-bottom: 1px solid var(--line); }
.afaq-thread { grid-column: 7 / span 6; align-self: stretch; --p-h: auto; min-height: 0; background:
    radial-gradient(80% 70% at 20% 0%, color-mix(in oklab, var(--ground-surface) 85%, white), transparent 70%), var(--ground-bg); }
.afaq-thread .stage > .at-rise { --ax: 40px; --ay: 40px; }
.afaq-thread .rb-chat { font-size: 14px; width: 440px; }
@media (min-width: 1024px) { .afaq-grid { grid-template-rows: minmax(0, 1fr); align-content: stretch; } }
@media (max-width: 1023px) {
  .afaq-grid { display: flex; flex-direction: column; align-items: stretch; }
  .afaq-thread { flex: 1 1 auto; min-height: 300px; margin-top: var(--s-6); }
}
@media (max-width: 639px) {
  html #faq { --hm: 2; }
  #faq .afaq-grid .faq__item { padding-block: var(--s-4); }
  .afaq-thread .stage > .at-rise { --ay-sm: 20px; }
}

/* ================================================================ 7. the close: this page's heading is longer than home's */
html footer.closing .closing__cta #close-h { max-width: 24ch; }

/* ================================================================ /startups/ (round 4 page plan section 3)
   hero centred (dealt), #offer split-text-left with the four points as a ruled list, #proof product-statement on the inverse ground
   opened by the iris-opens moment (dealt).
   The pictures are captures of QahwaPass in a plain browser window (.sx-win), drawn here: page CSS inside a visual. */
.sx-win { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #f8f4ec;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -24px rgb(0 0 0 / .45); }
.sx-win__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding-inline: 14px; flex: none;
  background: #ebe5da; border-bottom: 1px solid rgb(0 0 0 / .08); color: #3d3830; font: 500 13px/1 var(--font-text); }
.sx-win__dots { display: flex; gap: 6px; } .sx-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(0 0 0 / .16); }
.sx-win__url { flex: 1 1 auto; min-width: 0; max-width: 360px; margin-inline: auto; padding: 6px 12px; border-radius: 8px; background: #f8f4ec;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
.sx-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: #0a0a0b; color: #f5f3ef; font-size: 12px; }
.sx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.sx-win__shot { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sx-win__shot img { display: block; width: 100%; height: auto; }

/* 1. the hero: the btn-row holds the one button and a text link */
.sx-hero .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.sx-hero .sx-hero__more { font-size: var(--t-body); }
/* body text in the ink (7:1), not the kit's grey lead */
.sx-hero .hero__lead { color: var(--ink); }
.sx-hero .hero__window > .ly-piece { bottom: 0; }
.sx-hero .hero__window > .ly-piece > .sx-win { height: calc(100% + 24px); }

/* 2. the offer: the four points as ruled rows; the window of the owners' page cut by the frame's right and bottom */
.sx-offer > .wrap { gap: var(--s-6); }
.sx-offer__p { margin-top: var(--s-5); font-size: var(--t-lead); color: var(--ink); max-width: 30ch; }
.sx-offer__piece { --ax: 56px; --ay: 56px; width: 820px; }
.sx-offer__piece > .sx-win { height: 100%; }
.sx-offer__piece .sx-win__shot img { width: 100%; }
.sx-points { list-style: none; margin: var(--s-7, 48px) 0 0; padding: 0; max-width: 34ch; border-bottom: 1px solid var(--line); }
.sx-points li { padding: var(--s-4) 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--t-body); line-height: 1.45; }

/* 3. the proof: the head on one row, the live window in the lit frame down to the section's foot */
.sx-proof__side { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.sx-proof__p { color: var(--ink); }
.sx-proof__frame { display: block; margin-top: var(--s-7, 48px); padding: 48px 64px 0; overflow: hidden; }
.sx-proof__frame::before { display: none; }
.sx-proof__frame > .sx-win { height: calc(100% + 24px); max-width: 1040px; margin-inline: auto; border-end-start-radius: 0; border-end-end-radius: 0; }

@media (max-width: 1023px) {
  .sx-offer__piece { --ax: 32px; --ay: 32px; width: 640px; }
  .sx-proof__frame { padding: 32px 32px 0; }
}
@media (max-width: 639px) {
  .sx-hero .btn-row { flex-direction: column; gap: var(--s-4); }
  .sx-win__bar { height: 28px; gap: 8px; padding-inline: 10px; font-size: 11px; }
  .sx-win__dots i { width: 7px; height: 7px; }
  .sx-win__url { padding: 4px 8px; }
  .sx-live { padding: 3px 8px; font-size: 11px; }
  .sx-offer__piece { width: 520px; }
  .sx-proof__frame { padding: 20px 16px 0; margin-top: var(--s-6); }
}
/* a phone: the hero window shows QahwaPass at phone width; the proof's capture fills its window from the top */
.sx-win__shot picture { display: block; }
@media (max-width: 639px) {
  .sx-proof__frame .sx-win__shot img { height: 100%; object-fit: cover; object-position: 30% 0; } /* the steps' heading starts at 17% of the capture */
  .sx-points { margin-top: var(--s-6); }
  /* the four points make the words taller than a short phone's screen: the split keeps its content height (the kit's
     .fill basis is 0 with no floor), so the section grows instead of laying the window over #proof */
  main > section.sx-offer > .wrap > .grid.fill { min-height: min-content; }
}
/* the headline is the deck's 56 characters (the kit's centred hero is drawn for 36): the text block takes the width
   the h1 needs to keep to two lines at 1440, still centred on the page axis; the lead keeps its 52ch */
.sx-hero .hero__c { max-width: 1120px; }
.sx-hero h1 { max-width: 30ch; }
/* critique pass 2: at 768 the hero window is taller than the capture; the capture fills it from the top (cover) */
.sx-hero .sx-win__shot picture, .sx-hero .sx-win__shot img { height: 100%; }
.sx-hero .sx-win__shot img { object-fit: cover; object-position: top left; }