/* Owner page (/for-laundries/) — the pitch aimed at laundry owners.
 *
 * This file adds NO new visual vocabulary. It reuses what the site
 * already has: the `.section` rhythm, `.section-title` with its kicker
 * and cyan dot, `.btn` pills, `.pill--brand` chips, `[data-reveal]`
 * entrances, and the `.aboutus-cta` closing band from the FAQ page.
 *
 * Exactly ONE thing is new, and only because the aspect ratio forces
 * it: `.owners-frame`. `.showcase__frame` is built for a portrait phone
 * (320px max-width, 46px radius); a dashboard screenshot is landscape.
 * The frame below is the SAME materials — identical brushed-metal rim
 * gradient, identical brand ring, identical glow — in a landscape body
 * with a window chrome bar. Same language, different sentence.
 *
 * Everything is written with logical properties, so RTL (the default)
 * and LTR both work without a mirrored stylesheet. */

/* ── Hero ─────────────────────────────────────────────────────────── */
.owners-hero {
  padding-block: clamp(72px, 10vw, 132px) clamp(48px, 7vw, 88px);
  position: relative;
}
.owners-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}
.owners-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--text-1);
  max-width: 18ch;
  text-wrap: balance;
}
[lang="ar"] .owners-hero__title { line-height: 1.24; }
.owners-hero__title em {
  font-style: normal;
  color: var(--brand);
}
.owners-hero__sub {
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.8;
  max-width: 54ch;
  text-wrap: pretty;
}
.owners-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block-start: var(--sp-2);
}
/* The three "costs you nothing" chips. `.pill--brand` already carries
 * the brand-tinted treatment; this only lays them out. */
.owners-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-block-start: var(--sp-4);
}

/* ── Situation — three short lines, no statistics ─────────────────── */
.owners-situation__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.owners-situation__item {
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.owners-situation__item h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  margin-block-end: var(--sp-2);
  text-wrap: balance;
}
.owners-situation__item p {
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
  text-wrap: pretty;
}

/* ── Proof rows — alternating screenshot / copy ───────────────────── */
/* Mirrors `.showcase__grid` / `.showcase__tile`: identical alternation
 * and hairline separators, but the image column is the WIDER one here
 * because the screenshots are landscape rather than portrait. */
/* STACKED, not alternating.
 *
 * The alternating rhythm from showcase.css was tried here and abandoned.
 * It exists to seat copy beside the image, which is exactly the width
 * these screenshots cannot spare: the dashboard is dense and wide, and
 * beside-the-copy it rendered at ~0.3 of life size. Stacking the copy
 * BELOW each image hands the figure the full content width and lifts
 * every row's legibility (0.41–0.80 versus 0.33–0.64 in the alternating
 * version). A breakout past the container edge was tried too and read as
 * clipped rather than deliberate.
 *
 * What is kept from the site's language: the hairline separators between
 * rows and the reveal entrances, so this still reads as this site.
 *
 * Nothing bleeds past the container, so no clipping is needed — but the
 * frame's glow still bleeds ~8%, and `clip` (never `hidden`: it makes no
 * scroll container) keeps that from widening the document. */
.owners-proof { overflow-x: clip; }

/* Wider centred column for the screenshots ONLY — the rest of the page keeps
 * `--container` (1280). This is a wider container, NOT a breakout: it is
 * centred, it has real gutters at every width, and nothing is ever pulled past
 * the viewport edge, so there is nothing to clip.
 *   1920 -> 1472px   1440 -> 1340px   1366 -> 1270px   1024 -> 948px
 * A dashboard screenshot is dense; those ~170 extra pixels at 1440 are worth
 * more here than the tidier 1280 measure is. */
.owners-proof > .container {
  max-width: 1560px;
  padding-inline: clamp(20px, 3vw, 44px);
}

.owners-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.owners-proof__row {
  display: block;
}
/* Generous separation so each row reads as its own moment rather than a
 * wall of screenshots. */
.owners-proof__row + .owners-proof__row {
  margin-block-start: clamp(64px, 9vw, 128px);
  padding-block-start: clamp(64px, 9vw, 128px);
  border-block-start: 1px solid var(--line);
}
.owners-proof__figure { margin-block-end: var(--sp-5); }
/* The copy sits under its image, held to a readable measure and aligned
 * to the inline start so it reads as a caption to the screen above it. */
.owners-proof__copy {
  max-width: 68ch;
  margin-inline: 0;
}

.owners-proof__row + .owners-proof__row {
  margin-block-start: clamp(56px, 7vw, 104px);
  padding-block-start: clamp(56px, 7vw, 104px);
  border-block-start: 1px solid var(--line);
}

.owners-proof__job {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin-block-end: var(--sp-3);
  text-wrap: balance;
}
[lang="ar"] .owners-proof__job { line-height: 1.4; letter-spacing: -0.005em; }
.owners-proof__does {
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
  margin-block-end: var(--sp-3);
  text-wrap: pretty;
}
/* The "what changes" line — the sentence that has to earn the row. */
.owners-proof__changes {
  color: var(--text-1);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 700;
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--brand);
  text-wrap: pretty;
}

