/* ============================================================
   AI Hold'em Trainer — site chrome
   Header, footer and the marketing front page. Loaded on every
   page; the trainer app itself lives in trainer.css under .aot
   and is untouched by any of this.
   ============================================================ */

body.aotsite {
  /* GetLionMail-paletti: syvä sinimusta pohja, kultaiset korostukset ja
     lasipaneelit oranssinsävyisin reunoin. Muuttujien nimet ovat
     ennallaan, joten kaikki alla olevat säännöt toimivat sellaisenaan —
     vain arvot vaihtuvat. Poikkeuksena vaaleat osiot: GetLionMailissa
     ei ole vaaleaa taustaa lainkaan, joten --s-paper / --s-ink kääntyvät
     tummaksi sävypinnaksi ja vaaleaksi tekstiksi. */
  --s-bg:      #0b0f19;
  --s-bg-2:    #131a2a;
  --s-surf:    #131a2a;
  --s-surf-2:  #1a2236;
  --s-line:    rgba(255,255,255,.09);
  --s-line-2:  rgba(255,255,255,.16);
  --s-tx:      #f5f5f7;
  --s-tx-2:    #a0a7b8;
  --s-tx-3:    #79808f;

  --s-white:   #131a2a;
  --s-paper:   #131a2a;
  --s-paper-2: #1a2236;
  --s-ink:     #f5f5f7;
  --s-ink-2:   #a0a7b8;

  --s-o:       #f0791c;
  --s-o-hi:    #ff9d4d;
  --s-o-3:     #ffc876;
  --s-o-lo:    #c2560a;
  --s-o-soft:  rgba(240,138,36,.10);
  --s-o-line:  rgba(240,138,36,.28);
  --s-o-glow:  rgba(240,138,36,.30);

  --s-good:    #3dd68c;
  --s-violet:  #7c5cfc;
  --s-blue:    #4f7cff;

  /* Kolme liukuväriä, joilla GetLionMail on tunnistettava: napit,
     tekstikorostukset ja ikonilaatat. */
  --s-grad:     linear-gradient(90deg, var(--s-o), var(--s-o-hi));
  --s-grad-tx:  linear-gradient(90deg, var(--s-o), var(--s-o-3));
  --s-grad-ico: linear-gradient(135deg, var(--s-o), var(--s-o-3));
  /* Lasipaneelin ylänurkan hehku — sama kaava joka kortissa. */
  --s-glass:    radial-gradient(140% 100% at 0% 0%, var(--s-o-soft) 0%, transparent 55%);

  --s-r:   16px;
  --s-r-s: 10px;
  --s-shadow:   0 20px 60px rgba(0,0,0,.35);
  --s-shadow-o: 0 10px 30px rgba(240,138,36,.30);

  --s-f-disp: "Outfit", "Segoe UI", system-ui, sans-serif;
  --s-f-body: "Inter", "Segoe UI", system-ui, sans-serif;

  background: var(--s-bg);
  color: var(--s-tx);
  font-family: var(--s-f-body);
}

.aotsite-header, .aotsite-footer, .aotsite-main { font-family: var(--s-f-body); }
.aotsite-header *, .aotsite-footer *, .aotsite-main * { box-sizing: border-box; }
.aotsite-header h1, .aotsite-header h2, .aotsite-header h3,
.aotsite-footer h1, .aotsite-footer h2, .aotsite-footer h3,
.aotsite-main h1, .aotsite-main h2, .aotsite-main h3 {
  font-family: var(--s-f-disp); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; margin: 0; text-wrap: balance; color: var(--s-tx);
}
.aotsite-light h1, .aotsite-light h2, .aotsite-light h3 { color: var(--s-ink); }
.aotsite-main p { margin: 0; color: inherit; }
.aotsite-main a { text-decoration: none; color: inherit; }
.aotsite-main ul, .aotsite-main li { margin: 0; padding: 0; list-style: none; }
.aotsite-light { color: var(--s-ink); }
.aotsite-dark { color: var(--s-tx); }

