/* Early-access page of a product in development (layouts/_default/early-access.html).
   Tokens come from critical.css (:root). Brand-coloured text uses
   --color-primary-dark: #5c65f5 is 4.0:1 on the tinted backgrounds, below WCAG
   AA, and Lighthouse accessibility is a required check. */

.ea-wrap { max-width: var(--max-width-content, 1200px); margin: 0 auto; padding: 0 24px; }
.ea-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; }
.ea-btn:focus-visible { outline: 3px solid #A5ABFF; outline-offset: 2px; }
.ea-btn--primary { background: var(--color-primary-dark); color: #fff; box-shadow: 0 8px 20px rgba(68, 73, 207, .28); }
.ea-btn--primary:hover { background: var(--color-primary-darker); }

/* ── Hero: the promise and the one action on the left, the 3D floor plan on the right ── */
.ea-hero { padding: 40px 0 64px; background: linear-gradient(180deg, #F5F6FF 0%, #fff 100%); }
.ea-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: center; gap: 48px; }
.ea-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 14px; color: var(--color-text-muted); }
.ea-crumbs a { color: var(--color-primary-dark); text-decoration: none; }
.ea-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.ea-title { margin: 0 0 14px; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.015em; color: var(--color-text); }
.ea-lead { margin: 0 0 24px; max-width: 560px; font-size: 19px; line-height: 1.55; color: var(--color-text-secondary); }
.ea-note { margin: 12px 0 0; font-size: 14.5px; color: var(--color-text-muted); }

/* A real capture of the app, at most its own CSS size (the files are 2x). */
.ea-frame { margin: 0; }
.ea-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border-light); border-radius: 14px; box-shadow: 0 18px 40px rgba(29, 32, 136, .10); background: #fff; }
.ea-frame figcaption { margin-top: 10px; font-size: 14px; color: var(--color-text-muted); }
.ea-frame--hero { margin-top: 28px; }

/* ── Sections ── */
.ea-section { padding: 64px 0; }
.ea-section--tint { background: var(--color-bg-section); }
.ea-h2 { margin: 0 0 20px; font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--color-text); }
/* Picture blocks: the bullets on one side, the picture on the other, as in the hero. */
.ea-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: center; gap: 48px; }
.ea-split--flip { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.ea-split--flip > .ea-frame { order: -1; }
.ea-section + .ea-section:not(.ea-section--tint) { padding-top: 16px; }
.ea-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }

.ea-ticks, .ea-dots { margin: 0; padding: 0; list-style: none; }
.ea-ticks li, .ea-dots li { position: relative; margin-bottom: 12px; padding-left: 30px; font-size: 17px; line-height: 1.5; color: var(--color-text); }
.ea-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ea-dots li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); }
.ea-ticks a { color: var(--color-primary-dark); font-weight: 600; }
.ea-ticks--join { margin-bottom: 28px; }

@media (max-width: 1024px) {
  .ea-hero__grid, .ea-split, .ea-columns { grid-template-columns: 1fr; }
  .ea-split .ea-frame { max-width: 600px; }
  .ea-split--flip > .ea-frame { order: 0; }
  .ea-frame--hero { max-width: 600px; margin-top: 0; }
}
@media (max-width: 640px) {
  .ea-wrap { padding: 0 16px; }
  .ea-title { font-size: 32px; }
  .ea-lead { font-size: 17px; }
  .ea-hero { padding-bottom: 48px; }
  .ea-section { padding: 48px 0; }
  .ea-h2 { font-size: 24px; }
  .ea-ticks li, .ea-dots li { font-size: 16px; }
  .ea-btn { width: 100%; }
}