/* ==========================================================================
   Cyber City · lease partners (theme 0.68.0, Rayan 28 Oct 2026: Acima first, more to come; inc/lease.php)
   The prototype he approved: 09-التصميم/pages/acima/proto/ (B on the home page and on /lease-to-own/, A at checkout).
   Loaded only on a page that prints a partner (the home page, the checkout, /lease-to-own/), after that page's own
   sheet. Every colour, font, radius and space is a token; the only written lengths are hairlines and breakpoints.
   Day and Night: the strip, #lease's left panel and card B are dark in both (.ecc-ctx-panel); card A takes the
   checkout card's own surface, with the spark (lime ink by day, lime at night) for its edge and its numbers.

   Contents
   0 shared (the logo, the lit words, the other partners) · 1 the home strip · 2 #lease with a partner (B)
   3 card A at checkout · 4 card B on /lease-to-own/
   ========================================================================== */

/* =============================================================== 0 · SHARED */
/* A partner's logo is white, for a dark panel; 34 px high (its width follows). With no logo, its name in mono. */
.ecc-lease-logo { display: block; width: auto; height: calc(var(--ecc-s-6) + 2px); max-width: 100%; }
.ecc-lease-logo--name { height: auto; color: var(--ecc-ink); font-size: var(--ecc-t-label); }
.ecc-lease-lit { color: var(--ecc-spark); }

/* the other partners of a place: «Or apply with», then small logos, each its own link (44 px tall, theme 0.68.1) */
.ecc-lease-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-3); min-width: 0; }
.ecc-lease-more__k { margin: 0; color: var(--ecc-ink-2); }
.ecc-lease-more__list { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-lease-more__a {
  display: inline-flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3); color: var(--ecc-ink); text-decoration: none;
  border-radius: var(--ecc-r-sm); box-shadow: inset 0 0 0 1px var(--ecc-line-strong);
}
.ecc-lease-more__a svg { flex: none; color: var(--ecc-ink-2); }
.ecc-lease-more__logo { display: block; width: auto; height: var(--ecc-s-5); }
@media (hover: hover) and (pointer: fine) { .ecc-lease-more__a:hover { background: var(--ecc-wash); } }

/* ======================================================== 1 · THE HOME STRIP */
/* Right under the first screen, one gap below it, full width: dark in Day and in Night, the lime dot grid on its right
   edge. Phone: the parts stack. Tablet: the logo row, then the words and the button side by side. Wide: one row. */
.ecc-lstrip {
  display: grid; gap: var(--ecc-s-4); margin-top: var(--ecc-gap); padding: var(--ecc-s-5);
  overflow: hidden; isolation: isolate;
  grid-template-areas: "brand" "say" "acts" "fine" "more";
}
.ecc-lstrip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: conic-gradient(at 2px 2px, transparent 75%, color-mix(in srgb, var(--ecc-lime) 26%, transparent) 0);
  background-size: var(--ecc-s-3) var(--ecc-s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, var(--ecc-panel));
  mask-image: linear-gradient(90deg, transparent 40%, var(--ecc-panel));
}
.ecc-lstrip__brand { grid-area: brand; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-4); min-width: 0; }
.ecc-lstrip__kicker { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }
.ecc-lstrip__say { grid-area: say; display: grid; gap: var(--ecc-s-2); min-width: 0; }
.ecc-lstrip__title { margin: 0; max-width: 20em; text-wrap: balance; color: var(--ecc-ink); }
.ecc-lstrip__line { margin: 0; max-width: 38em; color: var(--ecc-ink); line-height: var(--ecc-lh-body); text-wrap: pretty; }
.ecc-lstrip__acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-5); min-width: 0; }
.ecc-lstrip__how { color: var(--ecc-ink); }
.ecc-lstrip__fine {
  grid-area: fine; margin: 0; padding-top: var(--ecc-s-3); border-top: 1px solid var(--ecc-line);
  max-width: none; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: var(--ecc-lh-body);
}
.ecc-lstrip .ecc-lease-more { grid-area: more; }

@media (min-width: 761px) {
  .ecc-lstrip {
    padding: var(--ecc-s-5) var(--ecc-s-6); column-gap: var(--ecc-s-6);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand brand" "say acts" "fine fine" "more more";
    align-items: center;
  }
  .ecc-lstrip__acts { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1181px) {
  .ecc-lstrip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand say acts" "more fine fine";
    row-gap: var(--ecc-s-4);
  }
  .ecc-lstrip__brand { flex-direction: column; align-items: flex-start; padding-right: var(--ecc-s-6); align-self: stretch; justify-content: center; border-right: 1px solid var(--ecc-line); }
  .ecc-lstrip__acts { flex-direction: row; align-items: center; }
  .ecc-lstrip .ecc-lease-more { align-self: start; }
}

/* ============================================ 2 · #LEASE WITH A PARTNER (B) */
/* The left panel: logo, headline, line, the button, «Rather apply in person?». The right: four steps (four across on
   a wide screen, one column on a phone), the disclosure, «Apply with Acima». */
