:root {
  --account-night: #171329;
  --account-night-soft: #261b40;
  --account-ink: #201733;
  --account-muted: #6b6177;
  --account-line: #e9deee;
  --account-surface: #ffffff;
  --account-lilac: #b763d8;
  --account-lilac-dark: #7b3b99;
  --account-pink: #e481bc;
  --account-soft: #f7effa;
  --account-warm: #fff8fd;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.account-page {
  min-width: 320px;
  margin: 0;
  color: var(--account-ink);
  background: #fbf9fd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (hover: hover) and (pointer: fine) {
  body.account-page { cursor: url("aniguard-cursor.svg") 29 12, default; }
  body.account-page :is(a[href], button:not(:disabled), [role="button"], summary, label[for]) { cursor: url("aniguard-cursor-action.svg") 29 12, pointer !important; }
}

body.account-page a { color: inherit; text-decoration: none; }

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 82px;
  padding: 14px clamp(20px, 6vw, 94px);
  color: #fff;
  background: rgba(23, 19, 41, .99);
}

.account-brand { display: block; width: min(256px, 53vw); }
.account-brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 7px rgba(221, 147, 241, .46)); }
.account-nav { display: flex; align-items: center; gap: clamp(8px, 1.8vw, 22px); font-size: 14px; font-weight: 780; }
.account-nav__link { padding: 10px 11px; border-radius: 999px; color: #f5edf8; }
.account-nav__link:hover, .account-nav__link:focus-visible { outline: none; background: rgba(255, 255, 255, .1); }
.account-nav__link[aria-current="page"] { color: #ffd9f1; }
.account-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #dc8de8, #aa56cf);
  box-shadow: 0 9px 19px rgba(7, 4, 17, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.account-nav__cta:hover, .account-nav__cta:focus-visible { outline: none; transform: translateY(-1px); box-shadow: 0 13px 25px rgba(7, 4, 17, .34); }

.account-inner { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.account-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 8vw, 98px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(circle at 88% 8%, rgba(231, 139, 197, .27), transparent 22rem),
    radial-gradient(circle at 2% 94%, rgba(178, 104, 215, .2), transparent 25rem),
    linear-gradient(145deg, #fff, #f6effa 73%, #fdf8fc);
}
.account-hero::before,
.account-hero::after {
  position: absolute;
  border: 1px solid rgba(171, 91, 202, .18);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.account-hero::before { top: -16rem; right: -9rem; width: 36rem; height: 36rem; }
.account-hero::after { bottom: -19rem; left: -13rem; width: 31rem; height: 31rem; }

.account-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(360px, .86fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.account-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px solid rgba(173, 91, 206, .24);
  border-radius: 999px;
  color: var(--account-lilac-dark);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 7px 18px rgba(79, 45, 93, .05);
  font-size: 14px;
  font-weight: 850;
}

.account-title {
  max-width: 620px;
  margin: 0;
  font-size: clamp(42px, 5.8vw, 72px);
  line-height: .99;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.account-title span { display: block; color: var(--account-lilac); }
.account-lead { max-width: 590px; margin: 20px 0 0; color: var(--account-muted); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.58; }

.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.account-button--primary { color: #fff; background: linear-gradient(135deg, #d970b8, #a84fc9); box-shadow: 0 12px 26px rgba(172, 73, 170, .23); }
.account-button--primary:hover, .account-button--primary:focus-visible { outline: none; transform: translateY(-2px); box-shadow: 0 17px 33px rgba(172, 73, 170, .29); }
.account-button--secondary { border: 1px solid #e2d5e8; color: var(--account-ink); background: rgba(255, 255, 255, .9); }
.account-button--secondary:hover, .account-button--secondary:focus-visible { outline: none; transform: translateY(-1px); border-color: #d2bbdc; background: #fff; }
.account-button:disabled { color: #8e8298; background: #eee8f0; box-shadow: none; cursor: not-allowed; }

.account-preview-note {
  display: flex;
  gap: 9px;
  max-width: 590px;
  margin: 22px 0 0;
  color: #72657d;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.5;
}
.account-preview-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--account-lilac-dark); }

.account-hero-card {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid rgba(247, 214, 245, .42);
  border-radius: 31px;
  color: #fff;
  background:
    radial-gradient(circle at 93% 4%, rgba(239, 140, 201, .44), transparent 14rem),
    radial-gradient(circle at 4% 100%, rgba(205, 143, 235, .29), transparent 17rem),
    linear-gradient(145deg, #1d1533, #32204d 68%, #40265d);
  box-shadow: 0 23px 48px rgba(43, 23, 62, .18);
  isolation: isolate;
}
.account-hero-card::before {
  position: absolute;
  right: -6rem;
  bottom: -7rem;
  z-index: -1;
  width: 21rem;
  height: 21rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  content: "";
}
.account-card-head { display: flex; align-items: center; gap: 12px; }
.account-card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 15px;
  color: #ffd3f1;
  background: rgba(255, 255, 255, .1);
}
.account-card-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.account-card-status { margin: 0; color: #f2bae3; font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.account-card-head h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.025em; }
.account-card-copy { max-width: 295px; margin: 28px 0 0; color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.56; }
.account-hero-mascot { position: absolute; right: -9px; bottom: -34px; z-index: -1; width: min(58%, 290px); filter: drop-shadow(0 18px 23px rgba(5, 2, 16, .42)); }

.account-section { padding: clamp(58px, 8vw, 94px) 0; }
.account-section--soft { background: linear-gradient(180deg, #f4edf8, #fbf8fc); }
.account-section-heading { max-width: 720px; }
.account-section-title { margin: 0; font-size: clamp(31px, 4vw, 49px); line-height: 1.09; letter-spacing: -.046em; text-wrap: balance; }
.account-section-title span { color: var(--account-lilac); }
.account-section-copy { max-width: 650px; margin: 15px 0 0; color: var(--account-muted); font-size: 17px; line-height: 1.62; }

.account-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 31px; }
.account-benefit {
  min-height: 220px;
  padding: 23px;
  border: 1px solid var(--account-line);
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(74, 43, 88, .05);
}
.account-benefit__icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 20px; border-radius: 16px; color: var(--account-lilac-dark); background: #f7eafa; }
.account-benefit__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.account-benefit h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.account-benefit p { margin: 0; color: var(--account-muted); font-size: 15px; line-height: 1.58; }

.account-roadmap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr); gap: clamp(34px, 8vw, 100px); align-items: center; }
.account-roadmap__copy { max-width: 520px; }
.account-roadmap__steps { display: grid; gap: 13px; }
.account-step { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border: 1px solid #e8ddec; border-radius: 18px; background: rgba(255, 255, 255, .78); box-shadow: 0 7px 17px rgba(70, 39, 85, .04); }
.account-step__number { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 15px; color: var(--account-lilac-dark); background: #f5e8fa; font-size: 13px; font-weight: 900; }
.account-step h3 { margin: 2px 0 5px; font-size: 18px; letter-spacing: -.015em; }
.account-step p { margin: 0; color: var(--account-muted); font-size: 15px; line-height: 1.52; }

.account-footer { padding: 25px 20px 29px; color: #d9cfdf; background: #171329; font-size: 13px; text-align: center; }
.account-footer a { color: #f1c3e9; font-weight: 750; }

.access-main {
  position: relative;
  min-height: calc(100vh - 82px);
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0;
  background:
    radial-gradient(circle at 7% 13%, rgba(222, 144, 211, .18), transparent 19rem),
    radial-gradient(circle at 92% 91%, rgba(181, 112, 216, .16), transparent 23rem),
    linear-gradient(145deg, #fcf9fd, #f4edf8);
}
.access-main::before,
.access-main::after { position: absolute; border: 1px solid rgba(176, 102, 208, .16); border-radius: 50%; content: ""; pointer-events: none; }
.access-main::before { top: -16rem; left: -15rem; width: 32rem; height: 32rem; }
.access-main::after { right: -14rem; bottom: -17rem; width: 35rem; height: 35rem; }
.access-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .98fr) minmax(310px, .72fr); gap: clamp(28px, 6vw, 82px); align-items: center; max-width: 1025px; }
.access-content { max-width: 580px; }
.access-layout--single { grid-template-columns: minmax(0, 580px); justify-content: center; }
.access-layout--single .access-content { width: 100%; margin: 0 auto; }
.access-layout--single .access-heading, .access-layout--single .access-copy { margin-right: auto; margin-left: auto; text-align: center; }
.access-layout--single .access-card { text-align: left; }
.access-heading { margin: 0; font-size: clamp(37px, 5vw, 59px); line-height: 1.03; letter-spacing: -.052em; text-wrap: balance; }
.access-heading span { color: var(--account-lilac); }
.access-copy { max-width: 545px; margin: 16px 0 0; color: var(--account-muted); font-size: 17px; line-height: 1.6; }

.access-card { margin-top: 28px; padding: clamp(22px, 4vw, 34px); border: 1px solid #e6dce9; border-radius: 26px; background: rgba(255, 255, 255, .91); box-shadow: 0 19px 41px rgba(66, 38, 83, .1); }
.access-preview-banner { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 23px; padding: 13px 14px; border: 1px solid #e8c9e0; border-radius: 15px; color: #654562; background: linear-gradient(135deg, #fff1fa, #fbf4fd); font-size: 13px; line-height: 1.48; }
.access-preview-banner__icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #a94b88; background: #fff; }
.access-preview-banner__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.access-preview-banner strong { color: #4a324c; }
.access-fields { display: grid; gap: 15px; }
.access-field { display: grid; gap: 7px; color: #4c3e55; font-size: 13px; font-weight: 800; }
.access-field__shell { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid #e1d6e6; border-radius: 15px; color: #a99daa; background: #faf8fb; }
.access-field__shell svg { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.access-field input { width: 100%; border: 0; outline: 0; color: #766b7b; background: transparent; font: inherit; }
.access-field input::placeholder { color: #aaa0ad; opacity: 1; }
.access-field input:disabled { opacity: 1; -webkit-text-fill-color: #9a8e9d; }
.access-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px; margin-top: 21px; }
.access-link { color: var(--account-lilac-dark); font-size: 13px; font-weight: 800; text-decoration: underline !important; text-decoration-color: rgba(123, 59, 153, .35) !important; text-underline-offset: 3px; }
.access-link:hover, .access-link:focus-visible { color: #a249bd; outline: none; }
.access-fineprint { margin: 17px 0 0; color: #817489; font-size: 12px; line-height: 1.5; }
.access-fineprint a { color: var(--account-lilac-dark); text-decoration: underline; text-underline-offset: 2px; }

.access-compare-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 17px 18px;
  border: 1px solid rgba(237, 204, 239, .4);
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(circle at 89% 0%, rgba(225, 122, 191, .34), transparent 10rem), linear-gradient(135deg, #211833, #3c2458);
  box-shadow: 0 14px 28px rgba(39, 21, 56, .12);
}
.access-compare-card h2 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.access-compare-card p { margin: 4px 0 0; color: rgba(255, 255, 255, .84); font-size: 12px; line-height: 1.45; }
.access-compare-card__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 850; white-space: nowrap; transition: background .18s ease, transform .18s ease; }
.access-compare-card__link:hover, .access-compare-card__link:focus-visible { outline: none; background: rgba(255, 255, 255, .2); transform: translateY(-1px); }

@media (max-width: 940px) {
  .account-hero__grid, .account-roadmap, .access-layout { grid-template-columns: 1fr; }
  .account-hero__grid { gap: 34px; }
  .account-hero-card { max-width: 650px; min-height: 376px; }
  .account-hero-mascot { width: min(49%, 300px); }
  .account-roadmap__copy { max-width: 680px; }
  .access-layout { max-width: 620px; }
}

@media (max-width: 720px) {
  .account-header { min-height: 72px; padding: 12px 20px; }
  .account-nav__link { display: none; }
  .account-nav__cta { min-height: 40px; padding: 9px 13px; font-size: 13px; }
  .account-inner { width: min(100% - 32px, 1160px); }
  .account-hero { padding: 48px 0 57px; }
  .account-title { font-size: clamp(41px, 11.8vw, 59px); }
  .account-lead { font-size: 17px; }
  .account-hero-card { min-height: 382px; padding: 25px; }
  .account-card-copy { max-width: 57%; }
  .account-hero-mascot { width: min(55%, 245px); bottom: -16px; }
  .account-benefit-grid { grid-template-columns: 1fr; }
  .account-benefit { min-height: 0; }
  .access-main { padding: 43px 0 58px; }
  .access-heading { font-size: clamp(37px, 11.3vw, 52px); }
  .access-compare-card { grid-template-columns: 1fr; }
  .access-compare-card__link { justify-self: start; }
}

@media (max-width: 460px) {
  .account-brand { width: 186px; }
  .account-nav__cta { padding: 9px 11px; font-size: 0; }
  .account-nav__cta span { font-size: 18px; }
  .account-actions, .access-actions { align-items: stretch; flex-direction: column; }
  .account-actions .account-button, .access-actions .account-button { width: 100%; }
  .access-actions { align-items: flex-start; }
  .account-card-copy { max-width: 64%; }
  .account-hero-mascot { right: -36px; width: 55%; opacity: .88; }
  .access-card { margin-top: 24px; padding: 20px; }
}