/* ── The landscape frame (the one new component) ──────────────────── */
.owners-frame {
  position: relative;
  padding: 3px;
  border-radius: var(--r-md);
  background: linear-gradient(
    155deg,
    #4a5058 0%, #1b1e24 26%, #0c0e12 50%, #2c313a 74%, #4e545e 100%
  );
  box-shadow: 0 48px 90px -44px rgba(0, 0, 0, 0.92),
              0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Brand ring, inside the rim — same value as the phone frame. */
.owners-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1px solid rgba(19, 181, 243, 0.22);
  pointer-events: none;
  z-index: 3;
}
/* Glow behind the device — same radial, tightened for a wide body. */
.owners-frame::after {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(19, 181, 243, 0.18),
    rgba(19, 181, 243, 0.05) 48%,
    rgba(19, 181, 243, 0) 74%
  );
  pointer-events: none;
}
/* Window chrome — three dots, so a wide rectangle reads as an app
 * window rather than a floating image. */
.owners-frame__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #14171d;
  border-start-start-radius: 11px;
  border-start-end-radius: 11px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.05);
}
.owners-frame__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.owners-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-end-start-radius: 11px;
  border-end-end-radius: 11px;
  position: relative;
  z-index: 1;
}
/* Illustrative-data disclosure. Small, always present, never hidden. */
.owners-proof__note {
  margin-block-start: var(--sp-3);
  color: var(--text-4);
  font-size: 0.78rem;
  text-align: center;
}

/* ── Subscription maths ───────────────────────────────────────────── */
.owners-math {
  max-width: 620px;
  margin-inline: auto;
}
.owners-math__label {
  display: block;
  text-align: center;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  margin-block-end: var(--sp-3);
}
/* Rows reuse the FAQ page's `.aboutus-stats` treatment via markup, so
 * the two pages cannot drift apart visually. Only the closing note and
 * the gross-figure footnote are new. */
.owners-math__closing {
  margin-block-start: var(--sp-4);
  text-align: center;
  color: var(--text-1);
  font-weight: 700;
  font-size: var(--fs-lead);
}
.owners-math__footnote {
  margin-block-start: var(--sp-3);
  text-align: center;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ── How to start — three steps ───────────────────────────────────── */
.owners-start__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  counter-reset: ownerstep;
}
.owners-start__step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
}
.owners-start__step::before {
  counter-increment: ownerstep;
  content: counter(ownerstep);
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand);
  display: block;
  margin-block-end: var(--sp-3);
}
.owners-start__step h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-1);
  margin-block-end: var(--sp-2);
  line-height: 1.3;
}
.owners-start__step p {
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
  text-wrap: pretty;
}
.owners-start__step ul {
  margin-block-start: var(--sp-2);
  padding-inline-start: 1.15em;
}
.owners-start__step li {
  list-style: disc;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.9;
}

/* ── Terms — statements of freedom, never questions ───────────────── */
/* There are FIVE tiles. A 260px floor yields four columns at desktop
 * width, which strands the fifth alone on its own row and reads as a
 * layout bug. A 330px floor caps it at three, so the block breaks 3 + 2
 * — deliberate-looking at every width. */
.owners-terms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.owners-term {
  display: block;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.owners-term:hover {
  border-color: rgba(19, 181, 243, 0.28);
  transform: translateY(-2px);
}
.owners-term h3 {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--text-1);
  margin-block-end: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.owners-term h3::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.owners-term p {
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  text-wrap: pretty;
}
.owners-terms__more {
  margin-block-start: clamp(28px, 4vw, 44px);
  text-align: center;
}
.owners-terms__more a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Home-page doorway band ───────────────────────────────────────── */
/* Lives on index.html, between Download and Contact. Four lines and a
 * button — a doorway, not a second pitch. If it ever grows past this,
 * cut it back. */
.owners-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(19, 181, 243, 0.10), rgba(19, 181, 243, 0.02));
  border: 1px solid rgba(19, 181, 243, 0.22);
  border-radius: var(--r-xl);
}
.owners-band__copy h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  margin-block-end: var(--sp-2);
  text-wrap: balance;
}
.owners-band__copy p {
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 52ch;
  text-wrap: pretty;
}
.owners-band__cta { flex: none; }

/* ── Narrow ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .owners-situation__grid,
  .owners-start__grid { grid-template-columns: 1fr; }

  /* The rows are already stacked at every width; below 900px <picture> swaps
   * in the zoomed fragments.
   *
   * The cap matters on TABLETS. At 768 the content box is ~708px, and a
   * fragment stretched to fill it would render the dashboard ABOVE life size
   * and below 2x source density. Capping the figure at 520px keeps the
   * fragment sane on a tablet and changes nothing on a phone, where the
   * content box is already narrower than the cap. */
  .owners-proof__figure {
    max-width: 520px;
    margin-inline: auto;
  }
  .owners-proof__copy { margin-inline: auto; }

  .owners-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .owners-hero__ctas { width: 100%; }
  .owners-hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .owners-band__cta { width: 100%; }
  .owners-band__cta .btn { width: 100%; justify-content: center; }
}