/* ══ A.I.M.S. — the component layer, taken FROM THE KIT ══════════════════════════════════════
   Every number here was read out of the AgenticUI component sets in
   `keqSV0hR8Y58BMCs9MNsNO`, not chosen. The kit already did this work — 264 Button variants
   alone — and hand-rolling a button beside it is throwing that away.

   THE ONE RULE THIS FILE EXISTS TO ENCODE: **the component overrides the token page.**
   FUNDAMENTALS/CORNER RADIUS lists 8px for "controls". Not one actual control uses it —
   Button lg/md are 10, Button sm is 4, Text Input is 10. `--aims-r-control:8px` is a token
   nothing honours. Every value below was therefore read off the component set itself, and
   where a number is DERIVED rather than READ it says so on the line.

   MEASURED (443 components on the Button page, 47 on the Input page):
     Button    lg h40 r10 pad 8/16  · md h32 r10 pad 8/12 · sm h24 r4 pad 8/8
               label Departure Mono Regular — lg 13, md 10, sm 10
               gap 4, except lg with an icon which is 8
     Input     md h40 r10 · sm h32 r10 · label Departure Mono Regular 12
               value Geist Regular — md 14, sm 13

   The variant arithmetic settles what would otherwise be a guess: Button's six Types across
   three sizes is exactly 264, and the Geist-labelled `Type=primary|secondary` set across two
   sizes is exactly 176 — that second set is SocialButton, not Button. So button labels are
   mono; Geist 14 belongs to the social sign-in row. Counts, not assumption.

   Also corrected: the kit ships a full state matrix — default / hover / focus / disabled /
   LOADING. Shipping only default and hover is shipping a quarter of a component.

   STRUCTURE FROM THE KIT, COLOUR FROM OUR THEME. The kit is light-first: its primary button is
   #000000 with a white label. Our surfaces are dark, and the designed Landing frame shows the
   primary CTA as accent fill with a BLACK label. So sizes, padding, radii, states and type come
   from the kit unchanged; the palette comes from aims-tokens.css. Nothing is invented in between.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* ── BUTTON ─ from `Button` (264 variants) ──────────────────────────────────────────────────
   lg 40h · md 32h · sm 24h · radius 10 · padding 8/16 · gap 4 text, 8 with icon           */
.aims-btn{
  --_h:40px; --_px:16px; --_fs:13px; --_gap:4px; --_r:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--_gap);
  height:var(--_h); padding:0 var(--_px); border-radius:var(--_r);
  font-family:var(--aims-chrome); font-size:var(--_fs); font-weight:400; letter-spacing:0;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .16s var(--aims-settle), border-color .16s var(--aims-settle),
             color .16s var(--aims-settle);
}
.aims-btn--md{ --_h:32px; --_px:12px; --_fs:10px }
/* sm breaks the radius ladder — 4, not 10. At 24px tall a 10px radius eats the whole edge, so
   the kit steps it down. Inheriting lg's radius here is the mistake this line prevents. */
.aims-btn--sm{ --_h:24px; --_px:8px;  --_fs:10px; --_r:4px }
.aims-btn--icon{ width:var(--_h); padding:0 }
/* only lg opens the gap for an icon; md and sm stay at 4 */
.aims-btn:has(.aims-btn__icon){ --_gap:8px }
.aims-btn--md:has(.aims-btn__icon),
.aims-btn--sm:has(.aims-btn__icon){ --_gap:4px }

/* primary — the kit fills it solid; on our dark ground that fill is the accent, and the label
   is BLACK because black on #ff8806 is ~9:1 while white is ~2.3:1 */
.aims-btn--primary{ background:var(--aims-accent); border-color:var(--aims-accent);
  color:var(--aims-on-accent) }
.aims-btn--primary:hover{ background:var(--aims-accent-2); border-color:var(--aims-accent-2) }

.aims-btn--secondary{ background:var(--aims-surface); border-color:var(--aims-border);
  color:var(--aims-text) }
.aims-btn--secondary:hover{ border-color:var(--aims-muted) }

.aims-btn--ghost{ background:transparent; border-color:transparent; color:var(--aims-text-3) }
.aims-btn--ghost:hover{ background:var(--aims-surface); color:var(--aims-text) }

