/* attorney-event.css: /en/attorneys/join/, the attorney event page.
   Loaded only by pages/attorney_event.html. Mobile first (375-390px is the
   main audience: attorneys at an expo, on a phone). Builds on main.css
   tokens (brand, asphalt, Outfit / DM Sans). Design reference:
   design/design_handoff_attorney_advertise. */

.ae {
  --ae-orange: var(--brand, #f47c1f);
  --ae-orange-hover: #e06e14;
  --ae-orange-deep: #c45f11;
  --ae-orange-soft: #f9a15c;
  --ae-tint: #fdeee2;
  --ae-ink: #111827;
  --ae-night: #0c1017;
  --ae-night-2: #151b26;
  --ae-paper: #f4f2ee;
  --ae-line: #e6e2da;
  --ae-muted: #4b5563;
  --ae-dim: #aab2bf;
  --ae-pad: clamp(20px, 5vw, 72px);
  --ae-section: clamp(56px, 8vw, 112px);
  --ae-stripes: repeating-linear-gradient(-18deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 8px);
  font-family: var(--font-body);
  color: var(--ae-ink);
  /* Full bleed out of base.html's narrow <main> (max-w, px-4, py-6),
     the same pattern as .am in attorney-marketing.css. */
  margin: -1.5rem calc(50% - 50vw);
  /* Also cover the footer's mt-8, so the last dark section meets it. */
  margin-bottom: -3.5rem;
  overflow-x: clip;
}

.ae *, .ae *::before, .ae *::after { box-sizing: border-box; }
.ae h1, .ae h2, .ae h3 { font-family: var(--font-display); margin: 0; }
.ae p { margin: 0; }
.ae [id] { scroll-margin-top: 5rem; }

.ae-wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--ae-pad));
  margin: 0 auto;
  padding: 0 var(--ae-pad);
}

.ae-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ── Shared type ───────────────────────────────────────────────────────── */

.ae-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ae-orange-deep);
  margin-bottom: 0.75rem !important;
}
.ae-dark .ae-eyebrow { color: var(--ae-orange); }

.ae-h2 {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ae-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 44rem; }
.ae-head__sub {
  margin-top: 0.9rem !important;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ae-muted);
}
.ae-dark .ae-head__sub { color: #c3cad6; }

.ae-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
}
.ae-head__aside {
  max-width: 21rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ae-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ae-btn .ae-icon { width: 1.1rem; height: 1.1rem; }
.ae-btn--primary {
  background: var(--ae-orange);
  color: var(--ae-ink);
  box-shadow: 0 14px 34px -12px rgba(244, 124, 31, 0.75);
}
.ae-btn--primary:hover { background: var(--ae-orange-hover); color: var(--ae-ink); }
.ae-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.ae-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.ae-btn--small { min-height: 50px; }

/* ── 1. Hero ───────────────────────────────────────────────────────────── */

.ae-hero {
  position: relative;
  color: #fff;
  padding: clamp(36px, 6vw, 80px) 0 clamp(44px, 6vw, 88px);
  background:
    radial-gradient(ellipse 70% 45% at 20% 22%, rgba(244, 124, 31, 0.24), rgba(244, 124, 31, 0.05) 55%, transparent 75%),
    radial-gradient(ellipse 45% 45% at 80% 45%, rgba(244, 124, 31, 0.12), transparent 70%),
    var(--ae-stripes),
    linear-gradient(180deg, var(--ae-night-2) 0%, var(--ae-night) 100%);
}

.ae-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px clamp(32px, 4vw, 64px);
}
.ae-hero__copy {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.ae-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 124, 31, 0.45);
  background: rgba(244, 124, 31, 0.1);
  color: var(--ae-orange-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ae-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ae-orange);
  box-shadow: 0 0 0 3px rgba(244, 124, 31, 0.25);
}

.ae-hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: #fff;
}
.ae-hero__title em { font-style: normal; color: var(--ae-orange); }

.ae-hero__sub {
  max-width: 31rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: #c3cad6;
}

.ae-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 29rem;
  padding-top: 0.25rem;
}
.ae-hero__ctas .ae-btn { flex: 1 1 200px; }

