/* The homepage's hand-written bits: the tokens, the five type sizes, the one button shape, and what Tailwind
   classes can't say well (marquee, the engine diagrams, the sign-up modal). Premium accents (2026-10-31): pills, rounded cards,
   soft shadows and hairlines from the tokens below; no gradients as fills. */
:root {
  --ground: #FDFDFD;
  --band: #E5E5E5;
  --ink: #13213C;
  --black: #030303;          /* only behind video */
  --amber: #FCA311;          /* fills and underlines, never text on a light ground */
  --muted: #55607A;          /* secondary notes only */
  --band-2: #D5D8DE;         /* a tone step of the band: an unset swatch, a plan's missing row, the cut's take bar */
  --navy-2: #1C2E52;         /* the drop zone on navy */
  --lead-on-navy: #C9D0E0;
  --navy-3: #24396A;         /* the drop zone while a file is over it or chosen */
  --error-on-navy: #FFB4A8;  /* the hero's error line on the navy card */
  --error: #b42318;          /* errors on the light ground */
  --line: rgba(19,33,60,.28); /* the hairlines inside the engine diagrams */
  --obj-ink: var(--ink);      /* the hero orbit's drawn objects; the Arabic navy hero swaps ink and ground */
  --obj-ground: var(--ground);
  --obj-band: var(--band);
  --obj-deep: var(--navy-2);  /* the phone's screen: dark in both languages */
  --glow-core: #C9DDF8;       /* the hero's bowl of colour: pale ocean, rimmed periwinkle, white outside */
  --glow-rim: #E6EAFA;
  --glow-out: #FDFDFD;
  --pale: #ECEFF6;            /* the band panels and the inner panels on a white card */
  --pale-2: #E3E8F3;          /* a step of the pale: the drop zone while hovered, dragged over or filled */
  --hair: rgba(19,33,60,.08);
  --hair-2: rgba(19,33,60,.16); /* input edges: a touch darker than the rules */ /* hairlines: rules, grids, the ring around a card */
  --radius-card: 24px;
  --radius-inner: 16px;
  --radius-small: 10px;       /* boxes inside a panel: inputs, chat bubbles, the legal banner */
  --shadow-soft: 0 1px 0 rgba(19,33,60,.04), 0 10px 30px -18px rgba(19,33,60,.25);
  --shadow-card: 0 1px 0 rgba(19,33,60,.04), 0 30px 60px -30px rgba(19,33,60,.35), 0 0 0 1px rgba(19,33,60,.05);
  --shadow-lift: 0 1px 0 rgba(19,33,60,.06), 0 16px 40px -20px rgba(19,33,60,.4);   /* the nav once the page scrolls */
  --shadow-ring: inset 0 0 0 1px var(--hair);                                         /* the hairline round a band panel */
  --glow-amber: 0 0 10px rgba(252,163,17,.7);   /* the button's dot */
  --glow-ink: 0 0 10px rgba(19,33,60,.35);      /* the dot on an amber button */
  --nav-inset: max(16px, calc((100vw - 1216px) / 2 + 16px));
}
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--ink); background: var(--ground); font-weight: 500; }
html[lang="ar"] body { font-family: "Tajawal", system-ui, sans-serif; }

/* the five type sizes: nothing else sets a font size on the page */
.t-display { font-size: clamp(34px, 4.6vw, 68px); font-weight: 700; line-height: 1.05; }
.t-heading { font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; line-height: 1.1; }
.t-lead { font-size: 18px; line-height: 1.45; }
.t-body { font-size: 17px; line-height: 1.6; }
.t-small { font-size: 14px; line-height: 1.5; }
.t-hero { white-space: pre-line; }
html[lang="ar"] .t-display.t-hero { font-size: clamp(44px, 7vw, 112px); font-weight: 800; }

/* one button shape: a pill with a dot at its trailing end that grows into an arrow on hover */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; padding-block: 6px; padding-inline: 20px 46px;
       border-radius: 999px; border: 0; font: inherit; font-size: 17px; font-weight: 500; line-height: 1.25; cursor: pointer; text-decoration: none; }   /* a long label wraps (with room above and below); the nav's buttons keep one line */
