/*
 * ALS Memberships — the page, built to the approved design.
 *
 * Palette: the live ALS navy and teal. The design sample used navy and a
 * brighter blue for buttons; buttons here are the site accent teal so the page
 * matches the rest of the site rather than looking imported.
 *
 * Scoped to .m and the interactive elements carry !important, because the
 * theme ships `button { ... !important }` and a bare `button` rule that both
 * outrank a class selector.
 */

.m {
  /* Break out of the theme's content container.
     The theme wraps post content in a container roughly 920px wide, so the
     section was rendering as a narrow dark column down the middle of the page
     with white space on both sides. Pulling the section to the full viewport
     width and then re-centring the inner wrap at a readable measure is the
     standard fix, and it is why the layout looked broken rather than merely
     narrow. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  /* 100vw includes the scrollbar, which adds a sliver of horizontal scroll on
     every page. clip contains that sliver without creating a scroll container,
     so it does not break the theme's sticky headers, which hidden would. */
  overflow-x: clip;

  --m-bg: #060d1e;
  --m-deep: #05091a;
  --m-panel: #0b1735;
  --m-card: #101e36;
  --m-raised: #16273f;
  --m-line: #2a3f61;
  --m-text: #c9d6ea;
  --m-bright: #ffffff;
  --m-muted: #9fb2cd;
  --m-teal: #35e0d0;
  --m-teal-dim: #1fb9ac;
  --m-ink: #04202a;

  background: var(--m-bg);
  color: var(--m-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  box-sizing: border-box;
}
.m *, .m *::before, .m *::after { box-sizing: border-box; }
.m a { text-decoration: none; }

.m-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) clamp(18px, 4vw, 48px) clamp(56px, 8vw, 96px);
}

/* The hero pairs its copy with the plan cards, so the top of the page uses the
   full width instead of leaving the right half empty. The heading is allowed
   three lines because the column is now properly proportioned. */
.m-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.55fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (max-width: 1000px) {
  .m-hero { grid-template-columns: 1fr; }
}

.m-ic {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.14em;
}

/* ------------------------------------------------------------------ headers */

.m-eyebrow {
  color: var(--m-teal);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 12px;
}
.m-h1 {
  color: var(--m-bright);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0 0 18px;
  max-width: 15ch;
}
.m-h1 em, .m-h2 em {
  color: var(--m-teal);
  font-style: normal;
}
.m-h2 {
  color: var(--m-bright);
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 0 0 16px;
}
.m-lede {
  color: var(--m-muted);
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  max-width: 46ch;
  margin: 0 0 24px;
}
.m-fine {
  color: #6d80a0;
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 82ch;
  margin: clamp(40px, 5vw, 64px) 0 0;
  border-top: 1px solid var(--m-line);
  padding-top: 22px;
}

/* -------------------------------------------------------------------- plans */

.m-hero__copy { min-width: 0; }

.m-assure {
  display: flex; flex-wrap: wrap;
  gap: 26px;
  margin-top: 4px;
}
.m-assure span {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--m-muted);
  font-size: 13.5px; font-weight: 500;
}
.m-assure .m-ic { color: var(--m-teal); font-size: 19px; }
.m-assure b { color: var(--m-bright); font-weight: 700; }

.m-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}
@media (max-width: 1000px) {
  .m-plans { grid-template-columns: 1fr; max-width: 460px; }
}

.m-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0e1c36 0%, #0b1730 100%);
  border: 1px solid var(--m-line);
  border-radius: 16px;
  padding: 26px 22px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.m-plan:hover {
  border-color: rgba(53, 224, 208, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}
.m-plan--hot {
  border-color: var(--m-teal);
  box-shadow: 0 0 0 1px rgba(53, 224, 208, 0.28), 0 24px 54px -30px rgba(0, 0, 0, 0.95);
}
.m-plan--hot:hover { border-color: var(--m-teal); }

.m-plan__tag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--m-teal);
  color: var(--m-ink);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.m-plan__head { margin-bottom: 18px; }
.m-plan__label {
  color: var(--m-bright);
  font-size: 16px; font-weight: 700;
  margin: 0 0 8px;
}
.m-plan__price {
  color: var(--m-bright);
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 2px;
}
.m-plan__cur { font-size: 22px; font-weight: 700; margin-right: 1px; }
.m-plan__per {
  color: var(--m-muted);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; margin-left: 4px;
}
.m-plan__blurb { color: var(--m-muted); font-size: 13.5px; margin: 0; }

