/* ============================================================
   aiob.css - A.I.O.B lockup page (logo / wordmark, no background)
   ============================================================ */

@font-face{
  font-family:'Sora';
  src:url('/assets/fonts/sora-latin-wght-normal.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Prompt';
  src:url('/assets/fonts/prompt-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Prompt';
  src:url('/assets/fonts/prompt-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Sonx';
  src:url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('/assets/fonts/cairo-latin-wght-normal.woff2') format('woff2');
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
}

html,
body.aiob-body{
  margin:0;
  padding:0;
  min-height:100vh;
}
/* Base colour on <html> (paints the canvas); body stays transparent so the
   fixed gradient pseudo-element below is not covered by an opaque body. */
html{ background:#01030c; }
body.aiob-body{ background:transparent; }

/* The sky gradient lives on a fixed pseudo-element instead of
   `background-attachment:fixed`, which forces a full repaint on every scroll
   frame on mobile browsers. */
body.aiob-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(ellipse at 45% 48%, #1e3f8f 0%, #0e2055 40%, #04081c 75%, #01030c 100%);
}

.aiob-back{
  position:fixed;
  top:25px;
  left:25px;
  z-index:100;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:20px;
  background:#0e1a3d;
  border:1px solid rgba(138,190,254,0.35);
  color:#eaf2ff;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}
.aiob-back:hover{
  border-color:rgba(138,190,254,0.7);
}
.aiob-back svg{width:1em;height:1em;flex-shrink:0}
/* the "sonx" wordmark, matching the index title (.text-inner) 3D treatment */
.aiob-back-sonx{
  display:inline-block;
  font-family:'Sonx', Arial, sans-serif;
  font-size:1.25em;
  font-weight:700;
  line-height:1;
  color:#fff;
  transform:perspective(140px) rotateY(-25deg) rotateX(15deg);
  transform-origin:left bottom;
  text-shadow:
    1px 1px 0 rgba(60,100,140,.6),
    2px 2px 0 rgba(40,80,120,.5),
    3px 3px 0 rgba(20,60,100,.4);
}
@media (max-width:768px){
  .aiob-back{ top:max(15px,env(safe-area-inset-top)); left:15px; padding:8px 14px; font-size:13px; }
}

.aiob-page{
  /* shared so the grid can stop exactly at the panel's slanted left edge */
  --aiob-panel-w:clamp(420px, 60vw, 900px);
  /* Horizontal position of the grid's vanishing point: the centre of the left
     column, so the perspective converges directly above the lockup and the
     floor reads as symmetric about the logo. The expression mirrors
     .aiob-left's width (page padding + half the column), measured against this
     element's box. It replaced a hard-coded 22vw left over from an older
     44vw-wide column, which drifted further off the lockup - and past it -
     the wider the window got. */
  --aiob-vp-x:calc(
    clamp(16px, 5vw, 100px) +
    min(300px, (100% - clamp(16px, 5vw, 100px) - var(--aiob-panel-w) - clamp(16px, 3vw, 56px)) / 2)
  );
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:100vh;
  margin:0;
  padding:0 0 0 clamp(16px, 5vw, 100px);
  background:transparent;
  position:relative;
}

/* Right-side content panel with a slanted left edge */
.aiob-content{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:var(--aiob-panel-w);
  box-sizing:border-box; /* keep outer width == --aiob-panel-w so the grid clip still meets the slanted edge */
  background:linear-gradient(180deg, rgba(138,190,254,0.14), rgba(138,190,254,0.04));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 16% 100%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  /* extra left padding nudges the panel's contents right, clear of the
     slanted left edge */
  padding:clamp(40px, 8vh, 120px) clamp(16px, 2vw, 36px) clamp(40px, 8vh, 120px) clamp(72px, 9vw, 180px);
}

/* A.I.O.B description on the right-side panel */
.aiob-content-desc{
  max-width:90ch;
  text-align:center;
}
.aiob-content-text{
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:clamp(15px, 1.5vw, 22px);
  line-height:1.5;
  margin:0;
  color:rgba(224,236,255,0.82);
}
.aiob-content-text strong{
  font-weight:700;
  color:#ffffff;
}

/* Left column: the lockup with the live status card beneath it, kept clear
   of the right-side panel. */
.aiob-left{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 4vh, 56px);
  box-sizing:border-box;
  /* keep the column inside the left area, clear of the right-side panel */
  width:min(600px, calc(100% - var(--aiob-panel-w) - clamp(16px, 3vw, 56px)));
  min-height:100vh;
  padding:clamp(24px, 5vh, 64px) 0;
}

.aiob-lockup{
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
}

/* 3D perspective grid for the left side */
.aiob-left-bg{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:0;
  overflow:hidden;
  perspective:600px;
  /* keep the vanishing point on the left column (see --aiob-vp-x) */
  perspective-origin:var(--aiob-vp-x) 50%;
  /* stop the grid exactly at the panel's slanted left edge so it never
     bleeds under the right-side content */
  clip-path:polygon(
    0 0,
    calc(100% - var(--aiob-panel-w)) 0,
    calc(100% - 0.84 * var(--aiob-panel-w)) 100%,
    0 100%
  );
  /* fade the far (back) end so the grid reads as infinite */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
}
.aiob-left-bg::before{
  content:"";
  position:absolute;
  /* centre the plane on the vanishing point so the rotation pivot lands on it
     (and the plane stays wide enough that the far, compressed end still spans
     the visible width instead of leaving gaps) */
  left:calc(var(--aiob-vp-x) - 100%);
  /* keep the rotation pivot at the container's vertical centre */
  top:calc(50% - 1000%);
  width:200%;
  /* extend the plane far past the horizon so the back edge is never seen */
  height:2000%;
  background-image:
    linear-gradient(rgba(138,190,254,0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,190,254,0.45) 1px, transparent 1px);
  background-size:60px 60px;
  transform:rotateX(55deg);
  transform-origin:center;
}

/* Combined lockup artwork (icon + separator + wordmark) exported from Figma */
.aiob-lockup-art{
  width:100%;
}
.aiob-lockup-art img{
  display:block;
  width:100%;
  height:auto;
}

/* ============================================================
   Live status card (fed by the AIOB worker's /status endpoint)
   ============================================================ */

.aiob-content-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  /* The carousel track's intrinsic min-content width is the sum of all its
     slides (they can't shrink), which would otherwise force this flex item
     wider than the panel and clip the card. Let it shrink to the panel. */
  min-width:0;
}

.aiob-content{
  overflow-y:auto;
  overflow-x:hidden;
}

/* Outline along the panel's slanted left edge. The panel is clipped with
   clip-path, which also clips a normal border, so draw the edge as a thin
   band that follows the same slant (0,0) -> (16%,100%). */
.aiob-page::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:var(--aiob-panel-w);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(138,190,254,0) 0%, rgba(138,190,254,0.6) 18%, rgba(138,190,254,0.6) 82%, rgba(138,190,254,0) 100%);
  clip-path:polygon(
    0 0,
    2px 0,
    calc(16% + 2px) 100%,
    16% 100%
  );
}

.aiob-status{
  margin-top:0;
  width:min(100%, 460px);
  box-sizing:border-box;
  padding:clamp(16px, 2vw, 24px);
  border-radius:16px;
  background:#0e1a3d;
  border:1px solid rgba(138,190,254,0.22);
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  color:rgba(224,236,255,0.9);
  text-align:left;
}
.aiob-status-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.aiob-status-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#8aa0c8;
  transition:background .3s ease;
}
.aiob-status[data-state="operational"] .aiob-status-dot{
  background:#3ddc84;
}
.aiob-status[data-state="degraded"] .aiob-status-dot{
  background:#ffb020;
}
.aiob-status[data-state="unknown"] .aiob-status-dot{
  background:#ff5c5c;
}
.aiob-status-title{
  margin:0;
  font-size:clamp(15px, 1.3vw, 18px);
  font-weight:700;
  letter-spacing:0.01em;
  color:#ffffff;
}
.aiob-status-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aiob-status-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  font-size:clamp(13px, 1.1vw, 15px);
}
.aiob-status-label{
  color:rgba(224,236,255,0.6);
}
.aiob-status-value{
  font-weight:700;
  color:#eaf2ff;
  text-align:right;
}