.btn::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 999px; background: var(--amber); box-shadow: var(--glow-amber); }
.btn::before { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border: 1.6px solid var(--ink); border-top: 0; border-left: 0; transform: translateX(-4px) rotate(-45deg); opacity: 0; z-index: 1; }
[dir="rtl"] .btn::before { transform: translateX(4px) rotate(135deg); }
.btn:hover::after, .btn:focus-visible::after { width: 32px; height: 32px; margin-top: -16px; inset-inline-end: 5px; box-shadow: none; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; inset-inline-end: 20px; transform: rotate(-45deg); }
[dir="rtl"] .btn:hover::before, [dir="rtl"] .btn:focus-visible::before { transform: rotate(135deg); }
.no-dot::before, .no-dot::after { display: none; }   /* a plain pill: the contact and legal pages' language toggle */
.btn.no-dot { padding-inline: 16px; }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber::after { background: var(--ink); box-shadow: var(--glow-ink); }
.btn-amber::before { border-color: var(--amber); }
.btn-navy { background: var(--ink); color: var(--ground); }
.btn-light { background: var(--ground); color: var(--ink); box-shadow: var(--shadow-soft); }

/* bands: a step of tone, not a line */
.band-grey { background: var(--pale); }
section.band-grey { border-radius: var(--radius-card); margin-inline: 12px; box-shadow: var(--shadow-ring); }   /* premium accents: bands are rounded panels, not hard cuts */
section.band-grey + section.band-grey { margin-top: 12px; }   /* two panels in a row keep a gutter between them */
.band-navy { background: var(--ink); color: var(--ground); border-radius: var(--radius-card); margin-inline: 12px; }
/* a panel is inset 12px: its wrap gives the 12px back, so the content's start edge never jogs at a band */
.band-grey > .wrap, .band-navy > .wrap { padding-inline: 4px; max-width: 1192px; }
@media (min-width: 768px) { .band-grey > .wrap, .band-navy > .wrap { padding-inline: 20px; } }
.banner.band-grey { border-radius: var(--radius-small); }   /* the legal pages' draft note */
.measure-60 { max-width: 60ch; }
.mark { width: 28px; height: 28px; }
.wrap { max-width: 1216px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 32px; } }

section[id], footer[id] { scroll-margin-top: 96px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
/* Arabic keeps the nav bar and "Meet the agent" in the left-to-right layout (Loai, 2026-11-01): the words switch, the
   geometry stays. Text inside still reads right-to-left. */
html[dir="rtl"] [id="nav"] .nav-in, html[dir="rtl"] [id="engine"] { direction: ltr; }
html[dir="rtl"] [id="engine"] :is(h2, h3, p, li, figcaption, .t-lead, .t-body, .t-small, .t-heading) { direction: rtl; }
html[dir="rtl"] [id="engine"] .eng-card { text-align: right; }
/* the nav: a floating white pill, aligned to the wrap, that drops in on load */
#nav { position: fixed; z-index: 40; top: 16px; inset-inline: var(--nav-inset); height: 60px; border-radius: 999px; background: var(--ground); box-shadow: var(--shadow-soft);
       transition: box-shadow .3s; }