.m-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 13px 18px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.m-btn--primary {
  background: var(--m-teal) !important;
  border: 1px solid var(--m-teal) !important;
  color: var(--m-ink) !important;
}
.m-btn--primary:hover { background: #5ff0e2 !important; border-color: #5ff0e2 !important; }
.m-btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(53, 224, 208, 0.5) !important;
  color: var(--m-teal) !important;
}
.m-btn--ghost:hover { background: rgba(53, 224, 208, 0.1) !important; }
.m-plan .m-btn { margin-bottom: 20px; }

.m-plan__list {
  list-style: none;
  margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--m-line);
  display: grid; gap: 9px;
}
.m-plan__list li {
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--m-text);
  font-size: 13.5px;
  line-height: 1.45;
}
.m-plan__list .m-ic {
  color: var(--m-teal);
  font-size: 16px;
  margin-top: 2px;
}

/* -------------------------------------------------------------------- strip */

.m-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
}
.m-strip__item {
  display: flex; align-items: center; gap: 12px;
}
.m-strip__item .m-ic { color: var(--m-teal); font-size: 24px; }
.m-strip__item p { margin: 0; color: var(--m-muted); font-size: 13.5px; line-height: 1.35; }
.m-strip__item strong { color: var(--m-bright); font-weight: 700; display: block; }

/* ------------------------------------------------------------------- splits */

.m-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 104px);
}
.m-split--maps .m-split__art { order: -1; }
@media (max-width: 880px) {
  .m-split { grid-template-columns: 1fr; }
  .m-split--maps .m-split__art { order: 0; }
}

.m-split__text .m-btn { width: auto; }
.m-split__text .m-btn .m-ic { font-size: 16px; }

.m-split__art {
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  position: relative;
}

/* tool tiles under the portal copy */
.m-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}
@media (max-width: 520px) { .m-tools { grid-template-columns: repeat(2, 1fr); } }
.m-tool {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: rgba(22, 39, 63, 0.5);
  border: 1px solid var(--m-line);
  border-radius: 10px;
  padding: 13px 6px;
  color: var(--m-muted);
  font-size: 11px; font-weight: 600;
  text-align: center;
  line-height: 1.25;
}
.m-tool .m-ic { color: var(--m-teal); font-size: 19px; }
.m-tool:hover { border-color: rgba(53, 224, 208, 0.4); color: var(--m-bright); }

/* --------------------------------------------------------------- art blocks */

.m-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 20% 0%, #12305c 0%, #0a1730 55%, #070f23 100%);
  border: 1px solid var(--m-line);
}
.m-art__glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 20%, rgba(53, 224, 208, 0.16), transparent 70%);
  pointer-events: none;
}

