/* The landing page: a cinematic product page, black ground, few words, the
   product itself shown large.

   This replaced a night-signage world the direction roll assigned (seed
   534273be) after the user rejected it and chose the standing conventional
   option. Convention is therefore the commitment, executed straight: no
   irony, no quirk smuggled back in, and the craft bar is a first-party Apple
   product page. What that means concretely, and what this file holds itself
   to:

   - Pure black ground, and space used as the primary material. Sections are
     near-full-viewport chapters with one idea each.
   - Very few words. Type does the work: one enormous line, one supporting
     line, nothing else competing.
   - The product shown at scale rather than described. The alert is the real
     component at ~1.5x, on a broadcast frame — the actual moment a streamer
     is buying.
   - Reveals on scroll, one grammar, everything legible before it animates.

   Arabic is never tracked (see .label in base.css); the tight letter-spacing
   this look depends on is applied to Latin and numerals only. */

html:has(body.cine) { background: #000; }

.cine {
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #6e6e73;
  --live: #ff52a0;
  --money: #2cd69a;
  --hair: #1d1d1f;

  min-height: 100dvh;
  background: #000;
  color: var(--ink);
}

/* ---- header ---------------------------------------------------------- */

.cine .site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  max-width: 1024px;
  margin-inline: auto;
  padding-block: 14px;
  padding-inline: var(--kasb-space-5);
  display: flex;
  align-items: center;
  gap: var(--kasb-space-5);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid var(--hair);
}
.cine .site-header__mark {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.cine .site-header__nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--kasb-space-5);
}
.cine .site-header__link {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
}
.cine .site-header__link:hover { color: var(--ink); }
.cine .site-header__link[aria-current="page"] { color: var(--ink); }
.cine .site-header__cta {
  min-height: 34px;
  padding-block: 6px;
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background: var(--live);
  color: #22071a;
  border-radius: var(--kasb-radius-pill);
}
.cine .site-header__cta:hover { background: #ff74b3; }
@media (max-width: 560px) {
  .cine .site-header { padding-inline: var(--kasb-space-4); gap: var(--kasb-space-4); }
  .cine .site-header__nav { gap: var(--kasb-space-4); }
}

/* ---- chapters -------------------------------------------------------- */

/* One idea per chapter, and the space between them is the composition. */
.chapter {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block: clamp(88px, 15vh, 172px);
  text-align: center;
}
.chapter--tight { padding-block: clamp(56px, 9vh, 104px); }

/* Display type. Arabic carries no tracking; the numerals and Latin inside
   these headings are isolated runs and take their own. */
.display {
  font-size: clamp(38px, 8.4vw, 92px);
  line-height: 1.16;
  font-weight: 600;
  text-wrap: balance;
  margin-inline: auto;
  max-width: 16ch;
}
.display--sm {
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.24;
  max-width: 20ch;
}
.lede {
  margin-block-start: clamp(18px, 2.6vw, 26px);
  margin-inline: auto;
  max-width: 34ch;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  color: var(--ink-2);
}
.lede--wide { max-width: 46ch; }

.actions {
  margin-block-start: clamp(26px, 4vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kasb-space-4);
  justify-content: center;
  align-items: center;
}
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding-inline: 30px;
  border-radius: var(--kasb-radius-pill);
  background: var(--live);
  color: #22071a;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: background var(--kasb-dur-tap) var(--kasb-ease-exit);
}
.cta:hover { background: #ff74b3; }
.cta--ghost {
  background: transparent;
  color: var(--live);
  padding-inline: 4px;
  min-height: auto;
}
.cta--ghost:hover { background: transparent; color: #ff74b3; }
.note {
  margin-block-start: var(--kasb-space-4);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---- the product, at scale ------------------------------------------- */

/* A broadcast frame with the real alert sitting in it. This is the product
   moment, not an illustration of it: same component, same rail, same amount
   pill as public/overlay.css draws in OBS. */
.broadcast {
  margin-block-start: clamp(40px, 7vw, 76px);
  margin-inline: auto;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  border-radius: clamp(12px, 1.6vw, 20px);
  border: 1px solid #26262a;
  /* A real room behind the real component: this is precisely what OBS does
     when it composites the overlay onto a scene, so the hero is the product
     moment photographed rather than an arrangement standing in for it. The
     dark wash keeps the alert the brightest thing in the frame. */
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.5) 100%),
    url("/img/setup.webp");
  background-size: cover;
  background-position: center;
  background-color: #0a0a0c;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 2.2vw, 26px);
}
/* A faint scan of light across the frame, so the surface reads as a screen
   rather than as an empty box. */
.broadcast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, transparent 42%);
  pointer-events: none;
}
.broadcast__caption {
  position: absolute;
  inset-block-start: clamp(12px, 1.8vw, 20px);
  inset-inline-start: clamp(14px, 2.2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.broadcast__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}

.alertx {
  position: relative;
  width: min(420px, 62%);
  border-radius: var(--kasb-radius-md);
  background: rgba(16, 13, 22, 0.93);
  color: #f2eef7;
  padding: 14px 18px;
  padding-inline-start: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  text-align: start;
  overflow: hidden;
}
/* The rail is the silhouette. Leading edge — inline-start is the physical
   right under dir="rtl". */
.alertx::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--live);
}
.alertx__head {
  display: flex;
  align-items: center;
  gap: var(--kasb-space-2);
  margin-block-end: 4px;
}
.alertx__amount {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  background: var(--live);
  color: #22071a;
  border-radius: var(--kasb-radius-pill);
  padding-inline: 10px;
  direction: ltr;
  unicode-bidi: isolate;
}
.alertx__name { font-weight: 600; font-size: 16px; }
.alertx__text { font-size: 16px; line-height: 1.7; }
.alertx__rule {
  margin-block-start: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 82, 160, 0.24);
  overflow: hidden;
}
.alertx__rule::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--live);
  transform-origin: right;
}
/* The rule's depletion is driven by the alert's own lifecycle loop, in the
   MOTION section at the foot of this file — a one-shot `deplete` rule lived
   here until the loop replaced it. */