#nav .nav-in { height: 100%; display: flex; align-items: center; gap: 16px; padding-inline: 22px 10px; }
#nav.is-stuck { box-shadow: var(--shadow-lift); }
#nav .btn { min-height: 42px; white-space: nowrap; }
#menu-panel { position: absolute; top: calc(100% + 8px); inset-inline: 0; background: var(--ground); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 8px 20px 16px; }
#lang { border: 1px solid var(--hair); border-radius: 999px; padding-block: 6px; padding-inline: 12px 8px; font: inherit; font-weight: 500; background: var(--ground); }
/* a phone: the mark without the name, the two-letter language pill, the Start button without its dot, so the menu button stays inside the pill */
@media (max-width: 639px) { #nav { top: 10px; height: 54px; } #nav .nav-in { padding-inline: 14px 6px; gap: 6px; } #nav .nav-in > *, #nav .nav-in > div > * { min-width: 0; }
  #nav .nav-in > a [data-site-name] { display: none; } #lang { padding-inline: 10px 6px; field-sizing: content; }
  #nav .btn { padding-inline: 14px; } #nav .btn::before, #nav .btn::after { display: none; } }
#lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }   /* ink on light grounds; amber only on navy */

/* ---------- hero: one centred column (headline, lead, the navy upload card) inside a ring of drawn objects ---------- */
#hero { position: relative; overflow: hidden; padding-top: 92px; isolation: isolate; }   /* room for the floating nav; its own stacking context so the glow sits under everything */
.atmo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.hero-col { position: relative; z-index: 1; text-align: center; }   /* above the ring: the objects pass behind it */
@media (min-width: 640px) { #hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } #hero > .hero-col { width: 100%; } }   /* wherever the ring shows, the hero fills the first screen (the nav floats over it) */
.orbit { position: absolute; left: 50%; top: calc(50% + 46px); width: 0; height: 0; z-index: 0; --orbit-r: 400px; }   /* centred on the column, which sits half the nav's room lower; 400px on a tablet: no object ever reaches the headline or the lead */
.orbit-sat { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translate(var(--orbit-r)) rotate(calc(-1 * var(--a))); }   /* on the ring, upright */
.orbit-sat > svg { display: block; overflow: visible; }   /* centred on its point by negative margins of half its size */
@media (min-width: 1024px) { .orbit { --orbit-r: 430px; } }
@media (min-width: 1280px) { .orbit { --orbit-r: 560px; } }
@media (max-width: 639px) { .orbit { display: none; } }   /* it would cover the card: on a phone the hero is the column alone */
@media (min-width: 640px) and (max-width: 1023px) { .hero-col > .t-lead { max-width: 420px; } }   /* inside the tablet ring: an object at the side never sits under a line */
.obj .f-ink { fill: var(--obj-ink); } .obj .f-ground { fill: var(--obj-ground); } .obj .f-band { fill: var(--obj-band); } .obj .f-amber { fill: var(--amber); } .obj .f-deep { fill: var(--obj-deep); }
.obj .s-ink { stroke: var(--obj-ink); } .obj .s-ground { stroke: var(--obj-ground); }
.obj .phone-cap { --obj-ink: var(--ink); --obj-ground: var(--ground); }   /* the caption on the phone's dark screen stays light in both languages */
html[lang="ar"] .obj-count { --obj-ink: var(--obj-deep); --obj-ground: var(--ground); }   /* the countdown stays a dark square in Arabic: amber "#5" never on a light ground */
#hero-form.card { background: var(--ground); color: var(--ink); padding: 16px; max-width: 560px; margin-inline: auto; text-align: start; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }   /* centred; its inside reads from the start edge */
.drop { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--pale); border-radius: var(--radius-inner); cursor: pointer; transition: background .15s; }
.drop:hover, .drop.is-over, .drop.has-file { background: var(--pale-2); }   /* one grey family on the card: a step of the pale */
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop .plus { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-weight: 700; line-height: 1; }
#hero-file-name { color: var(--muted); }
#hero-text { display: block; width: 100%; padding: 18px 4px 12px; margin-top: 4px; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--hair-2); font-family: inherit; }
#hero-text::placeholder { color: var(--muted); opacity: 1; }
#hero-text:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-small); }   /* the card's 2px ink ring, like every other control on it */
#hero-style, #hero-go { white-space: nowrap; }
#hero-form .flex { flex-wrap: wrap; }   /* a narrow card: the Create button takes its own row rather than run past the card */
#hero-go { flex: 0 1 auto; }
@media (max-width: 479px) { #hero-go { flex-basis: 100%; } }
#hero-style { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; color: var(--ink); border: 0; border-radius: 999px; font-family: inherit; cursor: pointer; }
#hero-style:hover { background: var(--pale); }
#hero-style:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--band-2); }
#hero-style.is-set .swatch { background: var(--amber); }
#hero-error { padding: 8px 8px 0; }
#hero-error.is-note { color: var(--muted); }
#hero-error.is-error { color: var(--error); }

/* Arabic is its own composition: a navy page, Tajawal display, the card inverted to a ground card (the nav stays white) */
html[lang="ar"] .t-display, html[lang="ar"] .t-heading { font-weight: 800; }
html[lang="ar"] .btn { font-weight: 700; }
html[lang="ar"] #hero { background: var(--ink); color: var(--ground); --obj-ink: var(--ground); --obj-ground: var(--ink); --obj-band: var(--navy-2); --obj-deep: var(--navy-2);  --glow-core: var(--navy-3); --glow-rim: var(--navy-2); --glow-out: var(--ink);}
html[lang="ar"] #hero { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }   /* full-bleed, its foot rounded: no hard cut into the panel below */
html[lang="ar"] #hero > .hero-col > .t-lead { color: var(--lead-on-navy); }   /* the lead on the navy page; the white card keeps ink */
html[lang="ar"] #orbit text { font-family: "Tajawal", sans-serif; }   /* the swatch label in Arabic; CSS wins over the attribute */

.reel { display: block; aspect-ratio: 9 / 16; width: 100%; background: var(--black); object-fit: cover; }

/* ---------- styles: the lanyard rail (nine badges on straps; initRail swings, pulls and flips them) ---------- */
/* Without the script the CSS hangs them already: --w and the strap lengths approximate what initRail measures. */
#styles { overflow: hidden; }   /* a badge pulled down on its cord never makes the page scroll sideways */
.rail-stage { position: relative; height: calc(var(--w) * 3.5 + 24px); touch-action: pan-y; user-select: none; -webkit-user-select: none;
              contain: layout; --w: clamp(85px, calc((min(100vw, 1216px) - 104px) / 10.84), 108px); --strap-w: 11px; }   /* layout containment only: paint containment would clip a badge pulled down on its cord in browsers without a clip margin; #styles clips sideways */
.rail { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ink); border-radius: 999px; }
.lanyard { position: absolute; top: 0; left: calc(50% + (var(--n) - 4) * var(--w) * 1.16 - var(--w) / 2); width: var(--w); }
[dir="rtl"] .lanyard { left: calc(50% - (var(--n) - 4) * var(--w) * 1.16 - var(--w) / 2); }
.strap { position: absolute; top: 5px; left: 50%; width: var(--strap-w); height: calc(var(--w) * 1.05); transform: translateX(-50%); transform-origin: 50% 0; background: var(--ink); }   /* a pull stretches it from the rail (scaleY) */
.badge { position: absolute; top: calc(var(--w) * 1.05 + 5px); left: 0; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-inner); background: none;
         color: var(--ink); font: inherit; text-align: center; cursor: pointer; perspective: 900px; transform-origin: 50% 0; }
