/* ==========================================================================
   AlliOs premium layer
   Design tokens, self-hosted type and the components used on the marketing
   site. Loaded after Tabler/Bootstrap so it only has to override tokens and
   add what the framework does not provide. No !important chains.
   ========================================================================== */

/* ---------- Type (self-hosted, swap) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-600.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --ao-ink: #0b1f3a;
  --ao-ink-deep: #07111f;
  --ao-blue: #1e5eff;
  --ao-blue-hover: #1749d6;
  --ao-blue-soft: #e8efff;
  --ao-gold: #b8912b;
  --ao-gold-soft: #f6ecd2;

  /* Nine-step neutral scale */
  --ao-n0: #ffffff;
  --ao-n50: #f7f9fb;
  --ao-n100: #eef2f6;
  --ao-n200: #dde4ec;
  --ao-n300: #c3ceda;
  --ao-n400: #9aa9bb;
  --ao-n500: #74869c;
  --ao-n600: #566a82;
  --ao-n700: #3e5065;
  --ao-n800: #2a3847;
  --ao-n900: #18222e;

  /* Semantic */
  --ao-bg: var(--ao-n0);
  --ao-bg-subtle: var(--ao-n50);
  --ao-surface: var(--ao-n0);
  --ao-border: var(--ao-n200);
  --ao-text: var(--ao-n900);
  --ao-text-muted: var(--ao-n600);
  --ao-focus: var(--ao-blue);
  --ao-success: #127c56;
  --ao-danger: #b3261e;

  /* Shape and depth */
  --ao-radius-sm: 6px;
  --ao-radius: 10px;
  --ao-radius-lg: 18px;
  --ao-shadow-sm: 0 1px 2px rgb(11 31 58 / 6%);
  --ao-shadow-raised: 0 18px 40px -18px rgb(11 31 58 / 34%),
    0 2px 6px rgb(11 31 58 / 6%);

  /* Type */
  --ao-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ao-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ao-measure: 66ch;
  --ao-step-xs: 0.8rem;
  --ao-step-sm: 0.9rem;
  --ao-step-base: 1rem;
  --ao-step-md: 1.125rem;
  --ao-step-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --ao-step-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --ao-step-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  --ao-step-3xl: clamp(2.4rem, 1.6rem + 4vw, 4.2rem);

  /* Layout */
  --ao-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --ao-section: clamp(3.5rem, 2rem + 6vw, 7rem);
}

[data-bs-theme="dark"] {
  --ao-bg: #0a1622;
  --ao-bg-subtle: #0d1c2b;
  --ao-surface: #102436;
  --ao-border: #1d344b;
  --ao-text: #e8eef6;
  --ao-text-muted: #a6b6c8;
  --ao-blue: #6e9bff;
  --ao-blue-hover: #8fb2ff;
  --ao-blue-soft: #16273f;
  --ao-gold: #e0bc55;
  --ao-gold-soft: #2a2413;
  --ao-focus: #8fb2ff;
  --ao-shadow-raised: 0 18px 40px -18px rgb(0 0 0 / 70%),
    0 2px 6px rgb(0 0 0 / 40%);
}

/* ---------- Base ---------- */
/* Bridge our tokens into the variables Bootstrap 5.3 and Tabler already use,
   so framework surfaces pick up the AlliOs palette instead of the defaults. */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--ao-bg);
  --bs-body-color: var(--ao-text);
  --bs-border-color: var(--ao-border);
  --bs-primary: var(--ao-blue);
  --bs-primary-rgb: 30, 94, 255;
  --bs-link-color: var(--ao-blue);
  --bs-link-hover-color: var(--ao-blue-hover);
  --bs-body-font-family: var(--ao-font-text);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--ao-bg);
  --bs-body-color: var(--ao-text);
  --bs-border-color: var(--ao-border);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--ao-text-muted);
}

body,
.page {
  background-color: var(--ao-bg);
}

body {
  font-family: var(--ao-font-text);
  color: var(--ao-text);
  background-color: var(--ao-bg);
  font-size: var(--ao-step-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ao-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--ao-text);
}

h1 { font-size: var(--ao-step-3xl); }
h2 { font-size: var(--ao-step-xl); }
h3 { font-size: var(--ao-step-lg); }

p { max-width: var(--ao-measure); }

a { color: var(--ao-blue); }
a:hover { color: var(--ao-blue-hover); }

:focus-visible {
  outline: 3px solid var(--ao-focus);
  outline-offset: 2px;
  border-radius: var(--ao-radius-sm);
}

.ao-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ao-surface);
  color: var(--ao-text);
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--ao-radius) 0;
}
.ao-skip-link:focus {
  left: 0;
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--ao-font-text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--ao-radius-sm);
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--ao-blue);
  --bs-btn-border-color: var(--ao-blue);
  --bs-btn-hover-bg: var(--ao-blue-hover);
  --bs-btn-hover-border-color: var(--ao-blue-hover);
  --bs-btn-active-bg: var(--ao-blue-hover);
  --bs-btn-active-border-color: var(--ao-blue-hover);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--ao-n300);
  --bs-btn-disabled-border-color: var(--ao-n300);
}