/* On a phone the frame is ~335px wide and the message wraps to three lines,
   so the alert grew up into the «مباشر» marker. The alert is the content
   here and the marker is scene-setting, so the marker goes and the component
   is set at the smaller end of its real range rather than being cropped. */
@media (max-width: 560px) {
  .broadcast__caption { display: none; }
  .alertx {
    width: 74%;
    padding: 11px 13px;
    padding-inline-start: 17px;
  }
  .alertx__name { font-size: 14px; }
  .alertx__amount { font-size: 13px; }
  .alertx__text { font-size: 14px; line-height: 1.65; }
}

/* ---- the ladder ------------------------------------------------------ */

/* Three amounts, each given a whole band of the page. Not cards: the figure
   is the content, and it is set at display scale so the ladder is read as
   three steps rather than three boxes. */
.ladder {
  border-block-start: 1px solid var(--hair);
  max-width: 1024px;
  margin-inline: auto;
}
.rung {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 7vh, 78px);
  padding-inline: var(--kasb-space-5);
  border-block-end: 1px solid var(--hair);
  text-align: start;
}
@media (max-width: 680px) {
  .rung { grid-template-columns: 1fr; gap: 8px; }
}
.rung__figure {
  font-size: clamp(52px, 11vw, 118px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.rung__unit {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: normal;
  margin-inline-start: 10px;
}
.rung__result {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3;
  font-weight: 600;
}
.rung__hold {
  margin-block-start: 8px;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink-2);
}

/* ---- spec block ------------------------------------------------------ */

/* The register a product page keeps its exact figures in: quiet, dense,
   complete. Everything the cinematic chapters left out lives here rather
   than being dropped. */
.spec {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block: clamp(56px, 9vh, 104px);
  border-block-start: 1px solid var(--hair);
}
.spec__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  margin-block-end: var(--kasb-space-5);
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(110px, 190px) 1fr;
  gap: clamp(12px, 3vw, 40px);
  padding-block: 16px;
  border-block-start: 1px solid var(--hair);
  text-align: start;
}
@media (max-width: 600px) {
  .spec__row { grid-template-columns: 1fr; gap: 4px; }
}
.spec__key { color: var(--ink-3); font-size: 15px; }
.spec__val { color: var(--ink); font-size: 15px; line-height: 1.65; }
.spec__val a { color: var(--live); }
.spec__val strong { color: var(--money); font-weight: 600; }

