/*******************************
 Anthropic Template (AIL / ANS prelaunch)
 -------------------------------
 Implements "AIL Product Page.dc.html" from the claude.ai/design
 project "Design system rebuild decision". For the two Anthropic
 single-stock leveraged ETFs (AIL long / ANS short) only, while
 the Fund's registration statement is not yet effective.
 Extends new-product.css — reuses .np-* (hero/contextbar/subnav/
 risk/details/faq/cta) wherever it already fits; this file only
 adds the pieces unique to this page. Uses global tokens from
 variables.css. Prefix: at- (Anthropic Template)
 ******************************/

/* ---------- Hero: ticker card + inline capture ---------- */
.at-hero__aside { display: grid; gap: 24px; max-width: 420px; width: 100%; margin-left: auto; }

.at-hero__card {
  background: rgb(var(--neutral-100));
  border: 1.5px solid rgb(var(--neutral-0));
  border-radius: var(--border-radius);
  padding: 40px 32px 32px;
  position: relative;
}
.at-hero__badge {
  position: absolute; top: -20px; left: -20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgb(var(--brand-azure)); color: rgb(var(--neutral-100));
  display: grid; place-items: center;
}
.at-hero__ticker {
  font-family: "PP Formula", sans-serif; font-weight: 500;
  font-size: 76px; line-height: 0.9; color: rgb(var(--brand-azure));
}
.at-hero__fundshort { font-family: "PP Formula", sans-serif; font-weight: 500; font-size: 30px; margin-top: 12px; }
.at-hero__kind { font-size: 20px; color: rgb(var(--neutral-20)); margin-top: 4px; }

.at-hero__form { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.at-hero__input {
  flex: 1 1 220px; min-width: 0;
  border: 1.5px solid rgb(var(--neutral-0));
  background: rgb(var(--neutral-99));
  border-radius: var(--border-radius);
  padding: 12px 16px;
  font-family: "Inter", sans-serif; font-size: 16px; font-weight: 300;
  outline: none;
}
.at-hero__note { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(var(--brand-azure-dark)); display: none; }
.at-hero__error { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(var(--brand-amethyst-dark)); display: none; }

/* ---------- Prospectus notice + document callout ---------- */
.at-prospectus__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: start; }
.at-prospectus__notice {
  background: rgb(var(--brand-amethyst-light));
  border: 1.5px solid rgb(var(--brand-amethyst));
  border-radius: var(--border-radius);
  padding: 24px;
}
.at-prospectus__notice p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; font-size: 15px; }
.at-prospectus__notice p + p { margin-top: 14px; font-weight: 300; font-size: 14px; color: rgb(var(--neutral-0)); }
.at-prospectus__box {
  border: 1.5px solid rgb(var(--neutral-0));
  border-radius: var(--border-radius);
  background: rgb(var(--neutral-100));
  padding: 28px; display: grid; gap: 14px; justify-items: start;
}
.at-prospectus__box p { margin: 0; font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; color: rgb(var(--neutral-20)); }

/* ---------- Illustrative two-day compounding example ---------- */
.at-illus { background: rgb(var(--neutral-100)); border: 1.5px solid rgb(var(--neutral-0)); border-radius: var(--border-radius); overflow: hidden; }
.at-illus__head {
  background: rgb(var(--brand-azure)); color: rgb(var(--neutral-100));
  padding: 14px 20px; font-family: "JetBrains Mono", monospace; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
}
.at-illus table { width: 100%; border-collapse: collapse; font-size: 15px; }
.at-illus th {
  padding: 12px 20px; text-align: left; font-family: "JetBrains Mono", monospace; font-weight: 400;
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--neutral-30));
  border-top: 1.5px solid rgb(var(--neutral-80));
}
.at-illus td { padding: 12px 20px; border-top: 1.5px solid rgb(var(--neutral-80)); }
.at-illus td.at-illus__num { font-family: "JetBrains Mono", monospace; font-size: 14px; }
.at-illus__foot { padding: 16px 20px; font-size: 14px; color: rgb(var(--neutral-20)); border-top: 1.5px solid rgb(var(--neutral-80)); }

/* ---------- Key risks: plain topic grid (no card chrome) ---------- */
.at-riskgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 40px; }
.at-riskgrid h3 { margin: 0 0 6px; font-family: "Inter", sans-serif; font-weight: 400; font-size: 17px; }
.at-riskgrid p { margin: 0; font-size: 15px; font-weight: 300; color: rgb(var(--neutral-20)); }

/* ---------- Sibling fund (AIL / ANS) comparison ---------- */
.at-sibling__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.at-sibling__card { background: rgb(var(--neutral-100)); border: 1.5px solid rgb(var(--neutral-0)); border-radius: var(--border-radius); padding: 32px; }
.at-sibling__ticker { font-family: "PP Formula", sans-serif; font-weight: 500; font-size: 44px; line-height: 1; color: rgb(var(--brand-azure)); }
.at-sibling__name { font-size: 18px; font-weight: 400; margin: 10px 0 14px; }
.at-sibling__desc { margin: 0; font-size: 15px; font-weight: 300; color: rgb(var(--neutral-20)); }
.at-sibling__tag { margin-top: 18px; }
.at-sibling__card--current { border-color: rgb(var(--brand-azure)); }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .at-hero__aside { max-width: none; margin-left: 0; }
  .at-hero__form input { flex: 1 1 100%; }
}