/* ============================================================
   Header
   ============================================================ */
.aotsite-header {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.aotsite-header.is-scrolled {
  background: rgba(11,15,25,.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--s-line);
}
.aotsite-header-in {
  max-width: 1280px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 28px;
}
.aotsite-logo {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--s-tx); font-family: var(--s-f-disp); font-weight: 800; font-size: 17px;
}
.aotsite-logo .mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: var(--s-grad-ico); color: #f0f5fa; font-size: 15px;
  box-shadow: var(--s-shadow-o);
}
.aotsite-logo .txt em {
  font-style: normal; font-weight: 800;
  background: var(--s-grad-tx); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aotsite-nav { display: flex; align-items: center; gap: 26px; margin-left: 30px; }
.aotsite-nav a {
  position: relative; font-size: 15px; font-weight: 500; color: var(--s-tx-2);
  transition: color .25s; white-space: nowrap;
}
/* Alleviivaus koskee vain ylatason linkkeja: pudotusvalikon linkit ovat
   myos .aotsite-nav a, joten ne rajataan >-valitsimella ulos. */
.aotsite-nav > a { padding: 8px 0; }
.aotsite-nav > a::after, .aotsite-drop > .aotsite-dropbtn::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--s-grad-tx); transition: width .25s;
}
.aotsite-nav a:hover { color: var(--s-tx); }
.aotsite-nav > a:hover::after,
.aotsite-drop:hover > .aotsite-dropbtn::after,
.aotsite-drop:focus-within > .aotsite-dropbtn::after { width: 100%; }
.aotsite-nav > a.is-current { color: var(--s-o); }
.aotsite-nav > a.is-current::after { width: 100%; }

/* ---------- "Play" / "Solvers" dropdowns ----------
   Two grouped menus replace what used to be five separate top-level
   links — that was the thing actually breaking the header layout
   between ~861px and ~1180px, where logo + 8 items + login + CTA had
   nowhere left to go. Hover opens it on a mouse; :focus-within keeps
   it reachable by keyboard (tab into a link, don't need a click). */
.aotsite-drop { position: relative; }
.aotsite-dropbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--s-tx-2); background: none; border: 0; cursor: pointer;
  transition: color .25s;
}
.aotsite-dropbtn i { font-style: normal; font-size: 10px; opacity: .8; transition: transform .16s; }
.aotsite-drop:hover .aotsite-dropbtn,
.aotsite-drop:focus-within .aotsite-dropbtn { color: var(--s-tx); }
.aotsite-drop.is-current .aotsite-dropbtn { color: var(--s-o); }
.aotsite-drop.is-current > .aotsite-dropbtn::after { width: 100%; }
.aotsite-drop:hover .aotsite-dropbtn i,
.aotsite-drop:focus-within .aotsite-dropbtn i { transform: rotate(180deg); }

.aotsite-dropmenu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 230px;
  padding: 8px; border-radius: 14px; background: var(--s-surf-2); border: 1px solid var(--s-line);
  box-shadow: var(--s-shadow); flex-direction: column; gap: 2px;
}
.aotsite-drop:hover .aotsite-dropmenu,
.aotsite-drop:focus-within .aotsite-dropmenu { display: flex; }
.aotsite-dropmenu a {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px;
  color: var(--s-tx-2); transition: background .14s, color .14s;
}
.aotsite-dropmenu a:hover, .aotsite-dropmenu a:focus-visible { background: var(--s-surf); color: var(--s-tx); }
.aotsite-dropmenu a.is-current { color: var(--s-o); background: rgba(240,138,36,.08); }
.aotsite-dropmenu a b { font-size: 13.5px; font-weight: 700; }
.aotsite-dropmenu a span { font-size: 12px; color: var(--s-tx-3); }
.aotsite-dropmenu a.is-current span { color: inherit; opacity: .8; }
.aotsite-cta {
  position: relative; overflow: hidden;
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px;
  border-radius: 12px; font-family: var(--s-f-body); font-weight: 600; font-size: 15px;
  color: #f0f5fa; background: var(--s-grad); background-size: 160% 100%; background-position: 0 0;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background-position .3s;
}
.aotsite-cta::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-130%) rotate(8deg); pointer-events: none;
}
.aotsite-cta:hover::before { animation: aotsiteShine 1.1s ease; }
.aotsite-cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 10px 30px rgba(240,138,36,.3); }
.aotsite-cta.big { padding: 16px 30px; font-size: 16px; border-radius: 14px; }
.aotsite-mnav .aotsite-cta { margin-left: 0; justify-content: center; }