.marks {
  display: flex;
  gap: var(--kasb-space-2);
  justify-content: center;
  margin-block-start: var(--kasb-space-6);
}
.cine .mark { border-color: #2a2a2e; color: var(--ink-3); }

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

.cine .site-footer {
  max-width: 1024px;
  margin-inline: auto;
  padding-block: var(--kasb-space-6) var(--kasb-space-8);
  padding-inline: var(--kasb-space-5);
  border-block-start: 1px solid var(--hair);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}
.cine .site-footer__legal a { color: var(--ink-3); }

.cine :focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

/* ---- the one authored motion ----------------------------------------- */

/* Each chapter rises into place as it enters. One grammar, one easing, used
   everywhere — not a different effect per section. Content is fully legible
   without it: where `animation-timeline` is unsupported nothing animates and
   nothing is hidden, and the reveal's own start state is 0.25 opacity rather
   than 0 so a mid-scroll capture is never blank. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
  }
}
@keyframes rise {
  from { opacity: 0.25; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ---- full-bleed stills ------------------------------------------------ */

/* Photography at the scale this form uses it: edge to edge, one line of type
   over it, nothing else. The images are atmospheric — they carry mood and
   scene, never a claim. None shows an identifiable face, deliberately: a
   generated person on a pre-launch site reads as a customer, and there are
   no customers yet (PRODUCT.md). They are AI-generated placeholders and are
   on the replacement list for real photography before launch. */
.still {
  position: relative;
  min-height: clamp(420px, 74vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.still__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* The scrim is what makes the type legible over an arbitrary frame — without
   it the contrast floor depends on wherever the photograph happens to be
   bright. Weighted to the centre, where the line sits. */
.still::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 62% at 50% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 62%, transparent 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 46%);
}
.still__body {
  position: relative;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  text-align: center;
}

/* ======================================================================
   MOTION
   ======================================================================

   One easing family, one idea: everything on this page either *arrives*
   (rises and resolves from a blur) or *runs down* (a hold expiring). Nothing
   pulses, bounces or loops for attention. The product's whole proposition is
   that money buys a fixed span of time, so the page's motion vocabulary is
   time passing — the hero loops a real alert's real life, and each rung of
   the ladder empties at its own true duration.

   Every block here sits behind `prefers-reduced-motion: no-preference`, and
   every animated element is fully legible in its resting state, so a reader
   who never triggers any of it loses nothing but the performance. */

/* ---- the hero alert, living its actual life --------------------------- */

/* The real component enters, holds its 15 seconds, leaves, and the frame
   waits before the next one — the exact lifecycle public/overlay.css runs in
   OBS. The cycle is 19s: 0.42s in, 15s held, 0.34s out, then quiet. The held
   segment is not compressed to make the loop snappier; that number is what
   50 ريال buys and shortening it would be a lie told in motion. */
@media (prefers-reduced-motion: no-preference) {
  .alertx {
    animation: alert-life 19s var(--kasb-ease-enter) infinite both;
  }
  .alertx__rule::before {
    animation: rule-life 19s linear infinite both;
  }
}
@keyframes alert-life {
  0% { opacity: 0; transform: translateX(26px); }
  2.2% { opacity: 1; transform: none; }
  81% { opacity: 1; transform: none; }
  83% { opacity: 0; transform: translateX(26px); }
  100% { opacity: 0; transform: translateX(26px); }
}
@keyframes rule-life {
  0%, 2.2% { transform: scaleX(1); }
  81%, 100% { transform: scaleX(0); }
}

/* The live marker breathes rather than blinks — a blink reads as an error
   state, and this is the calmest possible "on air". */
@media (prefers-reduced-motion: no-preference) {
  .broadcast__dot { animation: breathe 2.8s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 82, 160, 0.55); }
  50% { opacity: 0.72; box-shadow: 0 0 0 6px rgba(255, 82, 160, 0); }
}