.badge > .flip { display: block; position: relative; transform-style: preserve-3d; transform: none; }   /* not the RTL arrow's mirror: initRail turns it */
.face { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--black); opacity: var(--shade, 0); pointer-events: none; }   /* the card darkens edge-on, its corners round like the face's */
.face.front { position: relative; background: var(--black); border-radius: var(--radius-inner); overflow: hidden; box-shadow: var(--shadow-soft); }
.badge video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--black); }
.badge .name { display: block; padding: 4px 2px; background: var(--ground); color: var(--ink); font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.face.back { visibility: hidden; position: absolute; top: 0; left: 50%; width: max(100%, 108px); min-height: 100%; transform: translateX(-50%) rotateY(180deg); border-radius: var(--radius-inner);
             display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 66px; background: var(--ink); color: var(--ground); text-align: start; }   /* the foot is kept for "Use this style" (two lines) */
.face.back .t-lead { line-height: 1.2; }
.face.back .t-small { color: var(--lead-on-navy); line-height: 1.35; }
.lanyard > .use { position: absolute; top: 0; left: 50%; z-index: 1; width: calc(max(var(--w), 108px) - 16px); padding-block: 6px; padding-inline: 10px; font-size: 14px; font-weight: 700; line-height: 1.3;
                  white-space: normal; justify-content: center; text-align: center; transform: translate(-50%, 0); transform-origin: 0 0; }   /* initRail sets its top and lays it over the back's foot; its origin is the badge's top centre */
.lanyard > .use::before, .lanyard > .use::after { display: none; }   /* too narrow for the dot: the label wraps to two centred lines */
.lanyard > .use:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }   /* ground on the navy back */
.lanyard.is-on { z-index: 2; }
.lanyard.is-flipped { z-index: 3; }   /* the badge showing its back sits above the one under the pointer */
.lanyard.is-chosen .name { background: var(--amber); }    /* the chosen style: the section's one amber */
.lanyard.is-chosen .strap { background: var(--amber); }
.badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
#rail-cap { text-align: center; min-height: 3.2em; }
@media (max-width: 1023px) {   /* a phone or a tablet: one row of badges that snaps as it scrolls; the straps hang still */
  .rail-stage { display: flex; gap: 24px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; touch-action: auto; margin-inline: -4px; padding: 0 14px 12px; scroll-padding-inline: 4px; --w: 96px; }   /* edge to edge: the row runs under the panel's 4px gutters */
  .rail { display: none; }
  .rail-stage > .lanyard { position: relative; left: auto; flex: none; width: 96px; padding-top: 34px; scroll-snap-align: center; }
  .lanyard::before { content: ""; position: absolute; top: 1px; left: -16px; right: -16px; height: 8px; border-radius: 999px; background: var(--ink); }   /* the rail, in rounded pieces that overlap by their curve, so they read as one pill */
  .rail + .lanyard::before { left: -14px; } .lanyard:last-child::before { right: -14px; }   /* from edge to edge */
  .strap { height: 29px; }
  .badge { position: relative; top: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {   /* a tablet panel's gutter is 20px: the row still runs edge to edge */
  .rail-stage { margin-inline: -20px; padding-inline: 30px; scroll-padding-inline: 20px; }
  .rail + .lanyard::before { left: -30px; } .lanyard:last-child::before { right: -30px; }
}

/* ---------- engine: four live diagrams, white rounded cards on the pale panel ---------- */
.mock .btn { padding-inline: 16px 34px; pointer-events: none; }   /* pictures of buttons: a tighter pill, and no hover */
.mock { background: var(--band); border-radius: var(--radius-card); overflow: hidden; }   /* the How pictures keep the deeper grey so their white insides read */
.mock .bg-ground, .mock .bg-ink { border-radius: var(--radius-small); }   /* the boxes and chat bubbles inside a picture round like it */
.eng-bento { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .eng-bento { grid-template-columns: 1fr 1fr; } .eng-wide { grid-column: 1 / -1; } }
.eng-card { background: var(--ground); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; container-type: inline-size; }   /* the labels below are sized against the card, not the window */
.eng-copy { display: grid; gap: 18px; }
.eng-copy p { max-width: 44ch; }
@media (min-width: 640px) { .eng-wide .eng-copy { grid-template-columns: 1fr 1fr; gap: 24px; } }
.eng-diagram { width: 100%; height: auto; display: block; overflow: visible; direction: ltr; }   /* dir="ltr" alone does not reach SVG text: time runs left to right in both languages */
.eng-wide .eng-diagram { max-width: 840px; margin: 0 auto; }
@media (max-width: 639px) { .eng-label { display: none; } }
/* an SVG label is shown only where it renders at 9px or more (font-size in viewBox units x the drawn scale);
   the window rule above covers phones, these cover the cards that are narrow on a wider window */
@container (max-width: 575.98px) { [data-card="flow"] .eng-label { display: none; } }     /* 10 units in a 640 viewBox */
@container (max-width: 317.98px) { [data-card="jobs"] .eng-label { display: none; } }     /* 8.5 in 300; the status line names the job */
@container (max-width: 550.98px) { [data-card="studio"] .eng-label { display: none; } }   /* 8.5 in 520 */
.eng-node { fill: var(--ground); stroke: var(--line); }
.eng-diagram image { clip-path: inset(0 round 3px); }   /* the frames' pictures round with their rx="3" frames */
.eng-line { fill: none; stroke: var(--line); stroke-width: 1.2; }
.eng-line.is-on { stroke: var(--ink); }
.eng-pkt { fill: var(--amber); }
.eng-dot { fill: var(--amber); }   /* the takes' static status dots; the moving packets are .eng-pkt */
.eng-marker { fill: var(--amber); }
.eng-take { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.eng-take:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }   /* the keyboard's place on a take; the tooltip names it */
.eng-take:focus-visible .eng-frame, .eng-tool:focus-visible .eng-node { stroke: var(--ink); stroke-width: 2; }   /* an ink stroke on the frame as well as the outline */
.eng-reels:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }   /* the reel stack takes focus and lights its lines */
.eng-reels:focus-visible .eng-sheet .eng-node { stroke: var(--ink); stroke-width: 2; }
.eng-tip { pointer-events: none; }
.eng-dash { stroke-dasharray: 3 4; }
#eng-log, #eng-cut-tip { unicode-bidi: plaintext; }
#eng-cut-tip { min-height: 2.8em; }   /* two lines held: the copy below never jumps while scrubbing */
.eng-tool { cursor: pointer; }
.eng-tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eng-tool.is-on rect, .eng-tool:hover rect { stroke: var(--ink); }
.eng-tool text { opacity: 0; }   /* a job's name shows on the lit or hovered tile; the copy carries all four */
.eng-tool.is-on text, .eng-tool:hover text, .eng-tool:focus-visible text { opacity: 1; }
.eng-cut { cursor: crosshair; touch-action: pan-y; }   /* a horizontal drag scrubs, a vertical one still scrolls the page */
.eng-studio-row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.eng-studio-row .eng-phone { order: -1; }   /* one column: the reel centred above the pipeline */
@media (min-width: 1024px) { .eng-studio-row { grid-template-columns: 1fr 150px; } .eng-studio-row .eng-phone { order: 0; } }   /* beside it only where the pipeline keeps 9px labels */
.eng-phone { aspect-ratio: 9 / 16; max-width: 150px; width: 100%; margin: 0 auto; background: var(--black); border-radius: var(--radius-inner); overflow: hidden; }
.eng-phone video { display: block; object-fit: cover; }
.eng-stage.is-on rect { stroke: var(--ink); }
.eng-scene { opacity: .3; }
.eng-scene.is-built { opacity: 1; }
#eng-log { background: var(--ink); color: var(--ground); border-radius: var(--radius-inner); }   /* a long line wraps: a rounded box, never a stadium */
#eng-log::before { content: "› "; }   /* the log line's chevron, the same running and still */
svg.eng-wait .eng-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }   /* engCut sets eng-wait: without JS (or a failed init) the joins are simply drawn */
svg.is-in .eng-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }   /* the svg's own is-in (engCut), not the card's entrance */
html[lang="ar"] .eng-scene text { direction: rtl; text-anchor: end; }   /* same x: the label starts at the frame's left edge, its number at the right end */
html[lang="ar"] #eng-flow text[data-site-name] { letter-spacing: 0; }   /* tracking pulls joined Arabic letters apart */
.ar { font-family: "Tajawal", system-ui, sans-serif; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-bottom: 6px; }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track.rev { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* the Output deck: nine reels fanned in a stack; drag or arrow to turn it */
.deck { position: relative; height: 240px; outline: 0; }
@media (min-width: 640px) { .deck { height: 340px; } }
@media (min-width: 1024px) { .deck { height: 400px; } }
.deck:focus-visible .deck-stage { outline: 2px solid var(--ink); outline-offset: 12px; border-radius: var(--radius-card); }
.deck-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.deck-drag { position: absolute; inset: 0; z-index: 200; cursor: grab; touch-action: pan-y; }
.deck.is-dragging .deck-drag { cursor: grabbing; }
.deck-card { position: absolute; width: 112px; aspect-ratio: 9 / 16; margin: 0; border-radius: var(--radius-inner); overflow: hidden; background: var(--black); box-shadow: var(--shadow-card); will-change: transform; }
@media (min-width: 640px) { .deck-card { width: 160px; } }
@media (min-width: 1024px) { .deck-card { width: 200px; } }
.deck-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck-card::after { content: ""; position: absolute; inset: 0; background: var(--black); opacity: var(--shade, 0); pointer-events: none; }
.deck-badge { position: absolute; top: 10px; inset-inline-end: 10px; padding: 4px 10px; border-radius: 999px; background: var(--ground); color: var(--ink); font-weight: 700; opacity: var(--badge, 0); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }
.mcard { width: 188px; flex: none; }
.mcard img { width: 188px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 0; border: 0; background: var(--black); }
@media (max-width: 640px) { .mcard, .mcard img { width: 136px; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.bar { height: 3px; background: var(--band); overflow: hidden; }
.bar > i { display: block; height: 100%; }

/* ---------- how it works: four steps, each a button beside its mock ---------- */
/* As written (no script, reduced motion, below 768px) each row is a step above its mock (beside it from 768px).
   initHow sets how-live on <html> from 768px when motion is allowed: the steps stack left, the four mocks share one
   cell on the right and only the active step's mock shows. */
.how-row { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .how-row { grid-template-columns: 1fr 1fr; gap: 48px; } }
.step { display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; row-gap: 8px; align-items: start; width: 100%; padding: 0; border: 0; border-radius: 0;
        background: none; color: inherit; font: inherit; text-align: start; cursor: default; }
.step > .t-lead, .step > .t-body { grid-column: 2; }
.step > .t-body { max-width: 60ch; }
.marker { position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 700; line-height: 1; }
.step .bar { display: none; }
html.how-live .how-steps { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto auto auto 1fr; column-gap: 48px; align-items: start; }
html.how-live .how-row { display: contents; }
html.how-live .step { grid-column: 1; padding: 20px 0; cursor: pointer; }
html.how-live .how-row:not(.is-on) .step > .t-lead, html.how-live .how-row:not(.is-on) .step > .t-body { color: var(--muted); }   /* the steps not shown: muted text, never faded; the active one in ink */
html.how-live .how-row:not(.is-on) .marker { opacity: .45; }   /* only the marker fades */
html.how-live .step:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
html.how-live .how-steps .mock { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }
html.how-live .how-row:not(.is-on) .mock { opacity: 0; visibility: hidden; transform: translateY(40px); }
html.how-live .how-row.is-out .mock { transform: translateY(-40px); }   /* the step just left rises out as the next rises in */
html.how-live .how-row.is-on .step .bar { display: block; grid-column: 2; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
html.how-live[dir="rtl"] .how-row.is-on .step .bar { transform-origin: right; }
html.how-live .how-row.is-done .marker { color: transparent; }   /* a passed step: a check in place of its number */
html.how-live .how-row.is-done .marker::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 11px; background: var(--ground);
                                               clip-path: polygon(0% 55%, 15% 40%, 38% 63%, 85% 0%, 100% 15%, 38% 93%); }   /* a tick cut from a ground square */

/* ---------- pricing: the period switch, then four borderless cards on the grey band (Creator navy, the one amber button) ---------- */
.period { position: relative; display: inline-flex; padding: 4px; background: var(--ground); border-radius: 999px; box-shadow: var(--shadow-soft); }
.period button { position: relative; z-index: 1; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink); font-family: inherit; font-weight: 700; cursor: pointer; }
.period .pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); }
.period button[aria-pressed="true"] { color: var(--ground); background: var(--ink); }   /* the pressed button wears the ink at rest; the pill only travels */
.period .save { margin-inline-start: 6px; color: var(--muted); }
.period button[aria-pressed="true"] .save { color: var(--lead-on-navy); }
.period button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plans-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; padding: 28px 24px; background: var(--ground); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
@supports (grid-template-rows: subgrid) { .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } }   /* name, line, price, button and list line up across a row */
.plan-rec { background: var(--ink); color: var(--ground); }
.plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.plan .plan-d { flex-grow: 1; margin-top: 8px; }   /* without subgrid: takes up the slack, so the prices still line up */
.plan .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 40px; }   /* the line above belongs to the name: nearer it than the price */
.plan .num { line-height: 1; font-variant-numeric: tabular-nums; }
.plan [data-per] { color: var(--muted); }
.plan-rec .plan-d, .plan-rec [data-per] { color: var(--lead-on-navy); }
.plan .btn { width: 100%; margin-top: 24px; }
.plan ul { display: grid; align-content: start; gap: 10px; margin-top: 24px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; }
.plan li .sq { position: relative; flex: none; width: 18px; height: 18px; margin-top: 5px; border-radius: 999px; background: var(--band-2); }
.plan li.ok .sq { background: var(--ink); }
.plan li.ok .sq::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 8px; background: var(--ground);
                       clip-path: polygon(0% 55%, 15% 40%, 38% 63%, 85% 0%, 100% 15%, 38% 93%); }   /* the how marker's tick, cut from a ground square */