/* Info affordance on a status row (e.g. the Reconnects explanation). */
.aiob-status-label--info{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.aiob-status-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  padding:0;
  border:0;
  background:none;
  color:rgba(224,236,255,0.45);
  cursor:help;
  transition:color .15s ease;
}
.aiob-status-info:hover,
.aiob-status-info:focus-visible{
  color:#eaf2ff;
}
.aiob-status-info svg{
  display:block;
  width:15px;
  height:15px;
}
.aiob-status-tip{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:20;
  width:min(260px, 72vw);
  padding:9px 11px;
  border-radius:10px;
  background:#0b1533;
  border:1px solid rgba(138,190,254,0.3);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  color:rgba(224,236,255,0.85);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events:none;
}
.aiob-status-label--info:hover .aiob-status-tip,
.aiob-status-label--info:focus-within .aiob-status-tip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.aiob-status-meta{
  margin:14px 0 0;
  font-size:12px;
  color:rgba(224,236,255,0.45);
}

/* Reconnecting is transient (e.g. right after a deploy); degraded is a real
   outage. Override the earlier amber "degraded" dot with red and give
   "reconnecting" the amber. */
.aiob-status[data-state="reconnecting"] .aiob-status-dot{
  background:#ffb020;
}
.aiob-status[data-state="degraded"] .aiob-status-dot{
  background:#ff5c5c;
}