/* ---- the headline assembles ------------------------------------------ */

/* Word by word, resolving out of a blur rather than sliding: the line reads
   as coming into focus, which is the one moment on the page allowed to feel
   composed rather than mechanical. `--i` carries the word's index so the
   stagger needs no per-word rule. */
.display--stagger .word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .display--stagger .word {
    animation: word-focus 900ms var(--kasb-ease-enter) both;
    animation-delay: calc(var(--i) * 90ms);
  }
}
@keyframes word-focus {
  from { opacity: 0; filter: blur(14px); transform: translateY(18px) scale(0.97); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---- the broadcast frame arrives ------------------------------------- */

/* Scroll-driven: the frame settles up into place and its shadow deepens as
   it enters, the way a device shot lands on a product page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .broadcast {
      animation: frame-settle linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
  }
}
@keyframes frame-settle {
  from { opacity: 0.55; transform: translateY(38px) scale(0.965); }
  to { opacity: 1; transform: none; }
}

/* ---- the ladder empties ---------------------------------------------- */

/* Each rung's meter runs its own tier's true HOLD_MS, passed from the markup
   as --hold. Three bars emptying at 4s, 15s and 60s side by side is the
   ladder taught as duration instead of stated as a number — and it costs
   nothing, because the durations were already in the DOM. */
.rung__meter {
  margin-block-start: 14px;
  height: 3px;
  max-width: 260px;
  border-radius: 2px;
  background: rgba(255, 82, 160, 0.18);
  overflow: hidden;
}
.rung__meter i {
  display: block;
  height: 100%;
  background: var(--live);
  transform-origin: right;
}
@media (prefers-reduced-motion: no-preference) {
  .rung__meter i { animation: meter var(--hold) linear infinite both; }
}
@keyframes meter {
  0% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}

/* The figure arrives from the inline edge as its rung enters, so scrolling
   the ladder feels like dealing three cards rather than revealing a list. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rung__figure {
      animation: figure-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
  }
}
@keyframes figure-in {
  from { opacity: 0.2; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}

/* ---- the stills breathe past ----------------------------------------- */

/* True parallax: the photograph travels slower than the section it sits in,
   so the frame reads as a window rather than a pasted rectangle. Scaled up
   first so the travel never exposes an edge. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .still__img {
      animation: still-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .still__body {
      animation: body-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes still-drift {
  from { transform: scale(1.16) translateY(-5%); }
  to { transform: scale(1.16) translateY(5%); }
}
/* The type drifts the other way and a little further: opposing travel is
   what makes the depth read at all. */
@keyframes body-drift {
  from { transform: translateY(34px); }
  to { transform: translateY(-34px); }
}

/* ---- chrome ---------------------------------------------------------- */

/* The header tightens once the page has moved, the way a product page's nav
   condenses after the hero. Scroll-driven on the root, so it tracks position
   rather than firing on a threshold. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cine .site-header {
      animation: header-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 220px;
    }
  }
}
@keyframes header-condense {
  from { padding-block: 20px; background: rgba(0, 0, 0, 0); border-block-end-color: transparent; }
  to { padding-block: 10px; background: rgba(0, 0, 0, 0.72); border-block-end-color: #1d1d1f; }
}

/* Controls answer the pointer: lift and warm on hover, and actually depress
   on press — a button with no active state feels like an image of a button. */
.cta {
  transition:
    background var(--kasb-dur-tap) var(--kasb-ease-exit),
    transform var(--kasb-dur-tap) var(--kasb-ease-exit),
    box-shadow 200ms var(--kasb-ease-exit);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 82, 160, 0.34); }
.cta:active { transform: translateY(0) scale(0.985); box-shadow: none; }
.cta--ghost:hover { transform: none; box-shadow: none; }

.spec__row { transition: background 180ms var(--kasb-ease-exit); }
.spec__row:hover { background: rgba(255, 255, 255, 0.028); }

@media (prefers-reduced-motion: reduce) {
  .cta:hover, .cta:active { transform: none; }
}

/* ======================================================================
   THE OTHER PAGES
   ======================================================================

   Pricing, the FAQ and the legal drafts, in the same world. They were built
   in the light world that `packages/tokens/palette.ts` scopes to checkout
   and the creator page; when the landing page became black, clicking
   التسعير from it jumped worlds mid-visit.

   These are the same components, restated in this palette — not the light
   ones with colours patched over. The light rules were deleted rather than
   overridden, and `.hero`, `.tiers` and `.steps` went with them: they
   belonged to the replaced home page and nothing referenced them any more.

   The site is now one stylesheet. Checkout, the overlay and the streamer app
   are untouched and keep their own. */

/* ---- page head (pricing, FAQ, legal) --------------------------------- */

.page-head {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block: clamp(56px, 11vh, 120px) clamp(28px, 4vw, 44px);
}
.page-head__title {
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.18;
  font-weight: 600;
  text-wrap: balance;
}
.page-head__lede {
  margin-block-start: clamp(16px, 2.4vw, 22px);
  max-width: 46ch;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
}
.page-head__badge { margin-block-start: clamp(22px, 3vw, 30px); }

/* The launch offer. Not a status pill — that component reports the state of
   real money (packages/ui/ui.css), and an offer is neither a status nor
   money that exists. */
.offer-pill {
  display: inline-block;
  border-radius: var(--kasb-radius-pill);
  padding-block: 8px;
  padding-inline: 18px;
  background: rgba(255, 82, 160, 0.13);
  color: var(--live);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- sections -------------------------------------------------------- */

.section {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block: clamp(44px, 7vh, 84px);
  border-block-start: 1px solid var(--hair);
}
.section__title {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.32;
  font-weight: 600;
  margin-block-end: clamp(20px, 3vw, 30px);
}
.section__note {
  margin-block-start: var(--kasb-space-5);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ---- the rates table (pricing) --------------------------------------- */

/* A table, not three cards: the reader's question is "what do I keep", and
   that is a comparison down a column. */
.rates__scroll { overflow-x: auto; }
.rates {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rates__caption {
  caption-side: bottom;
  margin-block-start: var(--kasb-space-4);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: start;
}
.rates th,
.rates td {
  padding-block: clamp(16px, 2.4vw, 22px);
  padding-inline: var(--kasb-space-3);
  border-block-end: 1px solid var(--hair);
  text-align: start;
}
.rates thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  padding-block: 10px;
}
.rates tbody tr:last-child th,
.rates tbody tr:last-child td { border-block-end: 0; }
.rates__tier { font-weight: 600; white-space: nowrap; font-size: clamp(17px, 2.2vw, 21px); }
/* The amount never appears without its result — the rule `.amount-chip`
   enforces on checkout, applied to a table row. */
.rates__result {
  display: block;
  margin-block-start: 4px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--live);
}
.rates__take { font-weight: 600; font-size: clamp(17px, 2.2vw, 21px); }
.rates tbody tr { transition: background 180ms var(--kasb-ease-exit); }
.rates tbody tr:hover { background: rgba(255, 255, 255, 0.028); }

/* ---- the money facts (pricing) --------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kasb-space-4);
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
}
.cine .card {
  background: #0c0c0e;
  border-color: var(--hair);
  padding: clamp(18px, 2.6vw, 24px);
}
.fact__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  margin-block-end: var(--kasb-space-2);
}
.fact__body { font-size: 15px; line-height: 1.75; color: var(--ink); }

/* ---- the FAQ --------------------------------------------------------- */

.faq { display: flex; flex-direction: column; }
.faq__item { border-block-end: 1px solid var(--hair); }
.faq__item:first-child { border-block-start: 1px solid var(--hair); }
.faq__q {
  padding-block: clamp(18px, 2.6vw, 24px);
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 600;
  cursor: pointer;
  /* The default marker is an LTR triangle that anchors to the wrong side in
     RTL; keeping it inside the line lets it flip with the paragraph. */
  list-style-position: inside;
  transition: color 160ms var(--kasb-ease-exit);
}
.faq__q:hover { color: var(--live); }
.faq__a {
  padding-block-end: clamp(18px, 2.6vw, 24px);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: var(--kasb-space-3);
  max-width: 68ch;
}
.faq__a a { color: var(--live); }
.faq__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kasb-space-2);
}
.faq__list li {
  padding-inline-start: var(--kasb-space-3);
  border-inline-start: 2px solid var(--hair);
}