.plan li.no { color: var(--muted); }
.plan-rec li.ok .sq { background: var(--ground); }   /* ink on the navy card would vanish: the squares turn ground, the ticks ink */
.plan-rec li.ok .sq::after { background: var(--ink); }
.plan-rec li.no { color: var(--lead-on-navy); }   /* muted would be unreadable on navy */
.plan-rec li.no .sq { background: var(--navy-3); }

/* ---------- faq: open columns, question left, answer right ---------- */
.faq-wrap { max-width: calc(48rem + 64px); }
.faq-list { background: var(--ground); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--hair); }
.faq-q { margin: 0; }
.faq-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: none; border: 0; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.faq-btn:hover { background: var(--pale); }
.faq-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.faq-chev { flex: none; width: 18px; height: 18px; }
.faq-btn[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a[hidden] { display: none; }
.faq-a-in { overflow: hidden; }
.faq-a-in .t-body { padding: 0 24px 20px; color: var(--muted); max-width: 60ch; }

/* ---------- closing band ---------- */
.on-navy-lead { color: var(--lead-on-navy); }
.cta-word { color: var(--ground); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--ground); }
.cta-go { text-decoration-color: var(--amber); }
.cta-word:focus-visible { outline: 3px solid var(--amber); outline-offset: 6px; }