.ao-btn-ghost {
  --bs-btn-color: var(--ao-text);
  --bs-btn-border-color: var(--ao-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--ao-bg-subtle);
  --bs-btn-hover-border-color: var(--ao-n400);
  --bs-btn-hover-color: var(--ao-text);
  --bs-btn-active-bg: var(--ao-bg-subtle);
  --bs-btn-active-color: var(--ao-text);
  border: 1px solid var(--ao-border);
}

.ao-link-quiet {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ao-text-muted);
  text-decoration: none;
}
.ao-link-quiet:hover {
  color: var(--ao-text);
  text-decoration: underline;
}

/* ---------- Section rhythm ---------- */
.ao-section {
  padding-block: var(--ao-section);
}
.ao-section--tight {
  padding-block: calc(var(--ao-section) * 0.6);
}
.ao-wrap {
  width: min(1120px, 100% - (var(--ao-gutter) * 2));
  margin-inline: auto;
}
.ao-lede {
  font-size: var(--ao-step-md);
  color: var(--ao-text-muted);
  max-width: 60ch;
}
.ao-kicker {
  font-family: var(--ao-font-text);
  font-size: var(--ao-step-sm);
  font-weight: 500;
  color: var(--ao-text-muted);
  margin-bottom: 0.75rem;
}
.ao-muted {
  color: var(--ao-text-muted);
}

/* ---------- Hero ---------- */
.ao-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--ao-blue-soft), transparent 62%),
    var(--ao-bg);
}
.ao-hero h1 {
  margin-bottom: 1rem;
}
.ao-hero__lede {
  font-size: var(--ao-step-md);
  color: var(--ao-text-muted);
  max-width: 54ch;
  margin-bottom: 1.75rem;
}

/* Interactive selector: "I run a ..." */
.ao-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem;
  border: 1px solid var(--ao-border);
  border-radius: 999px;
  background: var(--ao-surface);
  box-shadow: var(--ao-shadow-sm);
  width: fit-content;
  max-width: 100%;
}
.ao-selector__label {
  align-self: center;
  padding-inline: 0.75rem 0.5rem;
  font-size: var(--ao-step-sm);
  color: var(--ao-text-muted);
  white-space: nowrap;
}
.ao-selector__btn {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ao-text);
  font: inherit;
  font-size: var(--ao-step-sm);
  font-weight: 500;
  cursor: pointer;
}
.ao-selector__btn[aria-selected="true"] {
  background: var(--ao-ink);
  color: #ffffff;
}
[data-bs-theme="dark"] .ao-selector__btn[aria-selected="true"] {
  background: var(--ao-blue);
  color: #08111c;
}

/* Raised sample card in the hero */
.ao-sample {
  position: relative;
  background: var(--ao-surface);
  border: 1px solid var(--ao-border);
  border-radius: var(--ao-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--ao-shadow-raised);
  transform: translateY(-6px);
}
.ao-sample__tag {
  display: inline-block;
  font-size: var(--ao-step-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ao-ink);
  background: var(--ao-gold-soft);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.75rem;
}
[data-bs-theme="dark"] .ao-sample__tag {
  color: var(--ao-gold);
}
.ao-sample__title {
  font-family: var(--ao-font-display);
  font-size: var(--ao-step-lg);
  margin: 0 0 0.25rem;
}
.ao-sample__meta {
  font-size: var(--ao-step-sm);
  color: var(--ao-text-muted);
  margin-bottom: 1rem;
}
.ao-sample__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: var(--ao-step-sm);
}
.ao-sample__list li {
  display: flex;
  gap: 0.5rem;
}
.ao-sample__list svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--ao-success);
}
.ao-sample__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ao-border);
  padding-top: 0.9rem;
  font-size: var(--ao-step-sm);
}

/* ---------- Ruled product list (deliberately not cards) ---------- */
.ao-ruled {
  border-top: 1px solid var(--ao-border);
}
.ao-ruled__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--ao-border);
  text-decoration: none;
  color: inherit;
}
.ao-ruled__row:hover {
  background: var(--ao-bg-subtle);
}
.ao-ruled__index {
  font-family: var(--ao-font-display);
  color: var(--ao-gold);
  font-size: var(--ao-step-md);
}
.ao-ruled__name {
  font-family: var(--ao-font-display);
  font-size: var(--ao-step-lg);
  margin: 0 0 0.25rem;
}
.ao-ruled__desc {
  margin: 0;
  color: var(--ao-text-muted);
  max-width: 58ch;
}
.ao-ruled__go {
  font-size: var(--ao-step-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Full-bleed dark proof band ---------- */
.ao-band {
  background: var(--ao-ink);
  color: #e9eef6;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.ao-band h2 {
  color: #ffffff;
}
.ao-band .ao-lede {
  color: #b9c6d8;
}
.ao-band__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  margin-top: 2rem;
}
.ao-band__logo {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 0.5rem 1rem;
  border: 1px dashed rgb(255 255 255 / 28%);
  border-radius: var(--ao-radius-sm);
  font-size: var(--ao-step-sm);
  color: #cfd9e6;
}
.ao-quote {
  margin: 2.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ao-gold);
  max-width: 62ch;
}
.ao-quote p {
  font-family: var(--ao-font-display);
  font-size: var(--ao-step-lg);
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 0.75rem;
}
.ao-quote footer {
  font-size: var(--ao-step-sm);
  color: #b9c6d8;
}

