/* =========================================================
   Page — AI agent («أثير»)

   Band order: hero + console · fact strip · capabilities ·
   worked examples · Arabic writing · the four-step loop ·
   limits and permissions · AI balance · where it lives ·
   specifications · FAQ · closer.

   The console itself is components/console.css; everything here
   is the page's own furniture. Every frame is drawn from the
   theme's surfaces — no screenshots — so it follows light and
   dark and cannot age against the real product.

   Reads only layer-2 semantic tokens. Zero hardcoded colour.
   ========================================================= */

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.ag-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-20);
}

/* The same soft light the home and video pages open with, so the
   three marketing pages share one opening voice. */
.ag-hero__glow {
  position: absolute;
  inset-block-start: -22%;
  inset-inline-end: -14%;
  width: min(680px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-gold-soft) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.ag-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.ag-hero__copy { max-width: 34rem; }

.ag-hero__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1);
  text-wrap: balance;
}
/* The marked phrase holds one line in Arabic, where it is four
   short words. English says the same thing in six longer ones and
   has to be allowed to break, or it runs out under the console. */
:root[data-lang="ar"] .ag-hero__title .u-word-mark { white-space: nowrap; }

.ag-hero__lead {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

.ag-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ag-hero__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (min-width: 980px) {
  .ag-hero { padding-block: var(--space-20) var(--space-24); }
  .ag-hero__inner { grid-template-columns: 1fr 1.05fr; }
}

/* ---------------------------------------------------------
   Capabilities — four groups of real actions
   --------------------------------------------------------- */
.ag-can__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.ag-can__card { position: relative; }

/* The ordinal is absolutely placed, so the title has to be told to
   keep clear of it — English titles here are long enough to run
   straight through the number otherwise. */
.ag-can__card .card__title { padding-inline-end: var(--space-8); }

/* The ordinal sits in the corner as a watermark, not a badge:
   it numbers the groups without competing with the titles. */
.ag-can__num {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-line);
}

.ag-can__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.ag-can__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}
.ag-can__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  rotate: 45deg;
  background: var(--color-growth);
  opacity: 0.75;
}

@media (min-width: 640px) {
  .ag-can__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .ag-can__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------
   Worked examples

   One console per scenario, each beside a short result panel.
   Only the selected panel is in the flow; the rest carry the
   hidden attribute, which keeps them out of the accessibility
   tree as well as out of sight.
   --------------------------------------------------------- */
.ag-run { background: var(--color-canvas-deep); }

.ag-run__switch {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-10);
}

.ag-run__panel {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.ag-run__panel[hidden] { display: none; }

.ag-run__aside {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ag-run__aside-head {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-gold-text);
}
.ag-run__aside-body {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.ag-run__meta { margin: 0; }
.ag-run__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-xs);
}
.ag-run__meta-row dt {
  margin: 0;
  color: var(--color-text-muted);
}
.ag-run__meta-row dd {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-align: end;
}

@media (min-width: 980px) {
  .ag-run__panel { grid-template-columns: 1.55fr 1fr; }
}

/* ---------------------------------------------------------
   Arabic writing — the raw line beside what comes back
   --------------------------------------------------------- */