/* dashboard mock, built from real structure rather than a flat image */
.m-art__dash {
  position: absolute;
  inset: 18px 18px 18px 18px;
  background: #0e1b34;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  overflow: hidden;
}
.m-art__side { background: #0a162c; border-right: 1px solid var(--m-line); padding: 14px 10px; }
.m-art__logo {
  display: flex; align-items: center; gap: 6px;
  color: var(--m-bright); font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.m-art__logoDot {
  width: 16px; height: 16px; border-radius: 5px;
  background: linear-gradient(135deg, var(--m-teal), #2b8ef0);
}
.m-art__nav { display: grid; gap: 3px; }
.m-art__nav span {
  display: flex; align-items: center; gap: 7px;
  color: #6d80a0; font-size: 10.5px; font-weight: 600;
  padding: 6px 7px; border-radius: 6px;
}
.m-art__nav span.is-on { background: rgba(53, 224, 208, 0.14); color: var(--m-bright); }
.m-art__nav i {
  width: 11px; height: 11px; border-radius: 3px;
  background: currentColor; opacity: 0.5; display: block;
}
.m-art__nav span.is-on i { opacity: 1; }

.m-art__main { padding: 14px; min-width: 0; }
.m-art__statRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.m-art__stat {
  background: #0a162c;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 9px 8px;
}
.m-art__stat b { display: block; color: var(--m-bright); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.m-art__stat span { color: #5f7395; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.m-art__cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; }
.m-art__box {
  background: #0a162c;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 10px;
}
.m-art__box h4 {
  color: var(--m-bright); font-size: 10.5px; font-weight: 700;
  margin: 0 0 8px; letter-spacing: 0.02em;
}
.m-art__row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(42, 63, 97, 0.5); }
.m-art__row:last-child { border-bottom: 0; }
.m-art__row img {
  width: 19px; height: 19px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; background: #16273f;
}
.m-art__rowTxt { min-width: 0; flex: 1 1 auto; }
.m-art__rowTxt b { display: block; color: var(--m-text); font-size: 9.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-art__rowTxt span { color: #5f7395; font-size: 8.5px; }
.m-art__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(42, 63, 97, 0.5); }
.m-art__link:last-child { border-bottom: 0; }
.m-art__link span { color: var(--m-text); font-size: 9.5px; font-weight: 600; }
.m-art__link em { color: #5f7395; font-size: 8.5px; font-style: normal; }

/* map art */
.m-art--map .m-art__search {
  position: absolute; left: 14px; right: 14px; top: 14px;
  display: flex; align-items: center; gap: 8px;
  background: #0a162c; border: 1px solid var(--m-line);
  border-radius: 9px; padding: 9px 12px;
  color: #6d80a0; font-size: 11.5px; font-weight: 500;
}
.m-art--map .m-art__search .m-ic { color: var(--m-teal); font-size: 15px; }
.m-art--map .m-art__list {
  position: absolute; right: 12px; top: 54px; bottom: 12px; width: 148px;
  background: #0a162c; border: 1px solid var(--m-line); border-radius: 10px;
  padding: 8px; display: grid; gap: 5px; align-content: start;
}
.m-art--map .m-art__agent { display: flex; align-items: center; gap: 7px; padding: 4px 2px; }
.m-art--map .m-art__agent img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #16273f; flex: 0 0 auto; }
.m-art--map .m-art__agentTxt { min-width: 0; }
.m-art--map .m-art__agentTxt b { display: block; color: var(--m-bright); font-size: 9.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-art--map .m-art__agentTxt span { color: #5f7395; font-size: 8.5px; }
.m-art--map .m-art__badge {
  position: absolute; right: 12px; top: 20px;
  background: var(--m-teal); color: var(--m-ink);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
}
.m-art--map .m-art__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* network art */
.m-art--network .m-art__hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1a3f6e, #08152b 100%);
  border: 1.5px solid var(--m-teal);
  display: grid; place-items: center;
  color: var(--m-bright); font-size: 15px; font-weight: 800; letter-spacing: 0.08em;
  box-shadow: 0 0 0 10px rgba(53, 224, 208, 0.06), 0 0 46px rgba(53, 224, 208, 0.28);
}
.m-art--network .m-art__ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(53, 224, 208, 0.16);
  border-radius: 50%;
}
.m-art--network .m-art__ring--1 { width: 170px; height: 170px; }
.m-art--network .m-art__ring--2 { width: 250px; height: 250px; }
.m-art--network .m-art__face {
  position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(53, 224, 208, 0.55);
  background: #16273f;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.9);
}
.m-art--network .m-art__tag {
  position: absolute;
  background: rgba(11, 23, 53, 0.94);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--m-text);
  font-size: 9.5px; font-weight: 600;
  line-height: 1.3;
  max-width: 132px;
}
.m-art--network .m-art__tag b { color: var(--m-teal); display: block; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }

/* tools art */
.m-art--tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.m-art__device {
  background: #0a162c;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.m-art__device--phone { align-self: end; }
.m-art__device--tablet { align-self: start; }
.m-art__shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(150deg, #14315c, #0a1830 90%);
  border: 1px solid var(--m-line);
  display: grid;
  place-items: center;
}
.m-art__shotInner { text-align: center; padding: 10px; }
.m-art__shotInner img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--m-teal); margin: 0 auto 6px;
  background: #16273f;
}
.m-art__shotInner b { display: block; color: var(--m-bright); font-size: 10.5px; font-weight: 700; }
.m-art__shotInner span { color: #7f93b0; font-size: 8.5px; }
.m-art__qr {
  width: 26px; height: 26px; margin: 8px auto 0;
  background:
    repeating-linear-gradient(90deg, #56ddd0 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg, #56ddd0 0 3px, transparent 3px 6px);
  border-radius: 3px;
  opacity: 0.85;
}
.m-art__house {
  width: 100%; height: 52%;
  margin-top: 8px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #2a5f9e 0%, #1a3f6e 60%, #123055 100%);
  position: relative;
  overflow: hidden;
}
.m-art__house::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 58%;
  background: #0d2244;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.m-art__deviceName {
  color: var(--m-muted); font-size: 9px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-top: 9px; text-align: center;
}

/* --------------------------------------------------------- artwork motion */

/* The map pins and network faces are animated from the script by setting an
   animation-name, so the keyframes have to live here or the motion is silently
   dropped. */
@keyframes m-pin {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}

@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.m-art--network .m-art__face {
  animation: m-float 4.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 520px) {
  .m-assure { gap: 16px; }
  .m-strip { grid-template-columns: 1fr 1fr; }
  .m-art__dash { grid-template-columns: 88px minmax(0, 1fr); }
  .m-art--map .m-art__list { width: 118px; }
  .m-art--tools { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .m *, .m *::before, .m *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}