/* Phones. On a phone only the website phone shows, cropped and faded, so the
   first screen is headline and buttons, not a picture of a phone. */
.ae-hero__visual {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  height: 300px;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 72%, transparent);
          mask: linear-gradient(180deg, #000 72%, transparent);
}

.ae-phone {
  position: absolute;
  padding: 7px;
  background: #05070a;
  border-radius: 38px;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ae-phone__screen {
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: #fff;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ae-phone--site {
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  width: 250px;
  aspect-ratio: 9 / 19.5;
}
.ae-phone--reel { display: none; }

.ae-site-bar {
  padding: 4px 2px 8px;
  border-bottom: 1px solid #eef0f3;
}
.ae-site-bar img { display: block; height: 20px; width: auto; }

.ae-alert {
  border-radius: 14px;
  padding: 11px 12px;
  background: linear-gradient(160deg, #1a2230, #0c1017);
  color: #fff;
}
.ae-alert__kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ae-orange-soft);
}
.ae-alert__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ae-orange); }
.ae-alert__place { margin-top: 4px !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ae-alert__time { font-size: 11px; color: #c3cad6; }

.ae-mock-card {
  border: 1.5px solid var(--ae-orange);
  background: #fffaf5;
  border-radius: 14px;
  padding: 9px 10px 10px;
}
.ae-mock-card__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ae-orange-deep);
  margin-bottom: 6px !important;
}
.ae-mock-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ae-mock-card__logo {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--ae-ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.ae-mock-card__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ae-mock-card__name { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ae-ink); }
.ae-mock-card__meta { font-size: 10.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-mock-card__call {
  flex: 1 0 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--ae-orange);
  color: var(--ae-ink);
  font-size: 11px;
  font-weight: 700;
}
.ae-mock-card__call .ae-icon { width: 12px; height: 12px; }

.ae-skel { display: grid; gap: 7px; padding: 4px 2px; }
.ae-skel span { height: 8px; border-radius: 4px; background: #eceef2; }
.ae-skel span.is-short { width: 60%; }

.ae-phone__screen--reel { padding: 0; position: relative; background: #1a212d; }
.ae-phone__screen--reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-reel-tag {
  position: absolute;
  left: 12px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.ae-reel-tag .ae-icon { width: 13px; height: 13px; }

/* Stats: drive from config; flex-wrap takes 2, 3 or 4 tiles. */
.ae-stats {
  list-style: none;
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(24px, 3vw, 48px);
}
.ae-stat {
  flex: 1 1 140px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ae-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #fff;
}
.ae-stat__suffix { color: var(--ae-orange); }
.ae-stat__label { font-size: 0.95rem; line-height: 1.35; color: var(--ae-dim); }

/* ── Light / dark sections ─────────────────────────────────────────────── */

.ae-light {
  background: var(--ae-paper);
  color: var(--ae-ink);
  padding: var(--ae-section) 0;
}
.ae-dark {
  color: #fff;
  padding: var(--ae-section) 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 62%, rgba(244, 124, 31, 0.16), transparent 70%),
    var(--ae-stripes),
    linear-gradient(180deg, var(--ae-night), var(--ae-night-2));
}

/* ── 2. What's included ────────────────────────────────────────────────── */

.ae-channels { display: flex; flex-wrap: wrap; gap: 16px; }
.ae-channel {
  flex: 1 1 380px;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 40px);
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--ae-line);
}
.ae-channel--dark {
  color: #fff;
  border-color: transparent;
  background: radial-gradient(circle at 100% 0%, rgba(244, 124, 31, 0.3), transparent 55%), var(--ae-ink);
}
.ae-channel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ae-channel__head > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ae-channel__tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ae-tint);
  color: var(--ae-orange-deep);
}
.ae-channel--dark .ae-channel__tile { background: rgba(244, 124, 31, 0.16); color: var(--ae-orange); }
.ae-channel__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}
.ae-channel--dark .ae-channel__kicker { color: var(--ae-dim); }
.ae-channel__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
}