.ag-write {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.ag-write__side {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.ag-write__side--in {
  border: 1px dashed var(--color-line-strong);
  background: var(--color-surface-sunken);
}
.ag-write__side--out {
  border: 1px solid var(--color-line-gold);
  background: var(--color-surface-raised);
}

.ag-write__label {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}
.ag-write__label--tight { margin-block: var(--space-4) var(--space-2); }

/* The raw input is shown as typed — lowercase, unpunctuated —
   because dressing it up would hide the whole point of the row. */
.ag-write__raw {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.ag-write__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.ag-write__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.ag-write__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The two halves stay stacked at every width. Setting them side
   by side was tried first and dropped: this panel lives in a
   showcase stage that is about 570px wide on a desktop, and a
   paragraph squeezed into a third of that reads worse than the
   raw line it is meant to improve on.

   The arrow between them is a chevron drawn from two borders. */
.ag-write__arrow {
  justify-self: center;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  rotate: 45deg;
}

/* ---------------------------------------------------------
   The four-step loop
   --------------------------------------------------------- */
.ag-loop__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-loop__step { position: relative; }

.ag-loop__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-pill);
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

@media (min-width: 640px) {
  .ag-loop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .ag-loop__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------
   Limits and permissions

   A settings panel, drawn. The locked rows are dimmed and carry
   a padlock; the rest read as switches you could reach.
   --------------------------------------------------------- */
.ag-perm {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.ag-perm__group {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}
.ag-perm__group:first-child { margin-top: 0; }

.ag-perm__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.ag-perm__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* The control sits at the far end of the row, the way a settings
   screen puts it — a switch parked next to its label leaves the
   rest of the panel looking empty. */
/* The state in a word as well as in a colour. The switch is
   decorative; a row that says only «green means on» is unreadable
   to anyone who cannot see the green. The locked group is named by
   its own heading, so only the adjustable rows carry the word. */
.ag-perm__state {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ag-perm__switch { margin-inline-start: auto; }
.ag-perm__state + .ag-perm__switch { margin-inline-start: 0; }

/* A switch drawn from a track and a knob. The locked rows also
   get a hairline across the track, which is what reads as «this
   one is not yours to move». */
.ag-perm__switch {
  position: relative;
  width: 34px;
  height: 19px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-line-strong);
}
.ag-perm__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  transition: inset-inline-start var(--dur-fast) var(--ease-out);
}
.ag-perm__switch--on {
  background: var(--color-growth-soft);
  border-color: var(--color-growth);
}
.ag-perm__switch--on::after {
  inset-inline-start: 17px;
  background: var(--color-growth);
}

.ag-perm__row.is-locked .ag-perm__text { color: var(--color-text-secondary); }

/* The locked switch is dimmed part by part, never as a whole. A
   blanket opacity took the strike down with the track, and the
   strike is the entire signal — under the trial palette, whose
   error tone is a pale rose meant for text, it disappeared. */
.ag-perm__row.is-locked .ag-perm__switch {
  border-color: var(--color-line);
  background: var(--color-surface-sunken);
}
.ag-perm__row.is-locked .ag-perm__switch::after { opacity: 0.45; }
.ag-perm__row.is-locked .ag-perm__switch::before {
  content: "";
  position: absolute;
  inset-inline: 5px;
  top: 50%;
  height: 1.5px;
  translate: 0 -50%;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
}

.ag-perm__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-gold);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}
.ag-perm__foot-mark {
  width: 7px;
  height: 7px;
  flex: none;
  margin-top: 0.4em;
  rotate: 45deg;
  background: var(--color-gold);
}

/* ---------------------------------------------------------
   AI balance
   --------------------------------------------------------- */
.ag-credit { background: var(--color-canvas-deep); }

.ag-credit__sub {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.ag-credit__split {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.ag-credit__note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

@media (min-width: 980px) {
  .ag-credit__split { grid-template-columns: 1fr 1fr; }
}

/* ---- The ledger ---- */
.ledger {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.ledger__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ledger__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ledger__figure {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
}
.ledger__unit {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ledger__top .badge { margin-inline-start: auto; }

.ledger__meter {
  height: 6px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
/* Spent, not remaining: the bar fills as the month is used up,
   which is the direction a merchant is watching. */
.ledger__meter-fill {
  display: block;
  width: 57.6%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-word);
}

.ledger__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.ledger__what { color: var(--color-text); }
.ledger__when {
  grid-column: 1;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ledger__cost {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
}
.ledger__cost--in { color: var(--color-success); }

/* ---- Per-plan allowance ---- */
.ag-credit__plans {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
}

.ag-plan {
  position: relative;
  text-align: center;
}
.ag-plan__flag {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
}
.ag-plan__name {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.ag-plan__figure {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
}
.ag-plan--featured .ag-plan__figure { color: var(--color-growth-text); }
.ag-plan__unit {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ag-plan__note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

@media (min-width: 860px) {
  .ag-credit__plans { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Estimator ---- */
.ag-est {
  margin-top: var(--space-16);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ag-est__head { margin-bottom: var(--space-5); }
.ag-est__head .ag-credit__sub { margin-bottom: var(--space-2); }
.ag-est__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.ag-est__rows {
  display: grid;
  gap: var(--space-3);
}

.ag-est__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.ag-est__label {
  font-size: var(--fs-sm);
  color: var(--color-text);
}
/* The unit price of the row, set apart so the arithmetic of the
   total is visible rather than magic. */
.ag-est__price {
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.ag-est__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.ag-est__btn {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.ag-est__btn:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--color-text);
}
.ag-est__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.ag-est__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ag-est__count {
  min-width: 3ch;
  text-align: center;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.ag-est__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-gold);
}
.ag-est__total-label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.ag-est__total-figure {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
}
.ag-est__total-unit {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.ag-est__verdict {
  margin-inline-start: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-growth-soft);
  color: var(--color-growth-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
/* Over the top plan: the same pill, in the warning role, so the
   verdict never silently reads as «fine» when it is not. */
.ag-est__verdict.is-over {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

/* ---- The pending-figures note ---- */
.ag-credit__pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ag-credit__pending-mark {
  width: 7px;
  height: 7px;
  flex: none;
  rotate: 45deg;
  background: var(--color-gold);
}

/* ---------------------------------------------------------
   Where it lives
   --------------------------------------------------------- */
.ag-where__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.ag-where__card { position: relative; }

.ag-where__key {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  margin-bottom: var(--space-4);
}
/* A keycap, drawn: a surface with a hairline and a bottom edge
   a shade darker, which is what makes it read as pressable. */
.ag-where__key-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line-strong);
  border-bottom-width: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.ag-where__key-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
/* A notification, not a bell glyph. A bell drawn from borders
   came out as an unreadable blob at this size, and the point of
   the row is the thing the merchant receives, not the icon on
   the button: an unread dot and two lines of a summary. */
.ag-where__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}
.ag-where__note-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}
.ag-where__note-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ag-where__note-line {
  width: 46px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
}
.ag-where__note-line--short { width: 28px; }

@media (min-width: 860px) {
  .ag-where__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------
   Specifications
   --------------------------------------------------------- */
.ag-specs { background: var(--color-canvas-deep); }
.ag-specs__inner { max-width: 52rem; }

/* ---------------------------------------------------------
   Two showcase rows on this page hold a panel that ends where
   the card ends. The stage keeps a tail of space for the video
   page's floating pieces, which here just opens a hole under
   the panel.
   --------------------------------------------------------- */
.showcase__stage { padding-block-end: 0; }