/* 24h uptime bar */
.aiob-status-uptime{
  margin-top:14px;
}
.aiob-status-bar{
  display:flex;
  gap:2px;
  height:26px;
  align-items:stretch;
}
.aiob-status-seg{
  flex:1 1 0;
  min-width:0;
  border-radius:2px;
  background:rgba(61,220,132,0.85);
}
.aiob-status-seg.is-down{
  background:rgba(255,92,92,0.9);
}
.aiob-status-bar-label{
  margin:8px 0 0;
  font-size:12px;
  color:rgba(224,236,255,0.55);
}

/* ============================================================
   Invite CTA (sits above the live status card)
   ============================================================ */

.aiob-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  max-width:100%;
}

.aiob-invite{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:100%;
  box-sizing:border-box;
  padding:14px 26px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.7);
  background:linear-gradient(135deg, #bcdcff, #7fb0f0);
  color:#061a3d;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-size:clamp(14px, 1.2vw, 16px);
  font-weight:700;
  letter-spacing:0.01em;
  text-align:center;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 28px rgba(20,60,140,0.45);
}
.aiob-invite:hover{
  border-color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 16px 34px rgba(20,60,140,0.55);
}
.aiob-invite:focus-visible{
  outline:2px solid #8abefe;
  outline-offset:3px;
}
.aiob-invite-icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  object-fit:contain;
  /* the source icon is flat gray; darken it to match the button label */
  filter:brightness(0);
}

/* Secondary CTA (support server) - solid, not transparent */
.aiob-invite-secondary{
  background:linear-gradient(135deg, #8abefe, #5f92dd);
  border-color:rgba(255,255,255,0.6);
  color:#061a3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 28px rgba(20,60,140,0.4);
}
.aiob-invite-secondary:hover{
  border-color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 16px 34px rgba(20,60,140,0.5);
}

/* Hover hint that floats above the support button */
.aiob-invite-tip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:20;
  width:max-content;
  max-width:min(240px, 70vw);
  padding:9px 11px;
  border-radius:10px;
  background:#0b1533;
  border:1px solid rgba(138,190,254,0.3);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  color:rgba(224,236,255,0.85);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events:none;
}
.aiob-invite-secondary:hover .aiob-invite-tip,
.aiob-invite-secondary:focus-visible .aiob-invite-tip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* ============================================================
   Command reference - one swipeable section
   A single card whose sections (All + each category) slide
   horizontally. Drag with the mouse, tap a tab, or use the arrow
   keys to switch between them. "All" is first and the default.
   ============================================================ */

.aiob-commands{
  width:100%;
  max-width:520px;
  margin:clamp(28px, 5vh, 56px) auto 0;
  box-sizing:border-box;
  padding:clamp(16px, 1.6vw, 22px);
  border-radius:16px;
  background:rgba(8,16,40,0.5);
  border:1px solid rgba(138,190,254,0.18);
  text-align:left;
}