/* ---------- Supporting blocks ---------- */
.ao-split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.ao-figure {
  border-radius: var(--ao-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ao-border);
  background: var(--ao-bg-subtle);
}
.ao-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.ao-steps {
  counter-reset: ao-step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
.ao-steps li {
  counter-increment: ao-step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
}
.ao-steps li::before {
  content: counter(ao-step);
  font-family: var(--ao-font-display);
  color: var(--ao-blue);
}

/* ---------- Header / footer ---------- */
.ao-theme-toggle {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.ao-theme-toggle svg {
  width: 18px;
  height: 18px;
}
.ao-footer {
  background: var(--ao-ink-deep);
  color: #b9c6d8;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 1.5rem;
  font-size: var(--ao-step-sm);
}
.ao-footer a {
  color: #d7e0ec;
  text-decoration: none;
}
.ao-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.ao-footer h2 {
  font-family: var(--ao-font-text);
  font-size: var(--ao-step-sm);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.75rem;
}
.ao-footer__nav {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ao-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 14%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
.ao-footer__brand {
  font-family: var(--ao-font-display);
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
.ao-footer__tagline,
.ao-footer__note {
  color: #9fb0c4;
  max-width: 32ch;
}
.ao-footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* ---------- Contact form ---------- */
.ao-form .form-label {
  font-size: var(--ao-step-sm);
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.ao-form .form-control,
.ao-form .form-select {
  min-height: 44px;
  border-radius: var(--ao-radius-sm);
  border-color: var(--ao-border);
  background-color: var(--ao-surface);
  color: var(--ao-text);
}
.ao-form .form-control:focus,
.ao-form .form-select:focus {
  border-color: var(--ao-blue);
  box-shadow: 0 0 0 3px rgb(30 94 255 / 18%);
}
.ao-form__note {
  margin: 0.75rem 0 0;
  font-size: var(--ao-step-sm);
}
.ao-contact-card {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--ao-border);
  border-radius: var(--ao-radius-lg);
  background: var(--ao-bg-subtle);
}
.ao-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.85rem;
  font-size: var(--ao-step-sm);
}
.ao-contact-list li {
  display: grid;
  gap: 0.15rem;
}

/* ---------- Closing CTA strip ---------- */
.ao-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--ao-border);
  border-radius: var(--ao-radius-lg);
  background:
    linear-gradient(0deg, var(--ao-bg-subtle), var(--ao-bg-subtle)) padding-box,
    var(--ao-surface);
}
.ao-cta h2 {
  margin-bottom: 0.35rem;
}

/* ---------- Product pages: breadcrumbs, plans, roles ---------- */
.ao-crumbs {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.ao-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ao-step-sm);
  color: var(--ao-text-muted);
}
.ao-crumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ao-crumbs li + li::before {
  content: "/";
  color: var(--ao-n400);
}
.ao-crumbs a {
  color: var(--ao-text-muted);
  text-decoration: none;
}
.ao-crumbs a:hover {
  color: var(--ao-text);
  text-decoration: underline;
}
.ao-crumbs [aria-current="page"] {
  color: var(--ao-text);
}

.ao-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.ao-prose p {
  color: var(--ao-text-muted);
}
.ao-prose p + p {
  margin-top: 1rem;
}

/* Plans: equal weight, no artificial "recommended" badge */
.ao-plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
}
.ao-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ao-surface);
  border: 1px solid var(--ao-border);
  border-radius: var(--ao-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--ao-shadow-sm);
}
.ao-plan__name {
  font-family: var(--ao-font-display);
  font-size: var(--ao-step-lg);
  margin: 0 0 0.5rem;
}
.ao-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}
.ao-plan__amount {
  font-family: var(--ao-font-display);
  font-size: var(--ao-step-xl);
  color: var(--ao-text);
}
.ao-plan__unit {
  font-size: var(--ao-step-sm);
  color: var(--ao-text-muted);
}
.ao-plan__list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: var(--ao-step-sm);
}
.ao-plan__list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.5rem;
  align-items: start;
}
.ao-plan__list li::before {
  content: "\2713";
  color: var(--ao-success);
  font-weight: 700;
  line-height: 1.45;
}
.ao-plan details {
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--ao-step-sm);
}
.ao-plan summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ao-blue);
  font-weight: 500;
}

/* Role chips: the data gives one line per role, so show names, not filler */
.ao-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ao-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--ao-border);
  border-radius: 999px;
  background: var(--ao-bg-subtle);
  font-size: var(--ao-step-sm);
  color: var(--ao-text);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ao-sample {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .ao-fade-in {
    animation: ao-fade 260ms ease both;
  }
  @keyframes ao-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ao-sample,
  .ao-fade-in {
    transition: none;
    animation: none;
  }
}