.aotsite-burger {
  display: none; flex: none; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--s-line); background: var(--s-surf); position: relative;
}
.aotsite-burger span, .aotsite-burger span::before, .aotsite-burger span::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--s-tx);
  border-radius: 2px; transition: transform .2s, opacity .2s;
}
.aotsite-burger span { top: 18px; }
.aotsite-burger span::before { top: -6px; }
.aotsite-burger span::after { top: 6px; }
.aotsite-burger[aria-expanded="true"] span { background: transparent; }
.aotsite-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.aotsite-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.aotsite-mnav {
  display: none; flex-direction: column; gap: 4px; padding: 6px 20px 18px;
  border-top: 1px solid var(--s-line);
}
.aotsite-mnav-h {
  margin-top: 8px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--s-tx-3);
}
.aotsite-mnav a { padding: 12px 10px; border-radius: 9px; color: var(--s-tx-2); font-weight: 700; }
.aotsite-mnav a:not(.aotsite-cta):hover { background: var(--s-surf); color: var(--s-tx); }
.aotsite-mnav.is-open { display: flex; animation: aotsiteFade .2s ease-out; }
body.aotsite-navlock { overflow: hidden; }

@media (max-width: 1040px) {
  .aotsite-nav, .aotsite-header .aotsite-cta { display: none; }
  .aotsite-burger { display: block; }
  .aotsite-header-in { padding: 12px 18px; }
}

@keyframes aotsiteFade { from { opacity: 0; transform: translateY(-6px); } }

/* ============================================================
   Scroll reveal — everything with .aotsite-reveal starts hidden
   and slid down a touch; site.js flips .is-in via
   IntersectionObserver the first time it crosses into view.
   prefers-reduced-motion gets the end state immediately, no
   animation, per user OS preference rather than a site setting.
   ============================================================ */
.aotsite-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.aotsite-reveal.is-in { opacity: 1; transform: translateY(0); }
/* Staggered entrance inside a grid — each card a beat behind the last. */
.aotsite-fgrid > .aotsite-reveal:nth-child(1), .aotsite-igrid > .aotsite-reveal:nth-child(1), .aotsite-mgrid > .aotsite-reveal:nth-child(1) { transition-delay: 0s; }
.aotsite-fgrid > .aotsite-reveal:nth-child(2), .aotsite-igrid > .aotsite-reveal:nth-child(2), .aotsite-mgrid > .aotsite-reveal:nth-child(2) { transition-delay: .07s; }
.aotsite-fgrid > .aotsite-reveal:nth-child(3), .aotsite-igrid > .aotsite-reveal:nth-child(3), .aotsite-mgrid > .aotsite-reveal:nth-child(3) { transition-delay: .14s; }
.aotsite-fgrid > .aotsite-reveal:nth-child(4), .aotsite-igrid > .aotsite-reveal:nth-child(4), .aotsite-mgrid > .aotsite-reveal:nth-child(4) { transition-delay: .21s; }
.aotsite-fgrid > .aotsite-reveal:nth-child(5), .aotsite-igrid > .aotsite-reveal:nth-child(5) { transition-delay: .28s; }
.aotsite-fgrid > .aotsite-reveal:nth-child(6), .aotsite-igrid > .aotsite-reveal:nth-child(6) { transition-delay: .35s; }
.aotsite-igrid > .aotsite-reveal:nth-child(7) { transition-delay: .42s; }
.aotsite-igrid > .aotsite-reveal:nth-child(8) { transition-delay: .49s; }
@media (prefers-reduced-motion: reduce) {
  .aotsite-reveal { opacity: 1; transform: none; transition: none; }
}