/* Available to a screen reader, absent from the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the legal drafts ------------------------------------------------ */

.legal {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block-end: clamp(56px, 9vh, 104px);
}
.legal .page-head { padding-inline: 0; }
.legal__section { margin-block-start: clamp(36px, 5vh, 56px); }
.legal__heading {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  margin-block-end: var(--kasb-space-3);
}
.legal__section p { margin-block-end: var(--kasb-space-3); color: var(--ink-2); max-width: 68ch; }
.legal__section p:last-child { margin-block-end: 0; }
.legal__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kasb-space-2);
  color: var(--ink-2);
  max-width: 68ch;
}
.legal__list li {
  padding-inline-start: var(--kasb-space-3);
  border-inline-start: 2px solid var(--hair);
}
.legal__section strong { color: var(--ink); }

/* An undecided clause: visibly not prose, so a reader skimming cannot
   mistake it for a settled paragraph. Amber, because it is a warning about
   the document rather than part of it. */
.legal__open {
  border: 1px dashed #8a6a1f;
  border-radius: var(--kasb-radius-md);
  padding: clamp(16px, 2.4vw, 22px);
  background: rgba(242, 177, 58, 0.05);
  max-width: 68ch;
}
.legal__open-label {
  font-size: 13px;
  font-weight: 600;
  color: #e8b44a;
  margin-block-end: var(--kasb-space-2);
}
.legal__open p:last-child { color: var(--ink-2); margin-block-end: 0; }

.legal__draft {
  margin-block-start: var(--kasb-space-5);
  border: 1px solid #8a6a1f;
  border-radius: var(--kasb-radius-md);
  padding: clamp(16px, 2.4vw, 22px);
  color: var(--ink-2);
  max-width: 68ch;
}
.legal__draft strong { color: #e8b44a; }

/* ---- the shared closing ---------------------------------------------- */

.closing {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--kasb-space-5);
  padding-block: clamp(64px, 11vh, 128px);
  border-block-start: 1px solid var(--hair);
  text-align: center;
}
.closing__title {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.28;
  font-weight: 600;
}
.closing__body {
  margin-block: var(--kasb-space-3) var(--kasb-space-6);
  color: var(--ink-2);
}
.closing__alt {
  margin-block-start: var(--kasb-space-4);
  font-size: 14px;
  color: var(--ink-3);
}
.closing__alt a { color: var(--live); }

/* The reason registration is not open, standing where the primary action
   would be. Sized up from `.note`'s footnote scale because it is the answer
   to the question the hero just raised, not an aside about the example
   below it. */
.note--reason {
  margin-block-start: clamp(22px, 3vw, 30px);
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink-2);
  max-width: 44ch;
  margin-inline: auto;
}