.aiob-commands-head{
  margin-bottom:clamp(12px, 1.6vh, 18px);
}
.aiob-commands-title{
  margin:0 0 4px;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(16px, 1.5vw, 20px);
  letter-spacing:0.01em;
  color:#ffffff;
}
.aiob-commands-sub{
  margin:0;
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-size:clamp(12px, 1vw, 13px);
  color:rgba(224,236,255,0.55);
}
.aiob-commands-sub code{
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  color:#bcdcff;
}

/* "How to read these" legend: explains the usage syntax. */
.aiob-cmd-legend{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:8px;
  row-gap:8px;
  margin-bottom:clamp(12px, 1.6vh, 18px);
  padding:clamp(10px, 1.1vw, 14px);
  border-radius:12px;
  background:rgba(138,190,254,0.06);
  border:1px solid rgba(138,190,254,0.18);
}
.aiob-cmd-legend-label{
  grid-column:1;
  grid-row:1;
  font-family:'Cairo', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(10px, 0.8vw, 11.5px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:rgba(224,236,255,0.7);
}
.aiob-cmd-legend-notes{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
}
.aiob-cmd-legend-perm{
  grid-column:2;
  grid-row:2;
  display:flex;
  align-items:center;
}
.aiob-cmd-legend-key{
  flex:0 0 auto;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(11px, 0.9vw, 12.5px);
  color:#eaf2ff;
  background:rgba(8,16,40,0.6);
  border:1px solid rgba(138,190,254,0.22);
  border-radius:6px;
  padding:1px 6px;
  white-space:nowrap;
}
.aiob-cmd-legend-key--perm{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:'Cairo', 'Segoe UI', sans-serif;
  color:#cfe2ff;
  background:rgba(138,190,254,0.12);
  border-color:rgba(138,190,254,0.3);
  border-radius:999px;
  padding:1px 8px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:clamp(10px, 0.8vw, 11.5px);
}
.aiob-cmd-legend-key--perm svg{
  width:1em;
  height:1em;
  flex-shrink:0;
  color:#8abefe;
}

/* Category tabs */
.aiob-cmd-tabs{
  display:flex;
  gap:6px;
  margin-bottom:clamp(12px, 1.6vh, 18px);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.aiob-cmd-tabs::-webkit-scrollbar{ display:none; }
.aiob-cmd-tab{
  flex:0 0 auto;
  appearance:none;
  border:1px solid rgba(138,190,254,0.22);
  background:rgba(138,190,254,0.06);
  color:rgba(224,236,255,0.7);
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(12px, 1vw, 13px);
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.aiob-cmd-tab:hover{
  color:#eaf2ff;
  border-color:rgba(138,190,254,0.45);
}
.aiob-cmd-tab.is-active{
  background:linear-gradient(135deg, #bcdcff, #7fb0f0);
  border-color:rgba(255,255,255,0.7);
  color:#061a3d;
}
.aiob-cmd-tab:focus-visible{
  outline:2px solid #8abefe;
  outline-offset:2px;
}

/* Swipeable viewport */
.aiob-carousel{
  position:relative;
  overflow:hidden;
  height:clamp(200px, 32vh, 340px);
  border-radius:12px;
  cursor:grab;
  touch-action:pan-y;
  /* the carousel is a drag surface: its text is not selectable */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.aiob-carousel.is-dragging{ cursor:grabbing; }
.aiob-carousel-track{
  display:flex;
  align-items:flex-start;
  height:100%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.aiob-carousel-track.is-dragging{ transition:none; }
.aiob-cmd-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.aiob-cmd-slide::-webkit-scrollbar{ width:6px; }
.aiob-cmd-slide::-webkit-scrollbar-thumb{
  background:rgba(138,190,254,0.3);
  border-radius:3px;
}

/* "All" slide: categories flow into a responsive grid */
.aiob-cmd-all{
  display:grid;
  /* min() keeps a single column from overflowing when the panel is very narrow */
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap:clamp(14px, 1.6vw, 20px);
  align-items:start;
}

.aiob-cmd-group{
  box-sizing:border-box;
  padding:clamp(12px, 1.2vw, 16px);
  border-radius:12px;
  background:rgba(8,16,40,0.5);
  border:1px solid rgba(138,190,254,0.18);
}

/* Position dots */
.aiob-carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:clamp(12px, 1.6vh, 18px);
}
.aiob-carousel-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(138,190,254,0.28);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.aiob-carousel-dot.is-active{
  background:#8abefe;
  transform:scale(1.25);
}
.aiob-carousel-dot:focus-visible{
  outline:2px solid #8abefe;
  outline-offset:2px;
}
.aiob-cmd-cat{
  margin:0 0 12px;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(12px, 1vw, 14px);
  letter-spacing:0.02em;
  color:#8abefe;
}
.aiob-cmd-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.aiob-cmd{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.aiob-cmd-usage{
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(12px, 1vw, 13.5px);
  line-height:1.35;
  color:#eaf2ff;
  overflow-wrap:anywhere;
}
.aiob-cmd-prefix{
  color:#8abefe;
}
.aiob-cmd-desc{
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-size:clamp(11px, 0.9vw, 13px);
  line-height:1.4;
  color:rgba(224,236,255,0.6);
  overflow-wrap:anywhere;
}
.aiob-cmd-perm{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:2px;
  padding:2px 9px;
  border-radius:999px;
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-size:clamp(10px, 0.8vw, 11.5px);
  line-height:1.4;
  color:#cfe2ff;
  background:rgba(138,190,254,0.12);
  border:1px solid rgba(138,190,254,0.3);
}
.aiob-cmd-perm svg{
  width:1em;
  height:1em;
  flex-shrink:0;
  color:#8abefe;
}
.aiob-cmd-perm-label{
  color:rgba(207,226,255,0.65);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.85em;
}

/* ============================================================
   Features - screenshots of what A.I.O.B does (XP & levels,
   giveaways), shown under the Commands section.
   ============================================================ */

.aiob-features{
  width:100%;
  max-width:520px;
  margin:clamp(20px, 3vh, 32px) auto 0;
  box-sizing:border-box;
  padding:clamp(16px, 1.6vw, 22px);
  border-radius:16px;
  background:rgba(8,16,40,0.5);
  border:1px solid rgba(138,190,254,0.18);
  text-align:left;
}
.aiob-features-head{
  margin-bottom:clamp(12px, 1.6vh, 18px);
}
.aiob-features-title{
  margin:0 0 4px;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(16px, 1.5vw, 20px);
  letter-spacing:0.01em;
  color:#ffffff;
}
.aiob-features-sub{
  margin:0;
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-size:clamp(12px, 1vw, 13px);
  color:rgba(224,236,255,0.55);
}

/* One feature: a screenshot with a short write-up. Shown one at a time
   in an arrow-driven carousel. */
.aiob-features-carousel{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  /* the JS sizes this to the active slide; animate between the two heights */
  transition:height .35s cubic-bezier(.22,.61,.36,1);
}
.aiob-features-track{
  display:flex;
  align-items:flex-start;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.aiob-features-track.is-dragging{ transition:none; }
.aiob-feature{
  flex:0 0 100%;
  width:100%;
  box-sizing:border-box;
}
.aiob-feature-shot{
  margin:0;
}
.aiob-feature-img{
  display:block;
  width:100%;
  height:auto;
  /* keep the 1px frame inside the slide width, otherwise the image renders
     2px wider than its slide and its edge peeks through on the next slide */
  box-sizing:border-box;
  border-radius:12px;
  border:1px solid rgba(138,190,254,0.22);
  background:rgba(8,16,40,0.6);
}
.aiob-feature-body{
  margin-top:12px;
}
.aiob-feature-name{
  margin:0 0 4px;
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:clamp(13px, 1.1vw, 15px);
  color:#ffffff;
}
.aiob-feature-desc{
  margin:0;
  font-family:'Prompt', 'Segoe UI', sans-serif;
  font-size:clamp(12px, 1vw, 13px);
  line-height:1.5;
  color:rgba(224,236,255,0.6);
}
.aiob-feature-desc code{
  font-family:'Sora', 'Segoe UI', sans-serif;
  font-weight:700;
  color:#bcdcff;
}

/* Carousel controls: prev arrow, dots, next arrow */
.aiob-features-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:clamp(12px, 1.6vh, 18px);
}
.aiob-features-arrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(138,190,254,0.3);
  background:rgba(138,190,254,0.08);
  color:#eaf2ff;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.aiob-features-arrow:hover{
  background:rgba(138,190,254,0.18);
  border-color:rgba(138,190,254,0.6);
}
.aiob-features-arrow:focus-visible{
  outline:2px solid #8abefe;
  outline-offset:2px;
}
.aiob-features-arrow:disabled{
  opacity:0.3;
  cursor:default;
}
.aiob-features-arrow svg{
  width:1em;
  height:1em;
}
.aiob-features-arrow--prev svg{ transform:rotate(180deg); }

/* Position dots */
.aiob-features-dots{
  display:flex;
  justify-content:center;
  gap:8px;
}
.aiob-features-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(138,190,254,0.28);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.aiob-features-dot.is-active{
  background:#8abefe;
  transform:scale(1.25);
}
.aiob-features-dot:focus-visible{
  outline:2px solid #8abefe;
  outline-offset:2px;
}

/* ============================================================
   Stacked layout - phones and small tablets
   The two-column design needs a wide viewport: the left column is
   sized as (100% - panel - gap), so once the panel hits its 420px
   floor the column collapses and the lockup disappears. Below this
   width, stack the lockup/status above the description/commands.
   ============================================================ */
@media (max-width:860px){
  .aiob-page{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:0;
    /* the lockup is centred in the stacked layout, so the vanishing point is
       the middle of the page */
    --aiob-vp-x:50%;
  }

  /* lockup + CTAs + status become the top block. It keeps the desktop's
     100vh minimum so the grid - which is one viewport tall, anchored at the
     top of the page - ends exactly where the stacked content panel begins
     instead of running underneath it and being cut off by its top edge. */
  .aiob-left{
    width:100%;
    min-height:100vh;
    padding:clamp(72px, 14vh, 130px) 20px clamp(28px, 6vh, 52px);
    gap:clamp(22px, 4vh, 40px);
  }

  /* keep the lockup at its desktop size instead of stretching full-width */
  .aiob-lockup{ max-width:600px; margin:0 auto; }

  /* keep the perspective grid behind the top block only, fading out at the
     bottom so it never ends on a hard edge */
  .aiob-left-bg{
    height:100vh;
    clip-path:none;
    /* The vanishing point sits d*cot(55deg) = 420px ABOVE the perspective
       origin, so at 50% 50% the horizon lands at 50% - 420px. On a tall
       phone that falls below the top fade and the grid reads as a
       starburst. Lift the origin by that same 420px so the horizon is
       pushed off the top of the screen at every viewport height. */
    perspective-origin:var(--aiob-vp-x) calc(50% - 420px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  }

  /* The plane is centred on the vanishing point by the shared rule above.
     Vertically, keep the rotation pivot on the horizon (50%) and let the plane
     extend far away from the viewer but only a bounded amount toward it: if
     the near half reaches past the camera (z' > perspective) the projection
     inverts and the lines wrap around, which is what made the grid read as a
     starburst on phones. */
  .aiob-left-bg::before{
    top:calc(50% - 3000px);
    height:3500px;
    transform-origin:center 3000px;
  }

  /* the content panel becomes a normal full-width block below */
  .aiob-content{
    position:relative;
    z-index:1;
    top:auto;
    right:auto;
    width:100%;
    height:auto;
    clip-path:none;
    overflow:visible;
    padding:clamp(30px, 6vh, 56px) 20px clamp(44px, 9vh, 80px);
  }

  /* no slanted edge once the panel is stacked, so drop its outline */
  .aiob-page::after{ display:none; }

  /* the swipeable command card fills the stacked column */
  .aiob-commands{
    max-width:none;
    margin-top:clamp(28px, 5vh, 56px);
  }
  .aiob-features{ max-width:none; }
  .aiob-carousel{
    height:clamp(200px, 30vh, 300px);
  }

  .aiob-status{ width:min(100%, 460px); }
}