@keyframes aotsiteDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}
@keyframes aotsiteDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 16px) scale(1.04); }
}
@keyframes aotsiteGradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes aotsitePulseDot {
  0%, 100% { box-shadow: 0 0 0 0 var(--s-o-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes aotsiteFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes aotsiteShine {
  from { transform: translateX(-130%) rotate(8deg); }
  to   { transform: translateX(130%) rotate(8deg); }
}
@keyframes aotsiteSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .aotsite-glow i, .aotsite-felt, .aotsite-cband::before { animation: none !important; }
}

/* ============================================================
   Sections shared by the landing page
   ============================================================ */
.aotsite-main { position: relative; overflow-x: clip; }
.aotsite-in { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.aotsite-section { padding: 88px 0; }
.aotsite-section.aotsite-light { background: var(--s-paper); color: var(--s-ink); }
.aotsite-section.aotsite-dark  { background: var(--s-bg); color: var(--s-tx); }

.aotsite-shead { max-width: 60ch; margin-bottom: 46px; }
.aotsite-shead h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 10px; }
.aotsite-shead-p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--s-tx-2); }
.aotsite-light .aotsite-shead-p { color: var(--s-ink-2); }

/* GetLionMailin kicker ei ole pilleri vaan kultainen versaalirivi. */
.aotsite-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: none; border: 0; color: var(--s-o);
}
.aotsite-dark .aotsite-tag { background: none; border: 0; color: var(--s-o); }
.aotsite-tag.hot { background: none; border: 0; color: var(--s-o-3); }