.ae-items { list-style: none; margin: 0; padding: 0; }
.ae-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid #ebe7df;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ae-muted);
}
.ae-item:last-child { padding-bottom: 0; }
.ae-item .ae-icon { color: var(--ae-orange-deep); margin-top: 2px; }
.ae-item strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ae-ink);
}
.ae-channel--dark .ae-item { border-top-color: rgba(255, 255, 255, 0.1); color: var(--ae-dim); }
.ae-channel--dark .ae-item .ae-icon { color: var(--ae-orange); }
.ae-channel--dark .ae-item strong { color: #fff; }

.ae-chip {
  display: table;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(244, 124, 31, 0.16);
  color: var(--ae-orange-soft);
}

/* ── 3. Collaborations ─────────────────────────────────────────────────── */

/* Horizontal swipe with snap; bleeds to the screen edge on phones. */
.ae-reels {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--ae-pad));
  padding: 4px var(--ae-pad) 8px;
  scroll-padding-left: var(--ae-pad);
}
.ae-reels::-webkit-scrollbar { display: none; }

.ae-reels .reel-card {
  flex: 0 0 min(74%, 300px);
  max-width: 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ae-reels .reel-card__media {
  border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.ae-reels .reel-card__caption { padding: 1rem 1rem 1.1rem; }
.ae-reels .reel-card__partner { font-size: 0.75rem; }
.ae-reels .reel-card__title { font-size: 1.05rem; }
/* Instagram covers carry their own play icon at dead centre; sit on top of it
   so the card never shows two. */
.ae-reels .reel-card__play { top: 50%; width: 4.25rem; height: 4.25rem; background: rgba(12, 16, 23, 0.72); border: 1px solid rgba(255, 255, 255, 0.35); }
.ae-reels .reel-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--ae-dim);
  font-size: 0.85rem;
}
/* "Attorney profile" is the point of the card here: make it a real button. */
.ae-reels .reel-card__profile {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(244, 124, 31, 0.55);
  background: rgba(244, 124, 31, 0.12);
  color: var(--ae-orange-soft);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.ae-reels .reel-card__profile:hover { background: rgba(244, 124, 31, 0.22); color: #fff; }

.ae-collabs__more { margin-top: clamp(24px, 3vw, 36px) !important; }

/* ── 4. Search and AI ──────────────────────────────────────────────────── */

.ae-found__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px clamp(40px, 7vw, 112px);
}
.ae-found__phone {
  position: relative;
  flex: 0 1 320px;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}
.ae-found__phone::before {
  content: "";
  position: absolute;
  inset: -8% -20%;
  background: radial-gradient(ellipse at center, rgba(244, 124, 31, 0.22), transparent 65%);
}
.ae-phone--steps { position: relative; border-radius: 44px; padding: 9px; }
.ae-phone--steps .ae-phone__screen { border-radius: 36px; padding: 18px 14px; gap: 0; }

.ae-zone { position: relative; padding: 0 0 14px 34px; margin-bottom: 14px; border-bottom: 1px dashed #e5e7eb; }
.ae-zone--last { border-bottom: 0; margin-bottom: 0; padding-bottom: 2px; }
.ae-zone__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ae-ink);
  color: var(--ae-orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}
.ae-zone__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px !important;
}
.ae-zone__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 8px !important; }
.ae-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ae-search .ae-icon { width: 14px; height: 14px; color: #9ca3af; }
.ae-bubble {
  margin: 8px 0 0 auto !important;
  width: fit-content;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 16px 16px 4px 16px;
  background: var(--ae-ink);
  color: #fff;
  font-size: 12px;
}
.ae-mock-card--flat { background: #fffaf5; }
.ae-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--ae-orange);
  color: var(--ae-ink);
  font-weight: 700;
  font-size: 14px;
}
.ae-dial .ae-icon { width: 16px; height: 16px; }