.ecc-lease__with { margin-bottom: var(--ecc-s-2); }
.ecc-lease__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); margin: var(--ecc-s-2) 0 0; }
.ecc-lease__fine { margin: 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: var(--ecc-lh-body); }
.ecc-lease__in .ecc-lease-more { margin-top: var(--ecc-s-1); }
@media (min-width: 1181px) {
  .ecc-steps.ecc-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================= 3 · CARD A AT CHECKOUT */
/* In the "Easy to own" tab, above the in-store block: a lime edge, the kicker, the partner's own banner as the link,
   three numbered lines and the disclosure. Hidden with any other tab (checkout-steps.js). */
.ecc-ck-lease { display: grid; gap: var(--ecc-s-2); min-width: 0; }
.ecc-ck-lease[hidden] { display: none; }
.ecc-leasea {
  min-width: 0; padding: var(--ecc-s-3) calc(var(--ecc-s-3) + 2px);
  border: 1px solid color-mix(in srgb, var(--ecc-spark) 55%, transparent); border-radius: var(--ecc-r);
  background: color-mix(in srgb, var(--ecc-lime) 6%, transparent);
}
.ecc-leasea__k { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0 0 var(--ecc-s-3); color: var(--ecc-ink); }
.ecc-leasea__k .ecc-pip { width: 7px; height: 7px; background: var(--ecc-lime); }
.ecc-leasea__ban { position: relative; display: block; border-radius: var(--ecc-r-sm); line-height: 0; }
.ecc-leasea__ban::after { content: ""; position: absolute; inset: calc(var(--ecc-s-1) * -1) 0; } /* a 44 px tap area round a banner that is shorter */
.ecc-leasea__ban img { display: block; width: 100%; height: auto; border-radius: var(--ecc-r-sm); }
.ecc-leasea__ban:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
.ecc-leasea__go { margin-top: var(--ecc-s-1); white-space: normal; }
.ecc-leasea__ban[hidden], .ecc-leasea__go[hidden] { display: none; } /* the banner, or the button in its place (0.68.2) */
.ecc-leasea__steps { display: grid; gap: calc(var(--ecc-s-1) * 1.5); margin: var(--ecc-s-3) 0 0; padding: 0; list-style: none; counter-reset: ecc-leasea; }
.ecc-leasea__steps li {
  counter-increment: ecc-leasea; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ecc-s-3);
  color: var(--ecc-ink); font-size: var(--ecc-t-small); line-height: 1.4;
}
.ecc-leasea__steps li::before {
  content: counter(ecc-leasea, decimal-leading-zero); min-width: calc(var(--ecc-s-5) - 2px);
  font-family: var(--ecc-f-mono); font-weight: var(--ecc-fw-strong); font-size: var(--ecc-t-micro); line-height: 1.75; color: var(--ecc-spark);
}
.ecc-leasea__d { margin: var(--ecc-s-3) 0 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-micro); line-height: 1.45; }

/* ===================================================== 4 · CARD B ON /lease-to-own/ */
/* After the page's first line: a dark card (in Day and in Night), its own wrapper, no h2, so the policy page's
   numbered headings, list padding and link style never reach it (each rule here is one step stronger than
   policy.css's .ecc-pol__text p / ol / a). */
.ecc-pol__text > .ecc-leaseb { margin: var(--ecc-s-3) 0; }
.ecc-leaseb {
  position: relative; display: grid; gap: var(--ecc-s-5); min-width: 0; padding: var(--ecc-s-5);
  border-radius: var(--ecc-r); background: var(--ecc-panel); color: var(--ecc-ink); box-shadow: var(--ecc-elev-module);
  overflow: hidden; isolation: isolate;
}
.ecc-leaseb::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: conic-gradient(at 2px 2px, transparent 75%, color-mix(in srgb, var(--ecc-lime) 20%, transparent) 0);
  background-size: var(--ecc-s-3) var(--ecc-s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, var(--ecc-panel));
  mask-image: linear-gradient(90deg, transparent 30%, var(--ecc-panel));
}
.ecc-leaseb .ecc-leaseb__say { min-width: 0; }
.ecc-leaseb .ecc-leaseb__with { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-3); margin: 0; color: var(--ecc-ink-2); line-height: 1.4; }
.ecc-leaseb .ecc-leaseb__h {
  margin: var(--ecc-s-4) 0 0; color: var(--ecc-ink); text-wrap: balance;
  font-size: var(--ecc-t-h1); line-height: var(--ecc-lh-display); letter-spacing: var(--ecc-ls-display);
  font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display);
}
.ecc-leaseb .ecc-leaseb__acts { margin: var(--ecc-s-5) 0 0; }
.ecc-leaseb .ecc-btn { color: var(--_fg); text-decoration: none; }
.ecc-leaseb .ecc-btn::after { content: none; }
.ecc-leaseb .ecc-leaseb__fine { margin: var(--ecc-s-4) 0 0; max-width: 46ch; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.5; }
.ecc-leaseb .ecc-leaseb__steps { display: grid; gap: var(--ecc-s-3); align-content: center; margin: 0; padding: 0; list-style: none; }
.ecc-leaseb .ecc-leaseb__steps li {
  display: grid; grid-template-columns: calc(var(--ecc-s-6) + 2px) minmax(0, 1fr); gap: var(--ecc-s-3); align-items: baseline;
  color: var(--ecc-ink); font-size: var(--ecc-t-body-lg); font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); line-height: 1.3;
}
.ecc-leaseb .ecc-leaseb__n {
  font-family: var(--ecc-f-dot); font-variation-settings: var(--ecc-dot-settings); font-weight: var(--ecc-fw-dot);
  font-size: var(--ecc-t-h3); line-height: 1; color: var(--ecc-spark);
}
@media (min-width: 761px) {
  .ecc-leaseb { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--ecc-s-6); padding: calc(var(--ecc-s-5) + var(--ecc-s-1)); }
}

@media print {
  .ecc-lstrip::before, .ecc-leaseb::after { content: none; }
}