/* ---------- hero ---------- */
.aotsite-hero {
  position: relative; padding: 80px 0 60px; background: var(--s-bg); overflow: hidden;
}
.aotsite-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 30% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 30% 20%, #000 0%, transparent 75%);
}
.aotsite-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aotsite-glow i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; will-change: transform; }
.aotsite-glow i:nth-child(1) {
  width: 520px; height: 520px; top: -160px; left: -120px;
  background: radial-gradient(circle, var(--s-o) 0%, transparent 70%);
  animation: aotsiteDrift 22s ease-in-out infinite;
}
.aotsite-glow i:nth-child(2) {
  width: 460px; height: 460px; top: 60px; right: -140px;
  background: radial-gradient(circle, var(--s-violet) 0%, transparent 70%);
  animation: aotsiteDrift2 26s ease-in-out infinite;
}
.aotsite-herogrid {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.aotsite-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 6px 16px 6px 8px; border-radius: 99px;
  background: var(--s-surf); border: 1px solid var(--s-line);
  font-size: 13px; font-weight: 600; color: var(--s-tx-2);
}
.aotsite-eyebrow b {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--s-grad-ico); color: #f0f5fa; font-size: 11px;
  animation: aotsitePulseDot 2.4s ease-out infinite;
}
.aotsite-herotext h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 15ch; }
.aotsite-herotext h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--s-o), var(--s-o-3), var(--s-o-hi), var(--s-o));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aotsiteGradShift 6s ease infinite;
}
.aotsite-lede { margin-top: 18px; max-width: 52ch; font-size: 17px; color: var(--s-tx-2); line-height: 1.6; }
.aotsite-herobtns { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.aotsite-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--s-tx);
  background: rgba(255,255,255,.03); border: 1px solid var(--s-line-2);
  transition: background .2s, transform .2s;
}
.aotsite-ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.aotsite-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.aotsite-fact {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
  border-radius: var(--s-r-s); background: rgba(255,255,255,.03); border: 1px solid var(--s-line);
}
.aotsite-fact b {
  font-family: var(--s-f-disp); font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  background: var(--s-grad-tx); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aotsite-fact span { font-size: 12px; color: var(--s-tx-2); }

/* ---------- decorative table graphic ---------- */
.aotsite-heroart { display: flex; justify-content: center; }
.aotsite-felt {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 3.1;
  border-radius: 50% / 46%;
  background: linear-gradient(160deg, #1a6f52 0%, #0c4a38 60%, #083326 100%);
  border: 10px solid #241811;
  box-shadow: var(--s-shadow), inset 0 0 40px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  animation: aotsiteFloatY 5s ease-in-out infinite;
}
.aotsite-fan, .aotsite-board { display: flex; gap: 8px; }
.aotsite-felt .c {
  position: relative; width: 46px; height: 64px; border-radius: 7px;
  background: linear-gradient(160deg, #fff 62%, #eee 100%);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: 5px 0 0 6px; font-family: var(--s-f-disp); font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.aotsite-felt .c i { font-style: normal; font-size: 14px; line-height: 1; margin-top: 2px; }
.aotsite-felt .c.su-s, .aotsite-felt .c.su-c { color: #15171f; }
.aotsite-felt .c.su-h { color: #d61f3c; }
.aotsite-felt .c.su-d { color: #1a6fd4; }
/* Two hole cards now, not four — a small symmetric fan instead of the
   wider four-card spread the Omaha version used. */
.aotsite-fan .c:nth-child(1) { transform: rotate(-6deg); }
.aotsite-fan .c:nth-child(2) { transform: rotate(6deg); }
.aotsite-potpill {
  padding: 6px 16px; border-radius: 99px; background: rgba(6,10,8,.55); border: 1px solid rgba(255,255,255,.16);
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85);
  animation: aotsitePulseDot 2.4s ease-out infinite;
}

@media (max-width: 980px) {
  .aotsite-herogrid { grid-template-columns: 1fr; }
  .aotsite-heroart { order: -1; }
  .aotsite-felt { max-width: 340px; }
}

/* ---------- feature grid ---------- */
.aotsite-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aotsite-fcard {
  position: relative; padding: 28px; border-radius: var(--s-r);
  background: var(--s-glass), rgba(255,255,255,.03);
  border: 1px solid var(--s-o-line);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.aotsite-fcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), var(--s-o-soft), transparent 70%);
}
.aotsite-fcard:hover {
  transform: translateY(-6px); border-color: rgba(240,138,36,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(240,138,36,.15) inset;
}
.aotsite-fcard:hover::before { opacity: 1; }
.aotsite-fcard > * { position: relative; z-index: 1; }
.aotsite-ficon {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: 12px; margin-bottom: 16px; background: var(--s-grad-ico); color: #f0f5fa;
  font-family: var(--s-f-disp); font-weight: 800; font-size: 20px;
}
.aotsite-fcard h3 { font-size: 16.5px; margin-bottom: 8px; }
.aotsite-fcard p { font-size: 14px; line-height: 1.6; color: var(--s-ink-2); }

@media (max-width: 900px) { .aotsite-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .aotsite-fgrid { grid-template-columns: 1fr; } }

/* ---------- method grid (dark) ---------- */
.aotsite-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.aotsite-mcard {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: var(--s-r);
  background: var(--s-glass), var(--s-surf);
  border: 1px solid var(--s-o-line);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.aotsite-mcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), var(--s-o-soft), transparent 70%);
}
.aotsite-mcard:hover::before { opacity: 1; }
.aotsite-mcard > * { position: relative; z-index: 1; }
.aotsite-mcard:hover {
  border-color: rgba(240,138,36,.55); transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.aotsite-mcard h3 { font-size: 15.5px; margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.aotsite-mcard h3 span {
  width: 23px; height: 23px; flex: none; display: grid; place-items: center; border-radius: 6px;
  font-family: var(--s-f-body); font-size: 11.5px; font-weight: 700; background: var(--s-o-soft); color: var(--s-o-hi);
  border: 1px solid var(--s-o-line);
}
.aotsite-mcard p { font-size: 13.5px; line-height: 1.65; color: var(--s-tx-2); }
.aotsite-mcard p + p { margin-top: 9px; }

@media (max-width: 760px) { .aotsite-mgrid { grid-template-columns: 1fr; } }

/* ---------- "everything on this site" inventory ---------- */
.aotsite-igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aotsite-icard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; padding: 28px; border-radius: var(--s-r);
  background: var(--s-glass), var(--s-surf);
  border: 1px solid var(--s-o-line);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.aotsite-icard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), var(--s-o-soft), transparent 70%);
}
.aotsite-icard:hover::before { opacity: 1; }
.aotsite-icard > * { position: relative; z-index: 1; }
.aotsite-icard:hover {
  transform: translateY(-6px); border-color: rgba(240,138,36,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.aotsite-icard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.aotsite-ipill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: var(--s-o-soft); color: var(--s-o-hi); border: 1px solid var(--s-o-line);
}
.aotsite-ipill.is-free { background: rgba(61,214,140,.13); color: var(--s-good); border-color: rgba(61,214,140,.35); }
.aotsite-icard h3 { font-size: 16.5px; margin-bottom: 8px; color: var(--s-tx); }
.aotsite-icard p { font-size: 13.5px; line-height: 1.6; color: var(--s-tx-2); flex: 1; }
.aotsite-icard a.aotsite-ilink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--s-o-hi);
}
.aotsite-icard a.aotsite-ilink:hover { color: var(--s-o); }

@media (max-width: 900px) { .aotsite-igrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .aotsite-igrid { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.aotsite-pricewrap { display: flex; justify-content: center; }
.aotsite-pricecard {
  position: relative; width: 100%; max-width: 480px; padding: 40px 34px 34px; border-radius: 20px; text-align: center;
  background: var(--s-glass), var(--s-surf);
  border: 1px solid var(--s-o);
  box-shadow: 0 0 0 1px var(--s-o), 0 20px 50px rgba(240,121,28,.16);
  transition: transform .25s;
}
.aotsite-pricecard:hover { transform: translateY(-4px); }
.aotsite-pricebadge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; padding: 5px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  background: var(--s-grad); color: #f0f5fa; border: 0;
}
.aotsite-pricerow { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.aotsite-pricenow { font-family: var(--s-f-disp); font-size: 46px; font-weight: 800; letter-spacing: -.02em; background: var(--s-grad-tx); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aotsite-pricewas { font-size: 19px; font-weight: 700; color: var(--s-tx-3); text-decoration: line-through; }
.aotsite-pricenote { margin-top: 8px; font-size: 13.5px; color: var(--s-tx-2); }
.aotsite-pricelist { list-style: none; margin: 26px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 11px; }
.aotsite-pricelist li { display: flex; gap: 10px; font-size: 14px; color: var(--s-tx-2); line-height: 1.4; }
.aotsite-pricelist li::before { content: "\2713"; flex: none; color: var(--s-good); font-weight: 800; }
.aotsite-pricecard .aotsite-cta { width: 100%; justify-content: center; margin-top: 26px; }
.aotsite-pricefine { margin-top: 14px; font-size: 12.5px; color: var(--s-tx-3); }

/* ---------- final CTA band ---------- */
.aotsite-cband {
  position: relative; padding: 100px 0; text-align: center; overflow: hidden;
  background: var(--s-bg);
}
.aotsite-cband::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--s-violet), transparent 70%);
  filter: blur(80px); opacity: .35;
}
.aotsite-cband-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aotsite-cband h2 { font-size: clamp(24px, 3.4vw, 34px); color: #fff; }
.aotsite-cband p { max-width: 46ch; color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.6; }
.aotsite-cband .aotsite-cta { margin-top: 8px; }

@media (max-width: 620px) {
  .aotsite-in { padding: 0 18px; }
  .aotsite-section { padding: 56px 0; }
}

/* ============================================================
   Footer
   ============================================================ */
.aotsite-footer { background: var(--s-surf); border-top: 1px solid var(--s-line); }
.aotsite-footer-in {
  max-width: 1180px; margin: 0 auto; padding: 52px 32px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px;
}
.aotsite-fbrand p { margin-top: 12px; max-width: 40ch; font-size: 13.5px; line-height: 1.6; color: var(--s-tx-3); }
.aotsite-fcol { display: flex; flex-direction: column; gap: 10px; }
.aotsite-fcol .h { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-tx-3); margin-bottom: 2px; }
.aotsite-fcol a:not(.aotsite-logo) { color: var(--s-tx-2); font-size: 14px; transition: color .15s; }
.aotsite-fcol a:not(.aotsite-logo):hover { color: var(--s-o-hi); }
.aotsite-fbrand .aotsite-logo { color: var(--s-tx); margin-bottom: 2px; }
.aotsite-fnote { font-size: 14px; color: var(--s-tx-3); }
.aotsite-footer-bottom {
  max-width: 1180px; margin: 0 auto; padding: 18px 32px 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--s-line); font-size: 12.5px; color: var(--s-tx-3);
}