.aims-btn--destructive{ background:var(--aims-danger); border-color:var(--aims-danger); color:#fff }
.aims-btn--destructive:hover{ filter:brightness(1.08) }

/* focus is a REAL state in the kit, not an afterthought. Never set border-radius in a
   :focus-visible rule — the browser already contours the outline to the element's own radius,
   and an explicit radius flattens the shape on keyboard focus. */
.aims-btn:focus-visible{ outline:2px solid var(--aims-accent); outline-offset:2px }

.aims-btn:disabled,.aims-btn[aria-disabled="true"]{
  opacity:.4; cursor:not-allowed; pointer-events:none }

/* loading — a state the kit ships and most hand-rolled buttons omit, which is why a slow action
   looks like a dead button */
.aims-btn[data-loading="true"]{ color:transparent; pointer-events:none; position:relative }
.aims-btn[data-loading="true"]::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:var(--aims-on-accent); animation:aims-spin .7s linear infinite }
.aims-btn--secondary[data-loading="true"]::after,
.aims-btn--ghost[data-loading="true"]::after{ color:var(--aims-text) }
@keyframes aims-spin{ to{ transform:rotate(360deg) } }

/* ── BUTTON GROUP ─ from `ButtonGroup` — gap 10 ──────────────────────────────────────────── */
.aims-btn-group{ display:inline-flex; align-items:center; gap:10px }

/* ── TEXT INPUT ─ from `Text input` ──────────────────────────────────────────────────────────
   label Departure Mono 12, #616161 resting and lifting to full contrast on focus;
   states default / hover / focus / disabled / error / success / warning                     */
.aims-field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.aims-field__label{
  font-family:var(--aims-chrome); font-size:12px; line-height:18px;
  letter-spacing:.3px; color:var(--aims-muted-2) }
.aims-field:focus-within .aims-field__label{ color:var(--aims-text) }

/* radius 10, NOT --aims-r-control. The token page says 8 and the component says 10; the
   component is what the designer drew. Value text is Geist — only the label is mono. */
.aims-input{
  height:40px; padding:0 12px; width:100%; min-width:0;
  background:var(--aims-surface); color:var(--aims-text);
  border:1px solid var(--aims-border); border-radius:10px;
  font-family:var(--aims-sans); font-size:14px;
  transition:border-color .16s var(--aims-settle) }
.aims-input--sm{ height:32px; font-size:13px }
.aims-input::placeholder{ color:var(--aims-muted-2) }
.aims-input:hover{ border-color:var(--aims-muted-2) }
.aims-input:focus{ outline:none; border-color:var(--aims-accent) }
.aims-input:disabled{ opacity:.45; cursor:not-allowed }

.aims-field[data-state="error"]   .aims-input{ border-color:var(--aims-danger) }
.aims-field[data-state="success"] .aims-input{ border-color:var(--aims-ok) }
.aims-field[data-state="warning"] .aims-input{ border-color:var(--aims-accent) }

/* helper text is part of the component in the kit, not a loose <p> underneath it */
.aims-field__help{ font-family:var(--aims-sans); font-size:12px; color:var(--aims-muted) }
.aims-field[data-state="error"]   .aims-field__help{ color:var(--aims-danger) }
.aims-field[data-state="success"] .aims-field__help{ color:var(--aims-ok) }

/* ── BADGE ─ radius 6 per the kit ───────────────────────────────────────────────────────── */
.aims-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--aims-r-badge);
  font-family:var(--aims-chrome); font-size:10px; letter-spacing:.4px; text-transform:uppercase;
  border:1px solid transparent }