/* ---------- footer wordmark: the name printed in halftone dots across the page, cut by its bottom edge (initWordmark) ---------- */
.wordmark-band { position: relative; height: clamp(120px, 24vw, 340px); margin-top: 24px; margin-inline: 12px; overflow: hidden; contain: strict;
                 background: var(--pale); border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card); box-shadow: var(--shadow-ring); }   /* phones: the dots are 4px, the word sits closer to the row above; a pale panel inset like the bands, cut by the page's foot */
@media (min-width: 640px) { .wordmark-band { height: clamp(180px, 24vw, 340px); } }
.wordmark-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wordmark-band .t-display { position: absolute; inset-inline: 0; bottom: 24px; max-width: 1192px; margin-inline: auto; padding-inline: 4px; color: var(--ink); }   /* without the script: the name as text at the band's foot, on the panels' edge */
html.js .wordmark-band .t-display { display: none; }   /* the dots print it; if site.js never runs, the head's failsafe drops .js after 2.5 s and the name shows */
@media (min-width: 768px) { .wordmark-band .t-display { padding-inline: 20px; } }
.wordmark-band .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* hidden even when the Tailwind script does not run */
[data-top] { color: var(--ink); text-decoration: none; }
[data-top]:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-top]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the hero button while the video is being prepared */
#hero-go.is-busy { opacity: .8; cursor: progress; }
#hero-go:disabled { cursor: progress; }