@media (max-width: 760px) {
  .aotsite-footer-in { grid-template-columns: 1fr; }
  .aotsite-footer-bottom { padding: 18px 20px 24px; }
}

/* ============================================================
   /trainer/ route wrapper
   ============================================================ */
.aotsite-toolpage { max-width: 1800px; margin: 0 auto; padding: 10px 20px 40px; }
@media (max-width: 620px) { .aotsite-toolpage { padding: 0 0 40px; } }

/* ============================================================
   Account: register / log in / My Account
   ============================================================ */
.aotsite-authwrap { padding: 64px 0; min-height: 60vh; }
.aotsite-authin { display: flex; justify-content: center; }
.aotsite-authcard {
  width: 100%; max-width: 440px; padding: 34px 32px;
  border-radius: var(--s-r); background: var(--s-glass), var(--s-surf); border: 1px solid var(--s-o-line);
  box-shadow: var(--s-shadow);
}
.aotsite-authcard h1 { font-size: 26px; margin-top: 10px; }
.aotsite-accountmeta {
  display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
  padding: 16px 18px; border-radius: var(--s-r-s); background: var(--s-bg); border: 1px solid var(--s-line);
}
.aotsite-accountmeta div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.aotsite-accountmeta .lab { color: var(--s-tx-3); }
.aotsite-accountmeta b { font-weight: 700; color: var(--s-tx); }
.aotsite-accountsub { font-size: 15px; margin-top: 28px; margin-bottom: 4px; }
.aotsite-authform { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.aotsite-authform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--s-tx-2); }
.aotsite-authform input {
  font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px;
  background: var(--s-bg); border: 1px solid var(--s-line-2); color: var(--s-tx);
}
.aotsite-authform input:focus-visible { outline: 2px solid var(--s-o); outline-offset: 1px; border-color: var(--s-o-line); }
.aotsite-authform button { margin-top: 4px; border: 0; cursor: pointer; }
.aotsite-formerr {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px;
  background: rgba(255,86,86,.12); border: 1px solid rgba(255,86,86,.35); color: #ff9b9b;
}
.aotsite-formnote {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px;
  background: rgba(61,214,140,.12); border: 1px solid rgba(61,214,140,.35); color: var(--s-good);
}
.aotsite-authswitch { margin-top: 20px; font-size: 13.5px; color: var(--s-tx-3); }
.aotsite-authswitch a { color: var(--s-o-hi); font-weight: 700; }
.aotsite-accountcard .aotsite-ghost { display: inline-block; margin-top: 26px; }

/* ============================================================
   Osioiden vuorottelu
   GetLionMailissa taustat vuorottelevat: perustausta, sitten
   sävypinta. Etusivulla on kaksi .aotsite-light-osiota peräkkäin,
   joten jälkimmäinen palautetaan perustaustalle sisarvalitsimella —
   näin rytmi säilyy ilman että sivupohjaan tarvitsee koskea.
   ============================================================ */
.aotsite-section.aotsite-light + .aotsite-section.aotsite-light {
  background: var(--s-bg);
}