.aims-badge--accent{ background:var(--aims-accent); color:var(--aims-on-accent) }
.aims-badge--outline{ background:transparent; border-color:var(--aims-border); color:var(--aims-text-3) }
.aims-badge--ok{ background:transparent; border-color:var(--aims-ok); color:var(--aims-ok) }
.aims-badge--danger{ background:var(--aims-danger); color:#fff }

/* ── THE NAME ────────────────────────────────────────────────────────────────────────────
   One rule, every surface. ACHEEVY is frosty white on dark and neon green on light, and it
   is never set in the body face — see --aims-wordmark. Per-page copies of this rule are what
   let the name render three different ways across three sites. */
.nm-acheevy{
  font-family:var(--aims-wordmark);
  color:var(--aims-acheevy);
  font-weight:400;              /* the mono has one weight; 700 would synthesise a fake bold */
  letter-spacing:.01em;
}

/* ── CARD ─ radius 12 + elevation1 per the kit ──────────────────────────────────────────── */
.aims-card{
  background:var(--aims-surface); border:1px solid var(--aims-border);
  border-radius:var(--aims-r-card); box-shadow:var(--aims-e1); padding:20px }

/* ── the reduced-motion guard already lives in aims-tokens.css and covers the spinner ───── */

/* THE FUNNEL RAIL — the official outro as site chrome on the product surfaces.
   Mirrors the blog post-outro's vocabulary so the three platforms read as one house. */
.funnel-rail{position:relative;margin:56px auto 0;max-width:var(--aims-measure,72ch);
  padding:28px 26px;background:var(--aims-surface-2);border:1px solid var(--aims-border);
  border-radius:var(--aims-r-card,14px);text-align:center}
.funnel-eyebrow{margin:0 0 6px;font:400 9px var(--aims-chrome);letter-spacing:.7px;
  text-transform:uppercase;color:var(--aims-accent)}
.funnel-title{margin:0 0 8px;font:600 clamp(19px,2.4vw,25px)/1.25 var(--aims-sans);
  color:var(--aims-text)}
.funnel-sub{margin:0 auto 18px;max-width:52ch;font:400 14px/1.6 var(--aims-sans);
  color:var(--aims-text-3)}
.funnel-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.funnel-by{margin:16px 0 0;font:400 10px var(--aims-chrome);letter-spacing:.5px;
  color:var(--aims-muted)}
@media (max-width:560px){
  .funnel-rail{padding:22px 16px;margin-top:40px}
  .funnel-actions{flex-direction:column}
  .funnel-actions .aims-btn{width:100%}
}

/* THE SUBSCRIBE INVITATION — earned, not thrown. Appears after real interest, exits three ways. */
.sub-invite{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  animation:sub-fade .22s var(--aims-settle,ease) both}
.sub-invite-card{position:relative;width:min(92vw,430px);padding:26px 24px 20px;
  background:var(--aims-surface);border:1px solid var(--aims-border);
  border-radius:var(--aims-r-card,14px);box-shadow:0 30px 70px -24px #000;
  animation:sub-rise .26s var(--aims-settle,ease) both}
.sub-invite-x{position:absolute;top:10px;right:12px;width:32px;height:32px;line-height:1;
  font-size:20px;background:none;border:0;color:var(--aims-text-3);cursor:pointer;border-radius:8px}
.sub-invite-x:hover{color:var(--aims-text);background:var(--aims-surface-2)}
.sub-invite-eyebrow{margin:0 0 6px;font:400 9px var(--aims-chrome);letter-spacing:.7px;
  text-transform:uppercase;color:var(--aims-accent)}
.sub-invite-title{margin:0 0 8px;font:600 20px/1.25 var(--aims-sans);color:var(--aims-text)}
.sub-invite-sub{margin:0 0 16px;font:400 13px/1.55 var(--aims-sans);color:var(--aims-text-3)}
.sub-invite-form{display:flex;flex-direction:column;gap:9px}
.sub-invite-note{margin:10px 0 0;min-height:1.2em;font:400 12px/1.5 var(--aims-sans);
  color:var(--aims-ok)}
.sub-invite-by{margin:14px 0 0;font:400 9px var(--aims-chrome);letter-spacing:.5px;
  color:var(--aims-muted);text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes sub-fade{from{opacity:0}to{opacity:1}}
@keyframes sub-rise{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}
/* Reduced motion: the invitation still appears, it just does not move. */
.sub-invite-still .sub-invite,.sub-invite-still .sub-invite-card{animation:none}
@media (prefers-reduced-motion:reduce){.sub-invite,.sub-invite-card{animation:none}}
@media (max-width:480px){
  .sub-invite{place-items:end center}
  .sub-invite-card{width:100vw;border-radius:16px 16px 0 0;padding:22px 18px 18px}
}