.ae-steps { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.ae-step {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid #d9d4cb;
}
.ae-step:last-child { border-bottom: 1px solid #d9d4cb; }
.ae-step__n {
  flex: none;
  width: 1.3em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ae-orange-deep);
}
.ae-step__title { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.ae-step p { font-size: 1rem; line-height: 1.5; color: var(--ae-muted); }

.ae-proof {
  margin-top: clamp(32px, 4vw, 56px);
  border-radius: 20px;
  background: var(--ae-ink);
  color: #fff;
}
.ae-proof__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 20px 22px;
}
.ae-proof__summary::-webkit-details-marker { display: none; }
.ae-proof__icon { color: var(--ae-orange); display: flex; }
.ae-proof__text { flex: 1 1 16rem; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.ae-proof__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.85rem;
  font-weight: 700;
  color: #d3d8e0;
}
.ae-proof__toggle .ae-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ae-proof[open] .ae-proof__toggle .ae-icon { transform: rotate(180deg); }
.ae-proof__list {
  margin: 0;
  padding: 0 22px 22px 44px;
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #c3cad6;
}
.ae-proof__list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ── 5. Request access ─────────────────────────────────────────────────── */

.ae-access {
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(244, 124, 31, 0.28), rgba(244, 124, 31, 0.05) 60%, transparent 80%),
    var(--ae-stripes),
    linear-gradient(180deg, var(--ae-night-2), var(--ae-night));
}
.ae-access__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ae-access__cone {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1rem;
  filter: drop-shadow(0 8px 24px rgba(244, 124, 31, 0.35));
}
.ae-access .ae-head__sub { max-width: 30rem; }

/* The shared gate card (partials/advertise_gate_card.html), skinned here. */
.ae-gate {
  margin-top: 2rem;
  max-width: 35rem;
  text-align: left;
}
.ae-gate .adv-gate__tabs { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.ae-gate .adv-gate__tab { min-height: 44px; white-space: nowrap; }
.ae-gate .adv-gate__tab.is-active { color: var(--ae-ink); box-shadow: 0 8px 22px -8px rgba(244, 124, 31, 0.7); }
.ae-gate .adv-gate__card {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
  background: rgba(9, 12, 18, 0.9);
  border-color: rgba(244, 124, 31, 0.25);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.ae-gate .adv-gate__card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.ae-gate .adv-gate__card-lead { margin-bottom: 1.35rem; }
/* 16px text stops iOS Safari zooming in when a field gets focus. */
.ae-gate .adv-gate__input {
  min-height: 50px;
  font-size: 16px;
  border-radius: 12px;
  background: var(--ae-night);
  border-color: rgba(255, 255, 255, 0.14);
}
.ae-gate .adv-gate__submit { min-height: 54px; color: var(--ae-ink); }
.ae-gate .adv-gate__submit--ghost { color: #fff; }
.ae-gate__link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ae-gate__link:hover { color: var(--ae-ink); }

.ae-disclaimer {
  margin-top: 2.25rem !important;
  max-width: 30rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #8b93a3;
}

/* ── Headline switcher (Garden sessions only, temporary) ───────────────── */

.ae-switcher {
  position: fixed;
  left: 12px;
  bottom: 88px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ae-ink, #111827);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  font-weight: 700;
}
.ae-switcher__opt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  color: inherit;
  text-decoration: none;
}
.ae-switcher__opt.is-active { background: #f47c1f; border-color: #f47c1f; }
.ae-switcher__note { display: none; font-weight: 500; color: #6b7280; }

/* ── Wider screens ─────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .ae-hero__visual { height: 360px; }
  .ae-phone--site { width: 270px; }
}

@media (min-width: 900px) {
  .ae-hero__visual {
    height: clamp(420px, 44vw, 560px);
    -webkit-mask: linear-gradient(180deg, #000 78%, transparent);
            mask: linear-gradient(180deg, #000 78%, transparent);
  }
  .ae-phone--site {
    left: 4%;
    transform: none;
    top: 44px;
    width: clamp(230px, 22vw, 288px);
  }
  .ae-hero__visual--single .ae-phone--site { left: 50%; transform: translateX(-50%); }
  .ae-phone--reel {
    display: block;
    right: clamp(20px, 4vw, 60px);
    top: 30px;
    width: clamp(190px, 18vw, 236px);
    aspect-ratio: 9 / 19.5;
    transform: rotate(6deg);
  }
  .ae-reels { overflow: visible; margin: 0; padding: 0; }
  .ae-reels .reel-card { flex: 1 1 0; max-width: none; }
  .ae-switcher { bottom: 16px; }
  .ae-switcher__note { display: inline; margin-left: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.ae) { scroll-behavior: smooth; }
}