/* ---------- the hero's sign-up modal (rebuilt in Task 4) ---------- */
.auth-in { display: block; width: 100%; margin-top: 6px; height: 46px; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: var(--radius-small); background: var(--ground);
           font-family: inherit; font-weight: 500; color: var(--ink); }
.auth-in[type="email"], .auth-in[type="password"] { direction: ltr; text-align: start; }
[dir="rtl"] .auth-in[type="email"], [dir="rtl"] .auth-in[type="password"] { text-align: right; }
.auth-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.auth-in[aria-invalid="true"] { border-color: var(--error); }
.auth-error { color: var(--error); }
#auth-box { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* ---------- motion: entrances, the hero orbit, feedback under the hand (all off under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
.faq-a { transition: grid-template-rows .25s ease-out; }
.faq-a.is-closing { grid-template-rows: 0fr; }
.faq-chev { transition: transform .2s; }
html.js #nav { animation: navin .9s cubic-bezier(.22,.7,.2,1) .15s both; }
@keyframes navin { from { opacity: 0; transform: translateY(-8px); } }
html.js .enter { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .enter.is-in { opacity: 1; transform: none; }
html.js.how-live .how-row { opacity: 1; transform: none; }   /* a row with display: contents never intersects; its step and mock enter with the stage */
.orbit { animation: orbit 90s linear infinite; }
.orbit-sat > svg { animation: unorbit 90s linear infinite; }   /* each object counter-turns, so it stays upright */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes unorbit { to { transform: rotate(-360deg); } }
button.btn:active, a.btn:active { transform: translateY(1px); }
.btn::after { transition: width .25s, height .25s, margin .25s, inset-inline-end .25s, box-shadow .25s; }   /* the dot grows into the circle */
.btn::before { transition: opacity .2s, inset-inline-end .25s, transform .25s; }                        /* and the chevron slides in */
.rail-stage.is-row .flip { transition: transform .6s cubic-bezier(.2,.8,.2,1); }   /* the phone row has no springs: its flips turn in CSS */
.rail-stage.is-row .face { transition: visibility 0s .15s; }   /* each face shows or hides as the turn passes edge-on */
.eng-take { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.eng-take:hover, .eng-take:focus-visible { transform: scale(1.15); }
.eng-dash { animation: eng-dash 1.2s linear infinite; animation-play-state: paused; }
svg.is-live .eng-dash { animation-play-state: running; }   /* engFlow sets is-live only while the card runs */
.eng-sheet-new { animation: eng-sheet-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes eng-dash { to { stroke-dashoffset: -14; } }
@keyframes eng-sheet-in { from { opacity: 0; transform: translate(14px,-10px) rotate(4deg); } to { opacity: 1; transform: none; } }
.eng-tool { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.eng-tool.is-on, .eng-tool:hover, .eng-tool:focus-visible { transform: translateY(-2px); }
.eng-tool rect, .eng-line { transition: stroke .3s; }
.eng-tool text { transition: opacity .25s; }
.eng-draw { transition: stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1); }
.eng-marker { transition: opacity .2s; }
.eng-stage rect { transition: stroke .3s; }
.eng-scene { transition: opacity .4s; }
html.how-live .step > .t-lead, html.how-live .step > .t-body { transition: color .3s; }
html.how-live .marker { transition: opacity .3s; }
.lanyard > .use { animation: use-in .25s .3s both; }   /* it shows as the card finishes turning, not over its front */
@keyframes use-in { from { opacity: 0; } }
html.how-live .how-steps .mock { transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility 0s .5s; }
html.how-live .how-row.is-on .mock { transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility 0s; }
.period.is-live .pill { transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); }   /* the pill slides; under reduced motion it jumps */
.period.is-live button[aria-pressed="true"] { transition: background-color 0s .35s; }   /* the newly pressed button takes the ink as the pill arrives */
html.how-live .how-row.is-on .step .bar { animation: how-bar 4s linear both; }   /* restarts with each new active step */
html.how-live .how-steps.is-paused .step .bar { animation-play-state: paused; }   /* a held step (hover, focus) or the section off screen */
@keyframes how-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}