/* Krowdee — design-system tokens and component classes.
   Single source of truth for the product's look: neutral grey chrome (light + dark),
   ONE brand accent (indigo), a calm grotesque type voice, and semantic status colors.
   Retune here; both product files link this sheet. */
/* (Google Fonts import removed at build: fonts are self-hosted, see /assets/fonts) */

:root {
  /* ——— roles ——— */
  --color-bg: #ffffff;
  --color-surface: #f5f6f8;
  --color-text: #1b1d21;
  --color-accent: #5b54e0;        /* the one brand accent — indigo, both themes */
  --color-on-accent: #ffffff;     /* foreground on any accent fill */
  --color-accent-2: #2f9e63;      /* SEMANTIC ONLY — success / approved. never a 2nd brand accent */
  --color-divider: color-mix(in srgb, #1b1d21 11%, transparent);

  /* status */
  --color-success: var(--color-accent-2);
  --kr-danger: #c8372a;           /* moderation rejection / destructive */
  --kr-danger-bg: #fdeceb;
  --color-warn: #9a6a00;          /* transient / network — distinct from rejection */
  --color-warn-bg: #fbf1d8;

  /* ——— tonal ramps — one shared perceptual lightness scale per role ——— */
  --color-neutral-100: #f5f6f8;
  --color-neutral-200: #eaecef;
  --color-neutral-300: #dcdfe4;
  --color-neutral-400: #b7bcc4;
  --color-neutral-500: #888e99;
  --color-neutral-600: #656b76;
  --color-neutral-700: #4a4f59;
  --color-neutral-800: #31353c;
  --color-neutral-900: #1e2024;

  --color-accent-100: #edecfd;
  --color-accent-200: #dddbfb;
  --color-accent-300: #c3bff7;
  --color-accent-400: #a29cf0;
  --color-accent-500: #7d76e9;
  --color-accent-600: #4f47d6;
  --color-accent-700: #3f39b3;
  --color-accent-800: #302b86;
  --color-accent-900: #211d59;

  --color-accent-2-100: #e7f6ec;
  --color-accent-2-200: #c6ecd4;
  --color-accent-2-300: #98dcb3;
  --color-accent-2-400: #57c088;
  --color-accent-2-500: #2f9e63;
  --color-accent-2-600: #1f8050;
  --color-accent-2-700: #17663f;
  --color-accent-2-800: #124f31;
  --color-accent-2-900: #0c351f;

  /* ——— type — a calm grotesque voice, Linear/Stripe temperature ——— */
  --font-heading: "Schibsted Grotesk", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  /* ——— spacing — density baked in ——— */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  /* ——— radius — pro-tool geometry, calm not boutique ——— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ——— elevation — subtle, tuned to a light ground ——— */
  --shadow-sm: 0 1px 2px rgba(20,22,26,.06), 0 1px 1px rgba(20,22,26,.04);
  --shadow-md: 0 4px 12px rgba(20,22,26,.10), 0 2px 4px rgba(20,22,26,.05);
  --shadow-lg: 0 16px 40px rgba(20,22,26,.16), 0 4px 12px rgba(20,22,26,.07);
}

/* ══ dark theme — same token names resolve to grey-dark values ══ */
[data-theme="dark"] {
  --color-bg: #0e0f12;
  --color-surface: #17181c;
  --color-text: #eceef2;
  --color-divider: color-mix(in srgb, #eceef2 12%, transparent);

  --kr-danger: #f2897a;
  --kr-danger-bg: #381914;
  --color-warn: #e8b84b;
  --color-warn-bg: #322810;

  --color-neutral-100: #17181c;
  --color-neutral-200: #1e2024;
  --color-neutral-300: #292b31;
  --color-neutral-400: #3b3e45;
  --color-neutral-500: #565b64;
  --color-neutral-600: #7c818b;
  --color-neutral-700: #a4a9b2;
  --color-neutral-800: #cacdd4;
  --color-neutral-900: #edeff2;

  --color-accent-100: #201d4a;
  --color-accent-200: #2a2661;
  --color-accent-300: #372f86;
  --color-accent-400: #463cb0;
  --color-accent-500: #6459e6;
  --color-accent-600: #7d73ec;
  --color-accent-700: #9a92f1;
  --color-accent-800: #beb8f6;
  --color-accent-900: #e0dcfb;

  --color-accent-2-100: #10231a;
  --color-accent-2-200: #143020;
  --color-accent-2-300: #1a4530;
  --color-accent-2-400: #226141;
  --color-accent-2-500: #2f9e63;
  --color-accent-2-600: #43b878;
  --color-accent-2-700: #6fd39b;
  --color-accent-2-800: #a6e6c4;
  --color-accent-2-900: #d6f5e3;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS on plain HTML.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; letter-spacing: -0.03em; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.9) var(--space-3);
  border-radius: var(--radius-md);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); border-color: color-mix(in srgb, var(--color-text) 24%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 12px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 32%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: 999px; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-on-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  letter-spacing: 0.01em; padding: 3px 10px; border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-danger { background: var(--kr-danger-bg); color: var(--kr-danger); }
.tag-warn { background: var(--color-warn-bg); color: var(--color-warn); }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: none; }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Marketing site roles (website Phase 1, 2026-09-23). Additions only: every
   name above keeps its value. The site reads these; the workspace may adopt
   them. Dark values sit under [data-theme="dark"] below, like everything else.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* colour roles the marketing pages use (audit §6) */
  --color-muted: #585c6a;                       /* small and secondary text, 6.66:1 on bg */
  --color-line: #e3e4eb;                        /* solid 1 px rules (the divider is a mix) */
  --color-line-strong: #c8cad6;                 /* borders on controls and stronger rules */
  --color-accent-fill: #5b54e0;                 /* buttons, rules, focus, the playhead */
  --color-accent-text: #5b54e0;                 /* accent as small text */
  --color-accent-quiet: var(--color-accent-700);/* accent text where it must be quieter */
  --color-accent-soft: var(--color-accent-100); /* offer blocks, form panels */
  --color-accent-hover: var(--color-accent-600);/* light: #4f47d6 */
  --color-success-text: #1f8050;                /* "Sourced" as text: ramp 600, 4.93:1 on bg (#23875a measures 4.48:1) */
  --color-danger-text: #b93325;                 /* "Cut" and form errors as text: 5.0:1 on the accent-soft panel (#c8372a measures 4.46:1 there) */

  /* type: labels and data */
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* marketing type scale (review packet, board 09) */
  --type-display-1: clamp(34px, 5.2vw, 66px);   /* H1 · 800 · 1.03 · −0.03em */
  --type-display-2: clamp(28px, 3.4vw, 42px);   /* section head · 700 · 1.08 · −0.02em */
  --type-title: clamp(20px, 2.4vw, 28px);       /* film title · 700 · 1.15 */
  --type-row: 18px;                             /* row title · 600 · 1.35 · −0.01em */
  --type-lede: 19px;                            /* 1.55 · max 46ch */
  --type-body: 17px;                            /* 1.6 · max 62ch */
  --type-small: 14px;                           /* 1.5 */
  --type-label: 12px;                           /* mono 500 · 0.06em caps */
  --type-data: 13px;                            /* mono 400 · 1.55 */

  /* layout and spacing */
  --layout-frame: 1160px;
  --layout-gutter: clamp(16px, 5vw, 56px);
  --layout-rail: 180px;
  --layout-rail-gap: 56px;
  --space-section: clamp(56px, 8vw, 96px);
  --space-row: 18px;
  --space-stack-s: 10px;
  --space-stack-m: 22px;
  --space-stack-l: 32px;
  --measure: 62ch;
  --measure-lede: 46ch;

  /* motion */
  --dur-micro: 120ms;
  --dur-transition: 320ms;
  --dur-signature: 620ms;
  --ease-brand: cubic-bezier(.22, 1, .36, 1);
  --stagger: 45ms;

  /* geometry */
  --radius-film: 12px;                          /* players and posters */
}

[data-theme="dark"] {
  --color-muted: #a1a5b2;
  --color-line: #25272e;
  --color-line-strong: #3a3d48;
  --color-accent-fill: #6459e6;
  --color-accent-text: #8a82f0;                 /* never #6459e6 as small text */
  --color-accent-hover: #6b60e8;                /* white stays 4.7:1 on hover (ramp 600 #7d73ec measures 3.8:1) */
  --color-success-text: #43b878;
  --color-danger-text: #f2897a;
}


/* ═══ site.css ═══ */
/* Krowdee website, site v2 (2026-10-13 direction). Reads the roles in design/krowdee-mock/tokens.css
   (concatenated above this file at build). The first half is the shared base the API's own pages
   also load (/demo, /story, /pay link /assets/site.css): frame, wordmark, masthead, buttons, type,
   players, lists, the Start form, the footer, busy buttons. Keep those class names working.
   The second half (after "site v2") is the new pages and the motion system. */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/SchibstedGrotesk-latin-wght600-800.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/HankenGrotesk-latin-wght400-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-latin-500.woff2) format("woff2")}

/* ─── brand (2026-10-23): the "05 Queue" logo's colours, for the site only ───
   tokens.css keeps the workspace's indigo (app, admin and the extension read it too); these roles
   override it here, in both themes, so nothing on the site resolves to the old purple. Brand red
   #E8401C is for the logo, large display type and graphic accents (4.05:1 on white, 4.66:1 on ink);
   small text and buttons with white text use the text red #CC3515 (5.14:1 either way); small text on
   dark grounds uses #EB5B3D, the brand hue lightened to 5.48:1 on ink. The greys lost the indigo
   tint they had (OKLCH hue 262-280°): each is the neutral grey of the same luminance, so every
   contrast stays where it was (within 0.05). The ramps are redrawn in red so nothing falls back. */
:root{
  --brand:#e8401c;
  --color-bg:#ffffff;--color-surface:#f6f6f6;--color-text:#111111;--color-muted:#5c5c5c;
  --color-line:#e5e5e5;--color-line-strong:#cbcbcb;--color-divider:color-mix(in srgb,#111111 11%,transparent);
  --color-accent:#cc3515;
  --color-accent-fill:#e8401c;     /* graphics: focus rings, rules, playheads, ticks, chosen states */
  --color-accent-button:#cc3515;   /* fills that carry white text: 5.14:1 */
  --color-accent-hover:#b93013;    /* white 6.01:1 */
  --color-accent-active:#a72b11;   /* white 7.01:1 */
  --color-accent-text:#cc3515;     /* small text: 5.14:1 on white, 4.75:1 on the soft tint */
  --color-accent-quiet:#a72b11;
  --color-accent-soft:#fef4f1;     /* the brand at 6% on white */
  --color-danger-text:#b82f4b;     /* errors: the old #b93325 with its hue moved from 30° to 14° (OKLCH), clear of the brand red */
  --color-accent-100:#fef4f1;--color-accent-200:#fde3db;--color-accent-300:#f9c2b3;--color-accent-400:#f2876d;--color-accent-500:#e8401c;
  --color-accent-600:#cc3515;--color-accent-700:#a72b11;--color-accent-800:#7c200d;--color-accent-900:#521509;
}
[data-theme="dark"]{
  --color-bg:#111111;--color-surface:#181818;--color-text:#eeeeee;--color-muted:#a6a6a6;
  --color-line:#272727;--color-line-strong:#3d3d3d;--color-divider:color-mix(in srgb,#eeeeee 12%,transparent);
  --color-accent:#cc3515;
  --color-accent-fill:#e8401c;     /* 4.66:1 on ink */
  --color-accent-button:#cc3515;
  --color-accent-hover:#d53716;    /* lighter on dark, white still 4.79:1 */
  --color-accent-active:#b93013;
  --color-accent-text:#eb5b3d;     /* 5.48:1 on ink, 5.15:1 on the surface, 5.04:1 on the soft tint */
  --color-accent-quiet:#eb5b3d;
  --color-accent-soft:#271612;     /* the brand at 10% on ink */
  --color-danger-text:#f18692;     /* the old #f2897a, hue moved like the light one */
  --color-accent-100:#271612;--color-accent-200:#331913;--color-accent-300:#4d2015;--color-accent-400:#8a2f18;--color-accent-500:#e8401c;
  --color-accent-600:#eb5b3d;--color-accent-700:#f08a70;--color-accent-800:#f6b8a7;--color-accent-900:#fbe1d9;
}

:root[data-theme="dark"]{color-scheme:dark}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--type-body);line-height:1.6;font-weight:400}
p,h1,h2,h3,figure,dl,dd{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent-fill);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent-fill) 26%,transparent)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes kd-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── frame, skip link ─── */
.frame{max-width:var(--layout-frame);margin:0 auto;padding:0 var(--layout-gutter)}
.skip{position:absolute;inset-inline-start:16px;top:-100px;z-index:10;padding:10px 14px;border-radius:var(--radius-md);background:var(--color-accent-button);color:var(--color-on-accent);font:600 15px/1.2 var(--font-body);text-decoration:none}
.skip:focus{top:16px}

/* ─── the logo (layout.mjs logo()): the wordmark in brand red, white over the home film. Never under
   100 px wide; one x-height (w * 100/688) clear on every side, which the masthead and footer give it. ─── */
.logo{display:block;width:var(--logo-w,132px);height:auto;aspect-ratio:688/142;color:var(--brand);overflow:visible}
.logo-footer{--logo-w:120px}
@media (max-width:767px){.wordmark .logo{--logo-w:112px}}
.wordmark{display:block;text-decoration:none}
/* The masthead logo's queue wave (founder 2026-10-25: a slight movement every now and then, like a crowd): the
   seven letters step up one after another as the page opens, then again every 12 s. */
.logo-q path{animation:logo-q 12s ease-in-out infinite;animation-delay:calc(.5s + var(--i) * 70ms)}
@keyframes logo-q{0%,5%,100%{transform:none}2%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.logo-q path{animation:none}}
/* The API's own pages (api/src/site-page.ts) still send the old typed wordmark (.wm, .wm-word, .wm-cue,
   .wm-rule). Until they send the logo, this draws the logo in its place from the master file; the word
   stays in the page for screen readers. */
.wm,.wm-row{display:block}
.wm-word{display:block;width:132px;aspect-ratio:688/142;overflow:hidden;color:transparent;font-size:0;line-height:0;background:var(--brand);-webkit-mask:url(/assets/brand/krowdee-wordmark.svg) center/contain no-repeat;mask:url(/assets/brand/krowdee-wordmark.svg) center/contain no-repeat}
.wm-footer .wm-word{width:120px}
.wm-cue,.wm-rule{display:none}
@media (forced-colors:active){.wm-word{forced-color-adjust:none;background:CanvasText}}

/* ─── masthead ─── */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 22px;border-bottom:1px solid var(--color-line)}
.mnav{display:flex;align-items:center;gap:28px}
.mnav > a{white-space:nowrap}
.mnav > a:not(.button){font:500 13px/1 var(--font-mono);letter-spacing:.02em;color:var(--color-muted);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
@media (max-width:1023px){.mnav{gap:18px}}
.mnav > a:not(.button):hover{color:var(--color-text)}
.mnav > a[aria-current="page"]{color:var(--color-text);border-bottom-color:var(--color-accent-fill)}
/* Films: a button that opens the three kinds of film in a small panel, from the button's start side */
.nav-films{position:relative}
.nav-films-btn{display:flex;align-items:center;gap:7px;padding:8px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--color-muted);font:500 13px/1 var(--font-mono);letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.nav-films-btn::after{content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease-out)}
.nav-films-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-films-btn:hover,.nav-films-btn[aria-expanded="true"]{color:var(--color-text)}
.nav-films-btn.is-current{color:var(--color-text);border-bottom-color:var(--color-accent-fill)}
.films-menu{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;display:grid;gap:2px;width:392px;padding:8px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-bg);box-shadow:var(--shadow-lg);animation:kd-rise .2s var(--ease-brand) both}
.films-menu[hidden]{display:none}
.films-menu a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding:12px 14px;border-radius:var(--radius-md);color:var(--color-text);text-decoration:none}
.films-menu a:hover{background:color-mix(in srgb,var(--color-text) 6%,transparent)}
.films-menu b{font:600 15px/1.3 var(--font-body)}
.films-menu a[aria-current="page"] b{text-decoration:underline;text-decoration-color:var(--color-accent-fill);text-decoration-thickness:2px;text-underline-offset:5px}
.films-menu small{font:500 12px/1.3 var(--font-mono);color:var(--color-accent-text);white-space:nowrap}
.films-menu span{grid-column:1/-1;font-size:14px;line-height:1.45;color:var(--color-muted);text-wrap:pretty}
[data-theme="dark"] .films-menu{background:var(--color-surface)}
:root[lang="ar"] .nav-films-btn,:root[lang="ar"] .films-menu small{font-family:var(--font-body)}
.mast-over .nav-films-btn,.mast-over .nav-films-btn:hover{color:#fff}
.theme{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:transparent;color:var(--color-text);cursor:pointer}
.theme:hover{border-color:var(--color-text)}
.theme-lg{width:44px;height:44px}
.theme-icon{display:flex;width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;overflow:hidden}
.theme-icon span{width:50%;background:currentColor}
.mast-mobile{display:none;align-items:center;gap:8px}
.menu-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:500 13px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.burger{display:grid;gap:4px;width:16px}
.burger span{height:2px;border-radius:2px;background:currentColor}
.burger span:last-child{width:10px}
.menu{display:grid;gap:28px;padding:8px 0 32px;border-bottom:1px solid var(--color-line);animation:kd-rise var(--dur-transition) var(--ease-brand) both}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{display:flex;justify-content:space-between;align-items:baseline;min-height:56px;padding:14px 0;border-bottom:1px solid var(--color-line);font:700 26px/1.1 var(--font-heading);letter-spacing:-.02em;color:var(--color-text);text-decoration:none}
.menu nav a[aria-current="page"] span:first-child{text-decoration:underline;text-decoration-color:var(--color-accent-fill);text-decoration-thickness:2px;text-underline-offset:6px}
.menu-n{font:500 12px/1 var(--font-mono);color:var(--color-accent-text)}
.menu-films{display:grid}
.menu-group{margin:0;padding:22px 0 4px;font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
:root[lang="ar"] .menu-group{font-family:var(--font-body);font-size:14px;letter-spacing:0}
.menu-email{font:500 13px/1.5 var(--font-mono);color:var(--color-muted)}
/* With Films in one button (2026-10-16) the desktop nav fits from an 836 px viewport in English and
   under 800 in Arabic (measured in headless Chrome). It still switches at 1120, as it did before
   Services joined: the floor this change was briefed with, and room to breathe; below it the menu takes over.
   site.js closes an open menu at the same width. */
@media (max-width:1119px){.mnav{display:none}.mast-mobile{display:flex}}
@media (min-width:1120px){.menu{display:none!important}}

/* ─── buttons, links, type ─── */
.button{display:inline-flex;align-items:center;justify-content:center;font:600 16px/1.15 var(--font-body);padding:15px 20px;border:0;border-radius:var(--radius-md);background:var(--color-accent-button);color:var(--color-on-accent);text-decoration:none;cursor:pointer;transition:background var(--dur-micro) ease}
.button:hover{background:var(--color-accent-hover)}
.button:active{background:var(--color-accent-active)}
.button:disabled{opacity:.6;cursor:default}
.button-sm{font-size:15px;padding:11px 16px}
.button-block{display:flex;width:100%;padding:16px 20px}
.link{font:500 16px/1.4 var(--font-body);color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:5px;transition:text-decoration-color var(--dur-micro) ease}
.link:hover{text-decoration-color:var(--color-accent-fill)}
.self-start{justify-self:start}
.eyebrow{font:500 12.5px/1.45 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.accent{color:var(--color-accent-text)}
.h1{font-family:var(--font-heading);font-weight:800;font-size:var(--type-display-1);line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
.h1-12{max-width:12ch}.h1-14{max-width:14ch}.h1-16{max-width:16ch}
.h2{font-family:var(--font-heading);font-weight:700;font-size:var(--type-display-2);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.h2-sm{font-size:clamp(24px,2.6vw,30px);line-height:1.15}
.h2-quiet{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.lede{font-size:var(--type-lede);line-height:1.55;max-width:var(--measure-lede)}
.note{font-size:var(--type-small);color:var(--color-muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.actions-pad{padding-top:6px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px}

/* ─── sections and the rail ─── */

/* ─── page heads ─── */
.hero-head{display:grid;gap:22px;padding:clamp(40px,7vw,88px) 0 clamp(32px,4vw,48px)}


/* ─── rows with counters ─── */
.row-body{flex:1 1 360px;display:grid;gap:2px}
.row-title{font:600 var(--type-row)/1.35 var(--font-heading);letter-spacing:-.01em}
.row-title-0{letter-spacing:0}
.row-text{color:var(--color-muted)}
.stage{padding:20px 0}
.stage-body{flex:1 1 300px;display:grid;gap:4px}
.stage-body strong{font:600 19px/1.35 var(--font-heading);letter-spacing:-.01em}
.stage-body span{color:var(--color-muted);max-width:56ch}
.stage-out{flex:0 1 220px;font:400 13px/1.7 var(--font-mono);color:var(--color-muted)}

/* ─── films, players ─── */
.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 28px}
.film{display:grid;gap:10px;align-content:start}
.film-label{margin-top:6px;font:500 12px/1.4 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-accent-text)}
.film-label-0{margin-top:0}
.film-title{font:700 20px/1.25 var(--font-heading);letter-spacing:-.01em}
.film-title a,.work-title a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-line-strong);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color var(--dur-micro) ease}
.film-title a:hover,.work-title a:hover{text-decoration-color:var(--color-accent-fill)}
.film-line{font-size:16px;color:var(--color-muted)}
.honesty{margin-top:4px;padding-top:10px;border-top:1px solid var(--color-line);font-size:14px;line-height:1.5;color:var(--color-muted)}
.honesty-rule{padding:12px 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);font-size:15px;color:var(--color-muted)}
.disclaimer{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-sm);font-size:15px;line-height:1.5}
.disclaimer span{font:500 12px/1.9 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
.playerwrap{position:relative;display:grid;gap:10px}
.player{position:relative;aspect-ratio:16/9;border:1px solid var(--color-line);border-radius:var(--radius-film);overflow:hidden;background:var(--color-surface)}
.player video,.player-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.playerwrap.is-started .player-poster{display:none}
.player-play{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font:500 12px/1 var(--font-mono);letter-spacing:.04em;cursor:pointer}
.player-play:hover{background:var(--color-surface)}
.playerwrap.is-started .player-play{display:none}
.tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.player-bar{display:flex;align-items:center;gap:14px;min-width:0;font:500 12px/1 var(--font-mono);color:var(--color-muted)}
.playerwrap:not(.bar-under) .player-bar{position:absolute;left:12px;right:12px;bottom:12px;padding:6px 8px;border-radius:var(--radius-md);background:var(--color-bg);opacity:0;pointer-events:none;transition:opacity var(--dur-micro) ease}
.playerwrap:not(.bar-under).is-started .player-bar{opacity:1;pointer-events:auto}
.pbtn{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-md);background:var(--color-accent-button);color:var(--color-on-accent);cursor:pointer}
.pbtn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.pbtn.is-playing::before{transform:translate(-50%,-50%);width:12px;height:14px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.playerwrap:not(.bar-under):not(.is-full) .pbtn{width:32px;height:32px}
.playerwrap:not(.bar-under):not(.is-full) .pbtn::before{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.playerwrap:not(.bar-under):not(.is-full) .pbtn.is-playing::before{width:10px;height:12px;border-left-width:3px;border-right-width:3px}
.prog{flex:1;min-width:0;height:6px;margin:0;border-radius:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(var(--color-accent-fill),var(--color-accent-fill)) 0/var(--p,0%) 100% no-repeat var(--color-line);cursor:pointer}
.prog::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent-fill);border:2px solid var(--color-bg)}
.prog::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--color-accent-fill);border:2px solid var(--color-bg)}
.prog:focus-visible{outline-offset:4px}
.ptime{color:var(--color-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcc{min-height:44px;padding:0 12px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:500 12px/1 var(--font-mono);cursor:pointer}
.playerwrap:not(.bar-under):not(.is-full) .pcc{min-height:32px}
.pfs{position:relative;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:transparent;color:var(--color-text);cursor:pointer}
.pfs svg{display:block;margin:auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pfs .fs-out,.playerwrap.is-full .pfs .fs-in{display:none}
.playerwrap.is-full .pfs .fs-out{display:inline}
.playerwrap:not(.bar-under):not(.is-full) .pfs{width:32px;height:32px}
.playerwrap:not(.bar-under):not(.is-full) .pfs::after{content:"";position:absolute;inset:-8px}
.playerwrap:not(.bar-under):not(.is-full) .pfs svg{width:14px;height:14px}
/* full screen (site.js sets .is-full): the film fills the screen uncropped on black, the full-size bar under it */
.playerwrap.is-full{grid-template-rows:minmax(0,1fr) auto;gap:0;background:#000;color:var(--screen-text)}
.playerwrap.is-full .player{width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:#000}
.playerwrap.is-full video,.playerwrap.is-full .player-poster{object-fit:contain}
.playerwrap.is-full .player-bar{position:static;opacity:1;pointer-events:auto;padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-radius:0;background:#000;color:var(--screen-muted)}
.playerwrap.is-full .ptime{color:var(--screen-text)}
.playerwrap.is-full .pcc,.playerwrap.is-full .pfs{border-color:#3d3d3d;color:var(--screen-text)}
.playerwrap.is-full .prog{background:linear-gradient(var(--color-accent-fill),var(--color-accent-fill)) 0/var(--p,0%) 100% no-repeat var(--screen-line)}
.playerwrap.is-full .prog::-webkit-slider-thumb{border-color:#000}
/* phones: the playhead takes its own row over the buttons, so the full-screen control leaves it room */
@media (max-width:599px){.player-bar{flex-wrap:wrap;row-gap:10px}.playerwrap:not(.bar-under):not(.is-full) .player-bar{row-gap:8px}.prog{order:-1;flex-basis:100%}.ptime{margin-right:auto}}


/* ─── definition lists ─── */
.dl{display:grid;border-top:1px solid var(--color-line);font-size:16px}
.dl > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--color-line)}
.dl dt{font:500 12px/1.9 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
.dl-right dd{text-align:right}
.dl-mono dd{font-family:var(--font-mono);font-size:14px}
.dl-mono dd.dd-body{font-family:var(--font-body);font-size:16px}
.dl-scope > div{flex-wrap:wrap;justify-content:flex-start;gap:2px 24px;padding:14px 0}
.dl-scope dt{flex:0 0 150px}
.dl-scope dd{flex:1 1 200px;text-align:left}
.formats > div{flex-wrap:wrap;justify-content:flex-start;gap:4px 40px;padding:16px 0}
.formats dt{flex:0 0 220px;font:600 17px/1.4 var(--font-heading);letter-spacing:0;text-transform:none;color:var(--color-text)}
.formats dd{flex:1 1 300px;color:var(--color-muted)}
.faq{display:grid;border-top:1px solid var(--color-line)}
.faq > div{display:flex;flex-wrap:wrap;gap:6px 40px;padding:18px 0;border-bottom:1px solid var(--color-line)}
.faq dt{flex:2 1 240px;font:600 18px/1.35 var(--font-heading)}
.faq dd{flex:3 1 300px;color:var(--color-muted)}
.split{display:flex;flex-wrap:wrap;gap:28px 56px}
.split-a{flex:1 1 340px;display:grid;gap:18px;align-content:start}
.split-b{flex:1 1 300px}
.where{display:flex;flex-wrap:wrap;gap:24px 56px}
.where .dl{flex:1 1 320px;align-self:start}


/* ─── start block, footer ─── */
.start{flex:1 1 560px;min-width:0;display:grid;gap:18px;padding:clamp(24px,4.5vw,52px);border-radius:var(--radius-lg);background:var(--color-accent-soft)}
.start .h2{max-width:18ch}
.start > p:not(.note){max-width:52ch}
.start-email{font:500 14px/1.4 var(--font-mono);color:var(--color-text)}
.footer{display:grid;gap:40px;padding:56px 0 40px;border-top:1px solid var(--color-line);font:400 13px/1.5 var(--font-mono);color:var(--color-muted)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 56px}
.footer-brand{display:grid;gap:14px;align-content:start}
/* with the brand column's 14 px gap, 18 px to the line under the logo: its clear space (x-height 17.4 at 120 px) */
.footer-wm{display:block;margin-block-end:4px}
.footer-tag{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.footer-cols{display:flex;flex-wrap:wrap;gap:24px 56px}
.footer nav,.footer-contact{display:grid;gap:10px;align-content:start}
.footer a{color:var(--color-muted);text-decoration:none}
.footer a:hover{color:var(--color-text)}
.footer-contact a{color:var(--color-text)}
.footer-contact a[href^="mailto"]{text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:4px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:20px;border-top:1px solid var(--color-line);font-size:12px}
.footer-legal{display:flex;flex-wrap:wrap;gap:20px}


/* ─── start page, form ─── */
.fld{display:grid;gap:8px}
.fld label,.fset legend{font:600 15px/1.3 var(--font-body)}
.fld label span{font-weight:400;color:var(--color-muted)}
.fld input,.fld textarea{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font:400 17px/1.4 var(--font-body)}
.fld textarea{min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--color-accent-fill);outline-offset:0;border-color:var(--color-accent-fill)}
.fld [aria-invalid="true"]{border:2px solid var(--color-danger-text);padding-inline:13px}
.err{font-size:14px;color:var(--color-danger-text)}
.err:empty{display:none}
.fset{margin:0;padding:0;border:0;display:grid;gap:10px}
.fset legend{padding:0 0 8px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.form-msg{font-size:15px}
.form-msg:empty{display:none}
.start-done{align-content:start;gap:14px}
.start-done p:not(.eyebrow){font-size:17px;line-height:1.5}
.start-done strong{overflow-wrap:anywhere}
.start-done h2:focus{outline:none}
.start-done h2:focus-visible{outline:2px solid var(--color-accent-fill);outline-offset:4px}
.text-button{min-height:44px;padding:0;border:0;background:none;color:var(--color-text);font:500 15px/1.3 var(--font-body);text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:5px;cursor:pointer}
.text-button:disabled{color:var(--color-muted);text-decoration:none;cursor:default}
.text-button:focus-visible{outline:2px solid var(--color-accent-fill);outline-offset:2px}

/* ─── legal ─── */
.legal{max-width:62ch;display:grid;gap:14px;padding:clamp(40px,7vw,88px) 0 var(--space-section)}
.legal h2{margin-top:20px;font:700 19px/1.35 var(--font-heading);letter-spacing:-.01em}
.legal a{color:var(--color-text);text-decoration-color:var(--color-line-strong);text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ═══ Waiting on the network ═══
   A button whose click waits on a request holds its resting label and a busy label in the same
   grid cell, so it is as wide as the wider of the two from the start and never jumps. While busy
   it is disabled, aria-busy, and shows a small spinner and the present-tense label. site.js (and
   the API's own pages, through the same markup) only toggle .is-busy. */
.busyable{display:inline-grid;place-items:center}
.busyable.button-block{display:grid}
.busyable > .rest-label,.busyable > .busy-label{grid-area:1/1}
.busy-label{display:inline-flex;align-items:center;gap:8px;visibility:hidden}
.busyable.is-busy > .rest-label{visibility:hidden}
.busyable.is-busy > .busy-label{visibility:visible}
.busyable.is-busy{cursor:progress}
.busy-label::before{content:"";flex:none;width:.9em;height:.9em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busy-spin .8s linear infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}
/* Under reduced motion the label's own "…" says it; no spinner. */
@media (prefers-reduced-motion:reduce){.busy-label::before{display:none}}

/* A film loading after Play, or stalling mid-way: the poster stays until the first frame, with a
   spinner over it; the play control waits. */
.playerwrap.is-loading .player::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.9);border-right-color:transparent;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15);animation:busy-spin .8s linear infinite;pointer-events:none}
.playerwrap.is-loading .player-play{pointer-events:none;opacity:.7}
@media (prefers-reduced-motion:reduce){.playerwrap.is-loading .player::after{animation:none;border-right-color:rgba(255,255,255,.9);opacity:.6}}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   site v2 · separate pages, one fluid site
   ════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --dir:1;
  --screen:#111111;--screen-2:#191919;--screen-text:#eeeeee;--screen-muted:#a8a8a8;--screen-line:#292929;--screen-accent:#eb5b3d;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.5,0,.75,0);
  --r-media:clamp(12px,1.2vw,18px);
}
[data-theme="dark"]{--screen:#060606;--screen-2:#111111;--screen-line:#252525}
.frame{max-width:1320px}
html{scroll-padding-top:96px}
body{overflow-x:clip}

/* ─── masthead: sticky, hides while reading down, back on the way up; stays still between pages ─── */
.mast-wrap{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--color-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:transform .35s var(--ease-out);view-transition-name:masthead}
.mast-wrap .masthead{border-bottom-color:transparent;padding:18px 0 16px;transition:border-color .2s ease}
.mast-wrap.is-scrolled .masthead{border-bottom-color:var(--color-line)}
.mast-wrap.is-hidden{transform:translateY(-100%)}
.mast-wrap:focus-within{transform:none}
.mnav > a.button[aria-current="page"]{color:var(--color-on-accent);border-bottom:0;padding:11px 16px;box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 40%,transparent)}
.menu{padding-bottom:24px}

/* ─── type ─── */
.v-h1{font:800 clamp(44px,6.3vw,100px)/.93 var(--font-heading);letter-spacing:-.047em;text-wrap:balance;max-width:14ch;margin:0}
.v-h1 em{position:relative;font-style:normal;color:var(--brand);white-space:nowrap}
.v-h1 em::after{content:"";position:absolute;left:.02em;right:.06em;bottom:.02em;height:.075em;border-radius:.04em;background:var(--color-accent-fill);transform-origin:0 50%;animation:kd-sweep 1s var(--ease-brand) .45s both}
.v-h1-page{font-size:clamp(40px,5.8vw,88px);max-width:15ch}
.v-h1-film{font-size:clamp(40px,5.4vw,80px);max-width:none}
.v-h2{font:700 clamp(30px,3.8vw,54px)/1.03 var(--font-heading);letter-spacing:-.032em;text-wrap:balance;max-width:20ch;margin:8px 0 0}
.v-h3{font:700 clamp(22px,2.1vw,28px)/1.15 var(--font-heading);letter-spacing:-.02em;margin:0}
.v-lede{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--color-muted);max-width:44ch;text-wrap:pretty}
.v-lede strong{color:var(--color-text);font-weight:600;white-space:nowrap}
.v-sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(24px,3vw,40px)}
.v-pagehead{display:grid;gap:18px;padding:clamp(36px,6vw,92px) var(--layout-gutter) clamp(28px,4vw,52px)}
.link{text-underline-offset:6px}
.button{transition:background var(--dur-micro) ease,transform .2s var(--ease-out)}
.button:active{transform:translateY(1px)}

/* ─── the round pause control on a reel, and the pill toggles ─── */
.screen-toggle{min-height:36px;padding:0 14px;border:1px solid var(--color-line-strong);border-radius:99px;background:transparent;color:var(--color-text);font:500 12px/1 var(--font-mono);letter-spacing:.04em;cursor:pointer}
.screen-toggle:hover{border-color:var(--color-text)}
/* The reel's pause control: a small round button over the film's corner. Its name stays "Pause";
   aria-pressed says whether the reel is paused, and the icon follows (two bars, or a play triangle). */
.reel-toggle{position:absolute;z-index:3;inset-inline-end:clamp(12px,2.4vw,32px);bottom:clamp(12px,2.4vw,32px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(10,11,14,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.reel-toggle:hover{background:rgba(10,11,14,.78);border-color:#fff}
.reel-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(10,11,14,.6)}
.reel-toggle::before{content:"";width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.reel-toggle[aria-pressed="true"]::before{width:13px;height:15px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(1.5px)}
/* on Home the corner slate sits bottom-left in both languages; in Arabic the toggle moves above it */
@media (min-width:768px){[dir="rtl"] .hero-toggle{bottom:calc(clamp(12px,2.4vw,32px) + 48px)}}

/* load-in for the opening screen: the prices and buttons rise; the h1 paints at once */
@keyframes v-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes v-rise-t{from{transform:translateY(28px)}}
.v-rise{animation:v-rise .9s var(--ease-brand) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}

/* ─── home: the wall of work, two rows drifting in opposite directions ─── */
.v-wall{padding:clamp(28px,3.4vw,56px) 0 clamp(28px,3.4vw,48px);background:var(--screen);color:var(--screen-text)}
.v-wall .eyebrow,.v-band .eyebrow,.v-stage .eyebrow{color:var(--screen-muted)}
.v-wall .link,.v-band .link,.v-stage .link{color:var(--screen-text);text-decoration-color:#5f5f5f}
.wall{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.2vw,16px)}
.wall-row{min-width:0;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wall-track{display:flex;width:max-content;gap:clamp(10px,1.2vw,16px);animation:wall-drift 110s linear infinite}
.wall-row[data-dir="right"] .wall-track{animation-direction:reverse;animation-duration:96s}
.wall-set{display:flex;gap:clamp(10px,1.2vw,16px)}
@keyframes wall-drift{to{transform:translateX(calc(-50% - clamp(10px,1.2vw,16px) / 2))}}
.wall.is-paused .wall-track{animation-play-state:paused}
.tile-wall{flex:none;width:clamp(240px,25vw,380px)}
.tile-over{position:absolute;inset-inline:0;bottom:0;z-index:2;display:grid;gap:2px;padding:36px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;text-align:start}
.tile-over strong{font:700 clamp(17px,1.5vw,21px)/1.1 var(--font-heading);letter-spacing:-.015em}
.tile-over small{font:500 11.5px/1.3 var(--font-mono);color:#d8d8d8}
.wall-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:22px}
.v-wall .screen-toggle,.v-band .screen-toggle{border-color:#3d3d3d;color:var(--screen-text)}
@media (prefers-reduced-motion:reduce){.wall-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;padding:0 var(--layout-gutter)}.wall-set[aria-hidden]{display:none}.wall-track{animation:none}.tile-wall{scroll-snap-align:start}[data-wall-toggle]{display:none}}

/* ─── tiles: poster, muted preview, progress line, a quiet "watch" ─── */
.tile{position:relative;display:grid;gap:0;align-content:start;color:inherit;text-decoration:none;min-width:0}
.tile-media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--screen-2);isolation:isolate}
.tile-media img,.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-media{transition:transform .25s var(--ease-out)}
.tile:active .tile-media{transform:scale(.985)}
.tile-media img{transition:transform .9s var(--ease-brand)}
.tile-media video{opacity:0;transition:opacity .3s ease}
.tile.is-playing .tile-media video{opacity:1}
.tile:hover .tile-media img,.tile.is-playing .tile-media img{transform:scale(1.035)}
.tile-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.18);opacity:0;transition:opacity .2s ease}
.tile-bar i{display:block;height:100%;width:100%;background:var(--color-accent-fill);transform:scaleX(var(--p,0));transform-origin:0 50%}
.tile.is-playing .tile-bar{opacity:1}
.tile-go{position:absolute;top:12px;inset-inline-end:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;background:#fff;color:#111111;font:600 13px/1 var(--font-body);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .3s var(--ease-out)}
.tile-go b{transition:transform .3s var(--ease-out)}
.tile:hover .tile-go,.tile:focus-visible .tile-go{opacity:1;transform:none}
.tile:hover .tile-go b{transform:translateX(calc(3px * var(--dir)))}
.tile:focus-visible{outline:none}
.tile:focus-visible .tile-media{outline:2px solid var(--color-accent-fill);outline-offset:3px}
.tile-cap{display:grid;gap:5px;padding-top:14px}
.tile-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.tile-name strong{font:700 clamp(20px,1.7vw,26px)/1.1 var(--font-heading);letter-spacing:-.022em}
.tile-name span{color:var(--color-muted);font-size:16px}
.tile-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 12px/1.4 var(--font-mono);color:var(--color-muted)}
.tile-dur{font-variant-numeric:tabular-nums}
.tile-label{font:500 11.5px/1.45 var(--font-mono);letter-spacing:.02em;color:var(--color-accent-text)}
.tile-wall .tile-label{display:none}

/* ─── work page ─── */
.v-work{padding-bottom:clamp(64px,8vw,120px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,36px)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--color-line-strong);background:transparent;color:var(--color-text);font:500 13px/1 var(--font-mono);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.chip span{color:var(--color-muted);font-size:12px}
.chip:hover{border-color:var(--color-text)}
.chip[aria-pressed="true"]{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.chip[aria-pressed="true"] span{color:color-mix(in srgb,var(--color-bg) 70%,transparent)}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(30px,3.2vw,48px) clamp(14px,1.6vw,22px)}
.tile-half{grid-column:span 3}.tile-third{grid-column:span 2}
.tile-third .tile-name strong{font-size:clamp(19px,1.5vw,22px)}
.grid.is-filtered .tile{grid-column:span 2}
.grid .tile[hidden]{display:none}
@media (max-width:1023px){.grid .tile,.grid.is-filtered .tile{grid-column:span 3}}
@media (max-width:639px){.grid{grid-template-columns:1fr}.grid .tile,.grid.is-filtered .tile{grid-column:1/-1}}

/* ─── film page: the stage ─── */
.v-stage{background:var(--screen);color:var(--screen-text);padding:6px 0 clamp(40px,5vw,72px)}
.crumb{display:flex;gap:10px;padding:18px 0 20px;font:500 12.5px/1.4 var(--font-mono);color:var(--screen-muted)}
.crumb a{color:var(--screen-muted);text-decoration:none}
.crumb a:hover{color:var(--screen-text)}
.v-stage .player{border:0;border-radius:var(--r-media);background:#000}
.v-stage .player-bar{color:var(--screen-muted)}
.v-stage .ptime{color:var(--screen-text)}
.v-stage .pcc,.v-stage .pfs{border-color:#3d3d3d;color:var(--screen-text)}
.v-stage .prog{background:linear-gradient(var(--color-accent-fill),var(--color-accent-fill)) 0/var(--p,0%) 100% no-repeat var(--screen-line)}
.v-stage .prog::-webkit-slider-thumb{border-color:var(--screen)}
.player-play{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);gap:12px;padding:14px 20px 14px 18px;border-radius:99px;background:#fff;color:#111111;font:600 16px/1 var(--font-body);letter-spacing:0;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:transform .3s var(--ease-out),background .2s ease}
.player-play:hover{background:#fff;transform:translate(-50%,-50%) scale(1.04)}
.player-play:active{transform:translate(-50%,-50%) scale(.98)}
.player-play .tri{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.player-dur{font:500 13px/1 var(--font-mono);color:#5c5c5c}
@media (max-width:599px){.v-stage .playerwrap{margin-inline:calc(-1 * var(--layout-gutter))}.v-stage .player{border-radius:0}.v-stage .player-bar{padding:0 var(--layout-gutter)}}
.v-film-head{display:grid;gap:18px 56px;padding-top:clamp(22px,3vw,36px)}
@media (min-width:900px){.v-film-head{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end}}
.v-film-title{display:grid;gap:10px}
.v-stage .film-label{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;color:var(--screen-accent)}
.v-film-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font:500 clamp(17px,1.5vw,20px)/1.35 var(--font-body);color:var(--screen-text)}
.v-film-sub span{font:500 12.5px/1.4 var(--font-mono);color:var(--screen-muted)}
.v-film-line{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--screen-muted);max-width:40ch;padding-bottom:6px}
.v-film-body{padding-block:clamp(48px,6vw,96px)}
.v-film-cols{display:grid;gap:32px 72px}
@media (min-width:900px){.v-film-cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.v-brief{display:grid;gap:14px}
.v-brief p{font:600 clamp(22px,2.2vw,30px)/1.3 var(--font-heading);letter-spacing:-.016em;max-width:32ch;text-wrap:pretty}
.v-facts,.v-made-list,.v-extras-list{display:grid;margin:0;border-top:1px solid var(--color-line)}
.v-facts > div,.v-made-list > div,.v-extras-list > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:13px 0;border-bottom:1px solid var(--color-line)}
.v-facts dt,.v-made-list dt{font:500 12px/1.9 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
.v-facts dd{margin:0;text-align:end}
.v-made{display:grid;gap:18px;margin-top:clamp(48px,6vw,88px)}
.v-made-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:48px}
.v-made-list > div{justify-content:flex-start}
.v-made-list dt{flex:0 0 130px}
.v-made-list dd{flex:1 1 220px;margin:0;color:var(--color-text)}
.v-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(40px,5vw,72px)}
.v-stills img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media);background:var(--color-surface)}
@media (max-width:639px){.v-stills{grid-template-columns:1fr 1fr}.v-stills figure:first-child{grid-column:1/-1}}
.v-site{display:grid;margin-top:clamp(40px,5vw,72px);border:1px solid var(--color-line-strong);border-radius:20px;overflow:hidden;color:var(--color-text);text-decoration:none;transition:border-color .2s ease,transform .3s var(--ease-out)}
.v-site:hover{border-color:var(--color-accent-fill);transform:translateY(-2px)}
.v-site-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--color-line);background:var(--color-surface);font:500 12px/1 var(--font-mono);color:var(--color-muted)}
.v-site-bar i{width:10px;height:10px;border-radius:50%;background:var(--color-line-strong)}
.v-site-bar span{margin-inline-start:10px}
.v-site-body{display:grid;gap:8px;padding:clamp(20px,3vw,32px) clamp(20px,3vw,32px) 8px}
.v-site-t{font:700 clamp(22px,2.3vw,32px)/1.12 var(--font-heading);letter-spacing:-.022em;max-width:26ch}
.v-site-go{padding:8px clamp(20px,3vw,32px) clamp(20px,3vw,28px);font:500 13px/1.4 var(--font-mono);color:var(--color-accent-text)}
.v-pager{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);padding-bottom:clamp(64px,8vw,112px)}
.v-pager-item{display:grid;gap:12px;align-content:start}
@media (max-width:639px){.v-pager{grid-template-columns:1fr}}

/* ─── how it works ─── */
.v-process{display:grid;gap:32px 64px;padding-bottom:clamp(64px,8vw,120px)}
@media (min-width:900px){.v-process{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.v-process-clip{position:sticky;top:96px}}
.v-process-clip{position:relative;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--screen)}
.v-process-clip img,.v-process-clip video,.v-every-media img,.v-every-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-process-clip video,.v-every-media video{opacity:0;transition:opacity .4s ease}
.is-looping video{opacity:1}
.v-process-now{position:absolute;inset-inline-start:14px;bottom:14px;padding:7px 11px;border-radius:99px;background:rgba(11,12,16,.66);color:#eeeeee;font:500 12px/1 var(--font-mono)}
.v-process-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.v-process-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 14px;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--color-line)}
.v-process-steps h2{font:700 clamp(26px,2.6vw,36px)/1.08 var(--font-heading);letter-spacing:-.028em;margin:0;transition:color .3s ease}
.v-process-steps p{grid-column:2}
.v-process-body{font-size:18px}
.v-process-detail{color:var(--color-muted);max-width:52ch}
.v-steps-n{font:500 13px/2 var(--font-mono);color:var(--color-accent-text)}
.v-process-steps.is-live li:not(.on) h2{color:var(--color-muted)}
.v-band{padding:clamp(64px,8vw,120px) 0;background:var(--screen);color:var(--screen-text)}
.v-every{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
@media (max-width:899px){.v-every{grid-template-columns:1fr}}
.v-every-card{display:grid;gap:10px;align-content:start}
.v-every-card h3{font:700 22px/1.2 var(--font-heading);letter-spacing:-.015em;margin:8px 0 0}
.v-every-card p{color:var(--screen-muted)}
.v-every-media{position:relative;aspect-ratio:16/10;border-radius:var(--r-media);overflow:hidden;background:var(--screen-2)}
.v-voice{position:absolute;inset:0;display:grid;align-content:end;gap:16px;padding:20px;background:linear-gradient(rgba(6,7,9,.15),rgba(6,7,9,.78))}
.v-wave{display:flex;align-items:center;gap:4px;height:44px}
.v-wave i{flex:1;max-width:6px;height:100%;border-radius:3px;background:#eeeeee;transform:scaleY(.18);animation:v-wave 1.3s ease-in-out infinite}
.v-wave i:nth-child(3n){animation-delay:-.4s}.v-wave i:nth-child(3n+1){animation-delay:-.8s}.v-wave i:nth-child(4n){animation-duration:1.7s}.v-wave i:nth-child(5n){animation-duration:.9s}
@keyframes v-wave{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(.9)}}
.v-voice-lines{position:relative;display:grid;min-height:3em;font:600 clamp(17px,1.6vw,20px)/1.35 var(--font-heading);color:#fff}
.v-voice-lines span{grid-area:1/1;opacity:0;animation:v-line 9s infinite}
.v-voice-lines span:nth-child(2){animation-delay:3s}.v-voice-lines span:nth-child(3){animation-delay:6s}
@keyframes v-line{0%{opacity:0;transform:translateY(8px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.v-voice-lines span:first-child{opacity:1}}
.v-delivery{padding-block:clamp(64px,8vw,120px)}
.v-delivery-in{display:grid;gap:28px 64px}
@media (min-width:900px){.v-delivery-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.tree{padding:clamp(18px,2.4vw,28px);border:1px solid var(--color-line-strong);border-radius:20px;background:var(--color-surface);font:400 13px/1.55 var(--font-mono);overflow-wrap:anywhere}
.tree-root{font-weight:500;color:var(--color-text);margin-bottom:10px}
.tree ul{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--color-line-strong)}
.tree > ul{padding-left:14px}
.tree li{padding:3px 0}
.tree li li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;color:var(--color-muted)}
.tree-dir{display:flex;flex-wrap:wrap;gap:2px 14px;padding-top:8px}
.tree-dir span{font-weight:500;color:var(--color-text)}
.tree small{font-size:12px;color:var(--color-muted)}

/* ─── pricing ─── */
.v-price-line{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 clamp(17px,1.5vw,20px)/1.4 var(--font-body);color:var(--color-muted)}
.v-price-line strong{color:var(--color-text);font-weight:600}
.draft-note{justify-self:start;display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 14px 8px 8px;border:1px dashed color-mix(in srgb,var(--color-warn) 70%,transparent);border-radius:12px;background:var(--color-warn-bg);color:var(--color-text);font-size:14px;line-height:1.4}
.draft-note span{padding:4px 8px;border-radius:7px;background:var(--color-warn);color:#fff;font:600 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
[data-theme="dark"] .draft-note span{color:#111111}
.v-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);padding-bottom:clamp(56px,7vw,104px)}
@media (max-width:899px){.v-plans{grid-template-columns:1fr}}
.v-plan{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.6vw,32px);border:1px solid var(--color-line-strong);border-radius:22px}
/* the main plan is marked by a brand-red edge (2026-10-23): a red tint reads brown on the dark theme */
.v-plan-main{border-color:var(--color-accent-fill);box-shadow:inset 0 0 0 1px var(--color-accent-fill)}
.v-plan-name{font:700 22px/1.15 var(--font-heading);letter-spacing:-.015em;margin:0}
.v-plan-len{font:500 12.5px/1.4 var(--font-mono);color:var(--color-muted)}
.v-plan-amt{font:800 clamp(34px,3.4vw,50px)/1 var(--font-heading);letter-spacing:-.035em;margin:10px 0 6px}
.v-plan .button,.v-plan .link{justify-self:start;margin-top:8px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-inline-start:26px}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--color-accent-text);border-bottom:2px solid var(--color-accent-text);transform:rotate(-45deg)}
.ticks-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 40px}
.v-included,.v-extras{position:relative;display:grid;gap:24px 64px;padding-block:clamp(48px,6vw,88px)}
.v-included::before,.v-extras::before{content:"";position:absolute;top:0;inset-inline:var(--layout-gutter);height:1px;background:var(--color-line)}
@media (min-width:900px){.v-included,.v-extras{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.v-included-b{display:grid;gap:22px;justify-items:start}
.v-extras-list dt{display:grid;gap:2px;font:600 17px/1.3 var(--font-body)}
.v-extras-list dt small{font:400 15px/1.4 var(--font-body);color:var(--color-muted)}
.v-extras-list dd{margin:0;font:500 15px/1.6 var(--font-mono)}

/* ─── home: offer and steps strips ─── */
.v-offer{padding-block:clamp(64px,8vw,120px) clamp(32px,4vw,56px)}
.v-offer-in{display:grid;gap:28px 56px;padding:clamp(24px,4vw,56px);border-radius:28px;background:var(--color-surface)}
@media (min-width:900px){.v-offer-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}}
.v-offer-a{display:grid;gap:12px}
.v-offer-amt{font:800 clamp(72px,11vw,168px)/.86 var(--font-heading);letter-spacing:-.055em;margin:6px 0 4px}
.v-offer-amt small{display:block;margin-bottom:8px;font:500 14px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.v-offer-b{display:grid;gap:18px}
.offer-talk{font-size:15px;color:var(--color-muted)}
.offer-talk .link{font-size:15px}
.v-how{padding-block:clamp(32px,4vw,56px) clamp(72px,9vw,128px)}
.v-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--color-line)}
.v-steps li{display:grid;gap:8px;align-content:start;padding-block:22px 0;padding-inline:0 22px}
.v-steps li + li{padding-inline-start:22px;border-inline-start:1px solid var(--color-line)}
.v-steps h3{font:700 19px/1.2 var(--font-heading);letter-spacing:-.012em;margin:0}
.v-steps p{font-size:15px;color:var(--color-muted)}
@media (max-width:899px){.v-steps{grid-template-columns:1fr}.v-steps li,.v-steps li + li{grid-template-columns:44px minmax(0,1fr);padding:18px 0;border-inline-start:0;border-bottom:1px solid var(--color-line)}.v-steps p{grid-column:2}}

/* ─── closing invitation: on the dark screen ground (ink; the deeper black in the dark theme), its one
   accent the red button (2026-10-23; it was a purple field) ─── */
.v-start{padding:clamp(56px,7vw,104px) 0;background:var(--screen);color:#fff}
.v-start .eyebrow{color:rgba(255,255,255,.78)}
.v-start-in{display:grid;gap:28px 56px}
@media (min-width:900px){.v-start-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end}}
.v-start .v-h2{max-width:16ch}
.v-start-line{margin-top:14px;font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.86);max-width:44ch}
.v-start .button{background:var(--color-accent-button);color:var(--color-on-accent)}
.v-start .button:hover{background:var(--color-accent-hover)}
.v-start .link,.v-start .start-email{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.v-start .start-email{font:500 14px/1.4 var(--font-mono)}
.v-start a:focus-visible{outline-color:#fff}
main + .frame .footer{border-top:0}


/* ─── scroll-in reveals: below the fold only, once; without JS everything is simply there ─── */
.rv-on .rv:not(.in){opacity:0;transform:translateY(24px)}
.rv{transition:opacity .9s var(--ease-brand),transform .9s var(--ease-brand);transition-delay:calc(var(--i,0) * 80ms)}

/* ─── page transitions: cross-document view transitions; the masthead holds still, the page
   under it lifts away and the next one rises in; a film's tile grows into its player ─── */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease-brand)}
::view-transition-old(root){animation:vt-out .26s var(--ease-in) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-brand) .08s both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(28px)}}
::view-transition-old(masthead),::view-transition-new(masthead){animation:none}
/* Browsers without them get a short entrance on each page instead. */
.no-vt main{animation:vt-in .5s var(--ease-brand) both}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .no-vt main,.v-rise{animation:none!important}
  .rv-on .rv:not(.in){opacity:1;transform:none}
  .mast-wrap{transition:none}
}

/* ─── founder pricing, 2026-10-13: two starting prices, "Let's talk" for bigger 3D work ─── */
.v-offer-also{font:700 clamp(20px,2vw,28px)/1.15 var(--font-heading);letter-spacing:-.02em}
.v-offer-note{margin:0;font-size:14px;color:var(--color-muted)}
.v-plans-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}
@media (max-width:899px){.v-plans-2{grid-template-columns:1fr}}
.v-plan-amt small{display:block;margin-bottom:6px;font:500 12.5px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.v-plan-talk{align-content:end;background:var(--color-surface);border-color:var(--color-line)}
.v-plan-talk p{color:var(--color-muted)}
.v-plan-talk .button{justify-self:start}
.v-needs{padding-block:clamp(48px,6vw,88px)}
.v-needs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:767px){.v-needs-grid{grid-template-columns:1fr}}
.v-needs-card{display:grid;gap:16px;align-content:start;padding:clamp(22px,2.6vw,32px);border:1px solid var(--color-line-strong);border-radius:22px}
.v-needs-card h3{font:700 22px/1.15 var(--font-heading);letter-spacing:-.015em;margin:0}
.v-plan-note{padding-top:12px;border-top:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);font-size:15px;color:var(--color-muted)}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   site v2 · phase 1b (2026-10-14): cut like a film, What we made, the delivery tree, Arabic
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Arabic: right to left, IBM Plex Sans Arabic (the Arabic member of the Plex family the site
   already uses for its labels), no tracking on Arabic, more air between lines ─── */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root[lang="ar"]{--font-heading:"IBM Plex Sans Arabic","Schibsted Grotesk",system-ui,sans-serif;--font-body:"IBM Plex Sans Arabic","Hanken Grotesk",system-ui,sans-serif;--font-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,Menlo,monospace}
[dir="rtl"]{--dir:-1}
:lang(ar),:lang(ar) *{letter-spacing:0!important}
:root[lang="ar"] body{line-height:1.7}
:root[lang="ar"] .v-h1{line-height:1.35;font-size:clamp(38px,5.4vw,84px)}
:root[lang="ar"] .v-h1-page{font-size:clamp(34px,4.8vw,72px)}
:root[lang="ar"] .v-h2,:root[lang="ar"] .h1,:root[lang="ar"] .h2{line-height:1.35}
/* Arabic headings (founder, 2026-10-24: the Arabic "feels muddled: the weight plus the tightness between
   words"): 600, not the Latin 800 (the Arabic face has 400, 600 and 700), and a little more space between
   words on display sizes. The prices stay as they are: they are Latin figures. A Latin word inside an
   Arabic line (Krowdee) is set in the Latin face, which the Arabic face's unicode-range leaves to it. */
:root[lang="ar"] :is(h1,h2,h3,h4,.h1,.h2,.v-h1,.v-h2,.hero-h1,.ab-h1):not(.v-offer-amt):not(.v-plan-amt){font-weight:600}
:root[lang="ar"] :is(h1,h2,.h1,.h2,.v-h1,.v-h2,.hero-h1,.ab-h1):not(.v-offer-amt):not(.v-plan-amt){word-spacing:.06em}
:root[lang="ar"] .v-offer-amt small,:root[lang="ar"] .eyebrow,:root[lang="ar"] .v-plan-len,:root[lang="ar"] .film-label{text-transform:none;font-family:var(--font-body);font-weight:600}
:root[lang="ar"] .eyebrow .sc{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500}
:root[lang="ar"] .mnav > a:not(.button),:root[lang="ar"] .menu-btn,:root[lang="ar"] .footer,:root[lang="ar"] .chip,:root[lang="ar"] .hero-note,:root[lang="ar"] .tile-meta,:root[lang="ar"] .tile-label,:root[lang="ar"] .screen-toggle{font-family:var(--font-body)}
[dir="rtl"] .v-h1 em::after{transform-origin:100% 50%}
[dir="rtl"] .tile-bar i{transform-origin:100% 50%}
[dir="rtl"] .arrow{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .wall-track{animation-name:wall-drift-rtl}
@keyframes wall-drift-rtl{to{transform:translateX(calc(50% + clamp(10px,1.2vw,16px) / 2))}}
.lang{display:inline-grid;place-items:center;min-width:44px;min-height:36px;padding:0 10px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);color:var(--color-text);font:600 14px/1 var(--font-body);text-decoration:none}
.lang:hover{border-color:var(--color-text)}
.lang:lang(ar){font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.lang-mob{min-height:44px}
.ext{display:inline-block;margin-inline-start:.3em;font-size:.85em}
[dir="rtl"] .ext{transform:scaleX(-1)}

/* ─── scene labels ─── */
.sc{font:500 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--color-accent-text)}
.sc-sep{margin-inline:.5em;color:var(--color-muted)}
.v-wall .sc-sep,.v-band .sc-sep,.v-stage .sc-sep{color:var(--screen-muted)}
.v-start .sc-sep{color:#fff}
.v-wall .sc,.v-band .sc,.v-stage .sc{color:var(--screen-accent)}
.v-start .sc{color:var(--screen-accent)}

/* ─── the corner slate: a tiny clapper that snaps on load, the timecode and scene ─── */
.slate{position:fixed;inset-inline-start:14px;bottom:14px;z-index:15;display:flex;align-items:center;gap:9px;padding:7px 12px 9px 9px;border:1px solid var(--color-line);border-radius:12px;background:color-mix(in srgb,var(--color-bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 11.5px/1 var(--font-mono);color:var(--color-muted);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--ease-out)}
.slate.is-in{opacity:1;transform:none}
.slate b{font-weight:500;color:var(--color-text)}
.slate-sep{margin:0 6px;color:var(--color-muted)}
.slate-name{margin-inline-start:8px;padding-inline-start:8px;border-inline-start:1px solid var(--color-line);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slate-bar{position:absolute;inset-inline:10px;bottom:4px;height:2px;border-radius:2px;background:var(--color-line);overflow:hidden}
.slate-bar i{display:block;height:100%;background:var(--color-accent-fill);transform:scaleX(0);transform-origin:0 50%}
.slate-clap{position:relative;display:block;width:18px;height:15px}
.slate-body{position:absolute;inset:4px 0 0 0;border-radius:2px;background:var(--color-text)}
.slate-arm{position:absolute;left:0;top:0;width:18px;height:4px;border-radius:1px;background:repeating-linear-gradient(-45deg,var(--color-text) 0 3px,var(--color-bg) 3px 6px);transform-origin:1px 3px;transform:rotate(-28deg)}
.slate.is-in .slate-arm{animation:clap .42s cubic-bezier(.6,0,.4,1) .35s both}
@keyframes clap{0%{transform:rotate(-28deg)}70%{transform:rotate(2deg)}85%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@media (max-width:767px){.slate{bottom:10px;inset-inline-start:10px;opacity:0}.slate.is-in.is-awake{opacity:1}.slate-name{display:none}}
/* Start's form fills a phone screen: the slate would sit over its fields while it scrolls */
@media (max-width:767px){[data-page="start"] .slate{display:none}}
@media (prefers-reduced-motion:reduce){.slate,.slate.is-in .slate-arm{transition:none;animation:none;transform:none}.slate-arm{transform:none}}


/* ─── the cuts: one per destination, all under 450 ms (view-transition types set by site.js) ─── */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
:active-view-transition-type(wipe)::view-transition-old(root){animation:cut-hold .42s linear both}
:active-view-transition-type(wipe)::view-transition-new(root){animation:cut-wipe .42s cubic-bezier(.7,0,.2,1) both}
:active-view-transition-type(wipe):active-view-transition-type(back)::view-transition-new(root){animation-name:cut-wipe-back}
[dir="rtl"]:active-view-transition-type(wipe)::view-transition-new(root){animation-name:cut-wipe-back}
[dir="rtl"]:active-view-transition-type(wipe):active-view-transition-type(back)::view-transition-new(root){animation-name:cut-wipe}
@keyframes cut-hold{to{opacity:1}}
@keyframes cut-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cut-wipe-back{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
:active-view-transition-type(iris)::view-transition-old(root){animation:cut-iris-out .44s ease-in both}
:active-view-transition-type(iris)::view-transition-new(root){animation:cut-iris .44s cubic-bezier(.65,0,.35,1) both}
@keyframes cut-iris{from{clip-path:circle(0% at var(--cut-x,50%) var(--cut-y,50%))}to{clip-path:circle(150% at var(--cut-x,50%) var(--cut-y,50%))}}
@keyframes cut-iris-out{to{filter:brightness(.6);transform:scale(.985)}}
:active-view-transition-type(whip)::view-transition-old(root){animation:cut-whip-out .3s cubic-bezier(.5,0,.75,0) both}
:active-view-transition-type(whip)::view-transition-new(root){animation:cut-whip-in .38s cubic-bezier(.16,1,.3,1) .04s both}
@keyframes cut-whip-out{to{transform:translateX(calc(-28% * var(--dir)));filter:blur(14px);opacity:0}}
@keyframes cut-whip-in{from{transform:translateX(calc(28% * var(--dir)));filter:blur(14px);opacity:0}}
:active-view-transition-type(whip):active-view-transition-type(back)::view-transition-old(root){animation-name:cut-whip-out-back}
:active-view-transition-type(whip):active-view-transition-type(back)::view-transition-new(root){animation-name:cut-whip-in-back}
@keyframes cut-whip-out-back{to{transform:translateX(calc(28% * var(--dir)));filter:blur(14px);opacity:0}}
@keyframes cut-whip-in-back{from{transform:translateX(calc(-28% * var(--dir)));filter:blur(14px);opacity:0}}
:active-view-transition-type(push)::view-transition-old(root){animation:cut-push-out .42s cubic-bezier(.7,0,.2,1) both}
:active-view-transition-type(push)::view-transition-new(root){animation:cut-push-in .42s cubic-bezier(.7,0,.2,1) both}
@keyframes cut-push-out{to{transform:translateY(-22%);opacity:.3}}
@keyframes cut-push-in{from{transform:translateY(100%)}}
:active-view-transition-type(dissolve)::view-transition-old(root){animation:cut-hold .36s linear both}
:active-view-transition-type(dissolve)::view-transition-new(root){animation:cut-fade .36s ease both}
@keyframes cut-fade{from{opacity:0}}
:active-view-transition-type(match)::view-transition-old(root){animation:cut-hold .3s linear both}
:active-view-transition-type(match)::view-transition-new(root){animation:cut-fade .3s ease .05s both}
:active-view-transition-type(match)::view-transition-group(*){animation-duration:.44s}

/* ─── What we made: cards built from the film itself ─── */
.v-made{padding-block:clamp(48px,6vw,88px) clamp(24px,3vw,40px)}
.made-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.made-grid > .made-film{grid-column:span 2}
.made-grid > .made-thumbs{grid-column:span 2}
@media (max-width:1023px){.made-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.made-grid > .made-film,.made-grid > .made-thumbs{grid-column:1/-1}}
@media (max-width:639px){.made-grid{grid-template-columns:1fr}}
.made{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(12px,1.4vw,16px);border:1px solid var(--color-line);border-radius:calc(var(--r-media) + 6px);background:var(--color-surface);min-width:0}
.made-head h3{font:700 18px/1.2 var(--font-heading);letter-spacing:-.012em;margin:0}
.made-head p{font-size:14.5px;color:var(--color-muted);margin-top:3px}
.made-screen{position:relative;display:block;overflow:hidden;border-radius:var(--r-media);background:var(--screen-2)}
.made-screen img,.made-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.made-screen video{opacity:0;transition:opacity .4s ease}
.made-screen.is-looping video{opacity:1}
.made-16x9{aspect-ratio:16/9}
.made-9x16{aspect-ratio:9/16;width:min(220px,62%);margin-inline:auto}
.made-strip{aspect-ratio:16/5}
.spec{position:relative;font:500 12px/1.4 var(--font-mono);color:var(--color-muted)}
.spec summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;list-style:none}
.spec summary::-webkit-details-marker{display:none}
.spec summary::before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font:600 10px/1 var(--font-body)}
.spec p{margin-top:4px;color:var(--color-text);font:400 12.5px/1.5 var(--font-mono)}
/* the social post */
.post{display:grid;gap:8px;padding:10px;border-radius:var(--r-media);background:var(--color-bg);border:1px solid var(--color-line)}
.post-bar{display:flex;gap:14px}
.post-bar i{width:20px;height:6px;border-radius:3px;background:var(--color-line-strong)}
.made-social.is-vertical .post{justify-items:center}
/* sound: four stems as loudness waves, a playhead, tap to solo */
.stems{display:grid;gap:6px}
.stem{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px;min-height:40px;padding:4px 10px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bg);color:var(--color-text);font:600 13px/1 var(--font-body);text-align:start;cursor:pointer;overflow:hidden}
.stem:hover{border-color:var(--color-line-strong)}
.stem[aria-pressed="true"]{border-color:var(--color-accent-fill);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent-fill) 24%,transparent)}
.stem .wave{width:100%;height:24px}
.wave rect{fill:var(--color-line-strong);transform-origin:center;transform-box:fill-box}
.stem[aria-pressed="true"] .wave rect{fill:var(--color-accent-fill);animation:wave-live .9s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -37ms)}
@keyframes wave-live{to{transform:scaleY(.55)}}
.stem-head{position:absolute;top:0;bottom:0;inset-inline-start:calc(96px + (100% - 106px) * var(--ph,0));width:1.5px;background:var(--color-accent-fill);opacity:0}
.is-sounding .stem-head{opacity:.9}
/* captions typing over the loop */
.cap-line{position:absolute;inset-inline:8%;bottom:8%;z-index:2;display:flex;justify-content:center;text-align:center}
.cap-line span{padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font:500 clamp(11px,1.1vw,14px)/1.35 var(--font-body)}
.cap-line span:empty{display:none}
/* thumbnails: four crops fanning out of one frame */
.crops{position:relative;display:grid;grid-template-columns:2fr 1.4fr 1fr .85fr;align-items:end;gap:10px;min-height:150px}
.crop{position:relative;display:block;aspect-ratio:var(--r);border-radius:8px;background-size:cover;background-position:center;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);transform:translateX(calc(var(--i) * -60% * var(--dir))) scale(.96);opacity:.0;transition:transform .7s var(--ease-brand),opacity .4s ease;transition-delay:calc(var(--i) * 70ms)}
.crop small{position:absolute;inset-inline-start:6px;bottom:6px;padding:2px 5px;border-radius:4px;background:#111111;color:#fff;font:500 10px/1.3 var(--font-mono)}
.crops.is-fanned .crop{transform:none;opacity:1}
.crop:first-child{opacity:1}
/* the hero loop on a tiny homepage */
.mock{border:1px solid var(--color-line-strong);border-radius:10px;overflow:hidden;background:var(--color-bg)}
.mock-bar{display:flex;align-items:center;gap:5px;padding:6px 8px;border-bottom:1px solid var(--color-line);font:500 10px/1 var(--font-mono);color:var(--color-muted)}
.mock-bar i{width:7px;height:7px;border-radius:50%;background:var(--color-line-strong)}
.mock-bar span{margin-inline-start:6px}
.mock-hero{position:relative}
.mock-hero .made-screen{border-radius:0}
.mock-nav{position:absolute;inset-inline:8px;top:7px;z-index:2;display:flex;align-items:center;gap:6px;color:#fff;font:700 10px/1 var(--font-heading)}
.mock-nav b{margin-inline-end:auto;padding:2px 5px;border-radius:4px;background:#111111}
.mock-nav i{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.8)}
.mock-h{position:absolute;inset-inline-start:8px;bottom:9px;z-index:2;display:grid;gap:4px;width:46%}
.mock-h i{height:7px;border-radius:3px;background:rgba(255,255,255,.92)}
.mock-h i + i{width:70%}
.mock-h em{width:36%;height:9px;border-radius:3px;background:var(--color-accent-fill)}
.mock-body{display:grid;gap:5px;padding:9px}
.mock-body i{height:5px;border-radius:3px;background:var(--color-line)}
.mock-body i:nth-child(2){width:80%}.mock-body i:nth-child(3){width:55%}
/* versions toggles */
.vers{display:flex;flex-wrap:wrap;gap:6px}
.ver{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--color-line-strong);border-radius:99px;background:var(--color-bg);color:var(--color-text);font:600 13px/1 var(--font-body);cursor:pointer}
.ver i{width:26px;height:14px;border-radius:99px;background:var(--color-line-strong);position:relative;transition:background .2s ease}
.ver i::after{content:"";position:absolute;inset-inline-start:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .25s var(--ease-out)}
.ver[aria-pressed="true"]{border-color:var(--color-accent-fill)}
.ver[aria-pressed="true"] i{background:var(--color-accent-fill)}
.ver[aria-pressed="true"] i::after{transform:translateX(calc(12px * var(--dir)))}
.made-readme pre{margin:0;padding:14px;border-radius:10px;background:var(--color-bg);border:1px solid var(--color-line);font:400 12px/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text)}
.v-stills-sec{padding-bottom:clamp(40px,5vw,72px)}
.v-film-aside{display:grid;gap:12px;justify-items:start}
.v-film-site{display:inline-flex;align-items:center;gap:2px;font:500 13px/1.4 var(--font-mono);color:var(--screen-text);text-decoration:underline;text-decoration-color:#5f5f5f;text-underline-offset:5px}
.v-film-site:hover{text-decoration-color:var(--screen-text)}

/* ─── the delivery tree: one folder, a tag dangling from it; pull and the folders spring out ─── */
.v-delivery{padding-block:clamp(64px,8vw,120px)}
.v-delivery > .v-lede{margin-bottom:clamp(20px,3vw,32px)}
.dtree{display:grid;gap:20px 40px}
@media (min-width:900px){.dtree{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}.dtree-preview{position:sticky;top:96px}}
.dtree-side{display:grid;gap:12px;align-content:start}
.dt-tree,.dt-tree ul{list-style:none;margin:0;padding:0}
.dt-tree [role="treeitem"]{position:relative;outline:none}
.dt-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;padding:8px 12px;border-radius:12px;cursor:pointer;transition:background .15s ease}
.dt-row:hover{background:var(--color-surface)}
[role="treeitem"]:focus-visible > .dt-row{outline:2px solid var(--color-accent-fill);outline-offset:1px}
[aria-selected="true"] > .dt-row{background:var(--color-accent-soft)}
.dt-root > .dt-row{padding:14px 16px;border:1px solid var(--color-line-strong);background:var(--color-bg);font-size:16px}
.dt-name{font:500 14px/1.3 var(--font-mono);color:var(--color-text)}
.dt-root > .dt-row .dt-name{font-size:15px;font-weight:500}
.dt-what{flex:1 1 220px;font-size:14px;color:var(--color-muted)}
.dt-ico{flex:none;display:inline-block;width:18px;height:14px;border-radius:3px;background:var(--color-accent-fill);position:relative}
.dt-folder::before{content:"";position:absolute;inset-inline-start:0;top:-3px;width:8px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.dt-file{width:12px;height:15px;border-radius:2px;background:var(--color-line-strong)}
.dt-group{margin-top:8px;padding-inline-start:18px;border-inline-start:1.5px dashed var(--color-line-strong);margin-inline-start:20px}
.dt-files{margin:2px 0 6px;padding-inline-start:30px}
.dt-files li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;padding:4px 8px;border-radius:8px;font:400 12.5px/1.5 var(--font-mono);color:var(--color-muted);overflow-wrap:anywhere}
.dt-files li small{font-size:11.5px}
.dt-files li > span[dir]{flex:1 1 auto;text-align:start;min-width:0}
.dtree-js [role="treeitem"][aria-expanded="false"] > ul{display:none}
.dtree-js.is-pulled .dt-group > li{animation:dt-spring .62s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes dt-spring{from{opacity:0;transform:translateY(-26px) scale(.96)}}
.dtree-js [aria-expanded="true"] > .dt-files li{animation:dt-spring .4s var(--ease-out) both}
.dt-cord{position:absolute;inset-inline-end:28px;top:100%;z-index:2;display:none;flex-direction:column;align-items:center;transform-origin:50% 0;cursor:grab;touch-action:none;animation:dt-sway 2.6s ease-in-out infinite}
.dtree-js .dt-cord{display:flex}
.dtree-js.is-open .dt-cord{display:none}
.dt-string{display:block;width:1.5px;height:calc(26px + var(--pull,0px));background:var(--color-line-strong)}
.dt-tag{display:block;padding:6px 10px;border-radius:6px 6px 10px 10px;background:var(--color-accent-button);color:#fff;font:600 12px/1 var(--font-body);white-space:nowrap;box-shadow:0 8px 16px -8px rgba(17,17,17,.4)}
.dt-cord.is-held{animation:none;cursor:grabbing}
@keyframes dt-sway{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
.dtree-js .dt-root{margin-bottom:56px}
.dtree-js.is-open .dt-root{margin-bottom:0}
.dtree-preview{display:grid;min-height:260px;padding:clamp(14px,2vw,22px);border:1px solid var(--color-line);border-radius:22px;background:var(--color-surface)}
.dt-panel{display:grid;gap:12px;align-content:start;animation:dt-panel .35s var(--ease-out) both}
.dt-panel[hidden]{display:none}
@keyframes dt-panel{from{opacity:0;transform:translateY(8px)}}
.dt-panel .made{border:0;padding:0;background:transparent}
.dt-explain{font:600 16px/1.45 var(--font-body);max-width:46ch}
.dt-panel[data-panel="idle"]{place-items:center;text-align:center;align-content:center;min-height:220px;color:var(--color-muted)}
.dt-idle-art{display:flex;gap:6px;margin-bottom:6px}
.dt-idle-art i{width:34px;height:26px;border-radius:5px;background:var(--color-line-strong);animation:dt-idle 1.8s ease-in-out infinite}
.dt-idle-art i:nth-child(2){animation-delay:.2s}.dt-idle-art i:nth-child(3){animation-delay:.4s}
@keyframes dt-idle{50%{transform:translateY(-5px);background:var(--color-accent-fill)}}
@media (prefers-reduced-motion:reduce){.dt-cord,.dt-idle-art i{animation:none}}

/* ─── Work: the clapper that shuffles the reel ─── */
.work-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:clamp(24px,3vw,36px)}
.work-tools .chips{margin:0}
.clapper-btn{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 12px;border:1px solid var(--color-line-strong);border-radius:99px;background:var(--color-bg);color:var(--color-text);font:600 14px/1 var(--font-body);cursor:pointer}
.clapper-btn:hover{border-color:var(--color-text)}
.clapper-btn[hidden]{display:none}
.clapper{position:relative;display:block;width:20px;height:17px}
.clapper-body{position:absolute;inset:5px 0 0;border-radius:2px;background:var(--color-text)}
.clapper-arm{position:absolute;left:0;top:0;width:20px;height:5px;border-radius:1px;background:repeating-linear-gradient(-45deg,var(--color-text) 0 3px,var(--color-bg) 3px 6px);transform-origin:1px 4px;transform:rotate(-22deg);transition:transform .2s ease}
.clapper-btn:hover .clapper-arm{transform:rotate(-32deg)}
.clapper-btn.is-clap .clapper-arm{animation:clap .38s cubic-bezier(.6,0,.4,1) both}

/* ─── Pricing: prices that roll like a frame counter ─── */
.count{display:inline-flex;align-items:flex-end;line-height:1;font-variant-numeric:tabular-nums}
.dg{display:inline-block;height:1.12em;overflow:hidden;margin-block:-.06em}
.dg-strip{display:flex;flex-direction:column;line-height:1.12;transform:translateY(calc(var(--d) * -1.12em));transition:transform 1.1s cubic-bezier(.2,.9,.25,1);transition-delay:calc(var(--i) * 90ms)}
.dg-strip i{display:block;height:1.12em;font-style:normal}
.is-zero .dg-strip{transform:translateY(0);transition:none}



/* ─── 404: a blooper ─── */
.nf{display:grid;gap:32px 64px;align-items:center;padding-block:clamp(48px,8vw,120px)}
@media (min-width:900px){.nf{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.nf-copy{display:grid;gap:18px}
.nf-art{position:relative;display:grid;place-items:center;min-height:300px}
.nf-slate{position:relative;display:block;width:min(320px,80vw)}
.nf-board{display:grid;gap:8px;padding:28px 22px 22px;border-radius:10px;background:var(--color-text);color:var(--color-bg)}
.nf-board b{font:800 76px/1 "Schibsted Grotesk",var(--font-heading);letter-spacing:-.04em}
.nf-board small{font:500 12px/1 var(--font-mono);letter-spacing:.08em}
.nf-arm{position:absolute;inset-inline:0;top:-20px;height:22px;border-radius:4px;background:repeating-linear-gradient(-45deg,var(--color-text) 0 14px,var(--color-bg) 14px 28px);border:2px solid var(--color-text);transform-origin:6px 18px;animation:nf-arm 2.4s cubic-bezier(.5,0,.5,1) .3s both}
@keyframes nf-arm{0%{transform:rotate(-30deg)}18%{transform:rotate(0)}26%{transform:rotate(-12deg)}34%{transform:rotate(0)}60%{transform:rotate(0) translateY(0)}78%{transform:rotate(38deg) translate(30px,40px);opacity:1}100%{transform:rotate(62deg) translate(70px,190px);opacity:0}}
.nf-reel{position:absolute;inset-inline-end:4%;bottom:6%;display:block;width:90px;height:90px}
.nf-spool{position:absolute;inset:0;border-radius:50%;border:10px solid var(--color-line-strong);animation:nf-spin 1.4s linear infinite}
.nf-spool::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--color-line-strong)}
.nf-strip{position:absolute;inset-inline-start:40px;top:70px;width:16px;height:120px;background:repeating-linear-gradient(to bottom,var(--color-text) 0 10px,transparent 10px 14px);border-inline:3px solid var(--color-text);transform-origin:top;animation:nf-slip 2.4s ease-in .8s both}
@keyframes nf-spin{to{transform:rotate(360deg)}}
@keyframes nf-slip{from{transform:scaleY(0)}to{transform:scaleY(1) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.nf-arm,.nf-spool,.nf-strip{animation:none}}

/* ─── Home: the full-bleed hero (2026-10-14). The film fills the width; the copy sits bottom-left
   (bottom-right in Arabic) over a dark scrim; the header floats over it until the page moves on. ─── */
@media (min-width:768px){html[data-page="home"] .mast-wrap{position:fixed;inset-inline:0;top:0}}
.mast-wrap.mast-over{background:linear-gradient(rgba(6,7,9,.66),rgba(6,7,9,0));-webkit-backdrop-filter:none;backdrop-filter:none}
.mast-over .masthead{border-bottom-color:transparent!important}
.mast-over .logo,.mast-over .mnav > a:not(.button),.mast-over .mnav > a:not(.button):hover,.mast-over .menu-btn,.mast-over .theme,.mast-over .lang{color:#fff}
.mast-over .theme,.mast-over .lang,.mast-over .menu-btn{border-color:rgba(255,255,255,.55);background:rgba(6,7,9,.25)}
.mast-over .mnav > a[aria-current="page"]{border-bottom-color:#fff}
.hero-full{position:relative;background:var(--screen);color:#fff}
.hero-stage{position:relative;margin:0;height:min(100vh,900px);min-height:540px;overflow:hidden;background:var(--screen)}
@supports (height:100svh){.hero-stage{height:min(100svh,900px)}}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-poster,.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage video{opacity:0;transition:opacity .6s ease}
.hero-stage.is-playing video{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
/* The scrim: dark across the copy's column and along the bottom, clear over the right half, so white copy holds
   >= 4.5:1 on every frame of the film (qa/v2-hero-contrast.py measures it). Arabic mirrors it. No backdrop blur
   over the film: a full-screen blur re-renders every video frame (in headless Chrome it cut rAF from 56 to 8 a second). */
.hero-scrim{--sx:90deg;background:linear-gradient(var(--sx),rgba(6,7,9,.9) 0%,rgba(6,7,9,.84) 34%,rgba(6,7,9,.68) 50%,rgba(6,7,9,.26) 64%,rgba(6,7,9,0) 76%),linear-gradient(0deg,rgba(6,7,9,.66),rgba(6,7,9,0) 45%),linear-gradient(180deg,rgba(6,7,9,.5),rgba(6,7,9,0) 22%)}
[dir="rtl"] .hero-scrim{--sx:270deg}
@media (min-width:768px) and (max-width:1100px){.hero-scrim{background:linear-gradient(var(--sx),rgba(6,7,9,.7) 0%,rgba(6,7,9,.5) 50%,rgba(6,7,9,0) 80%),linear-gradient(0deg,rgba(6,7,9,.9) 0%,rgba(6,7,9,.82) 42%,rgba(6,7,9,.45) 62%,rgba(6,7,9,0) 80%),linear-gradient(180deg,rgba(6,7,9,.5),rgba(6,7,9,0) 22%)}}
/* the note on the film: readable at a glance, in the corner under the header (top-left in Arabic) */
.hero-note{position:absolute;top:calc(var(--mast-h,80px) + 14px);inset-inline-end:clamp(14px,3vw,40px);z-index:2;max-width:calc(100% - 28px);padding:8px 15px;border:1px solid rgba(255,255,255,.26);border-radius:99px;background:rgba(6,7,9,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 15px/1.3 var(--font-body)}
.hero-copy{position:absolute;inset-inline:0;bottom:clamp(36px,8vh,104px);z-index:2;pointer-events:none}
.hero-copy .frame{pointer-events:none}
.hero-text{display:grid;gap:18px;max-width:min(48rem,50%);pointer-events:auto}
.hero-h1{color:#fff;font-size:clamp(44px,5.3vw,92px);max-width:13ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-h1 em{color:#fff}
.hero-h1 em::after{background:var(--brand)}
.hero-prices{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:500 clamp(16px,1.3vw,19px)/1.35 var(--font-body);color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hero-prices strong{color:#fff;font-weight:700}
.hero-3d,.hero-sw{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
.hero-3d:hover,.hero-sw:hover{text-decoration-color:currentColor}
.hero-sep{opacity:.6}
.hero-full .button-ghost{background:rgba(6,7,9,.32);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-full .button-ghost:hover{background:rgba(6,7,9,.5);box-shadow:inset 0 0 0 1.5px #fff}
.hero-full :focus-visible{outline-color:#fff}
:root[lang="ar"] .hero-h1{line-height:1.35;font-size:clamp(38px,4.6vw,80px)}
/* Balanced wrapping costs the Arabic home page about a second of style and layout under Lighthouse's mobile
   throttling (performance 81 to 86 with it, 96 without, 2026-10-14); Arabic headings wrap normally. */
:root[lang="ar"] .v-h1,:root[lang="ar"] .v-h2{text-wrap:wrap}
@media (min-width:768px) and (max-width:1100px){.hero-text{max-width:min(36rem,62%)}}
/* Phones: the film at the top at 16:9, whole, and the copy under it on the page colour (chosen over the
   film full screen with the copy on a fade: a 16:9 frame cropped to a phone keeps about a quarter of its
   width, and the fade could not hold 4.5:1 for the eyebrow and headline; qa/hero/phone-compare). */
@media (max-width:767px){
  /* the copy comes first in the page (headline and buttons before the film, for keyboards and screen
     readers); on a phone the film is shown above it */
  .hero-full{display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text)}
  .hero-full .hero-stage{order:-1}
  .hero-full .hero-stage{height:auto;min-height:0;overflow:visible}
  .hero-full .hero-media{position:relative;aspect-ratio:16/9}
  .hero-full .hero-scrim{display:none}
  .hero-full .hero-note{top:10px;inset-inline-end:10px;padding:6px 12px;font-size:13.5px}
  .hero-full .hero-copy{position:static;padding:22px 0 8px}
  .hero-full .hero-text{max-width:none}
  .hero-full .hero-h1{color:var(--color-text);text-shadow:none}
  .hero-full .hero-h1 em{color:var(--brand)}
  .hero-full .hero-h1 em::after{background:var(--color-accent-fill)}
  .hero-full .hero-prices{color:var(--color-muted);text-shadow:none}
  .hero-full .hero-prices strong{color:var(--color-text)}
  .hero-full .hero-3d,.hero-full .hero-sw{text-decoration-color:var(--color-line-strong)}
  .hero-full .button-ghost{background:transparent;color:var(--color-text);box-shadow:inset 0 0 0 1.5px var(--color-line-strong);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-full :focus-visible{outline-color:var(--color-accent-fill)}
}
@media (prefers-reduced-motion:reduce){.hero-stage video{display:none}}

/* ─── Start (founder, 2026-10-15): two columns on desktop, all of it on the first screen at 1366x768
   and 1440x900: the H1, its line and "Prefer email" on the left, the form card on the right. One
   column on a phone: H1, line, card, then the email line. The card is a calm surface a step off the
   page; the brand red marks only focus, the chosen segment and Send. ─── */
.st{display:grid;gap:24px;padding:clamp(24px,3.6vw,48px) 0 clamp(48px,7vw,96px)}
.st-head{display:grid;gap:10px;align-content:start}
.st-h1{margin:0}
.st-lede{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--color-muted)}
.st-prefer{margin:0;font-size:15px}
.st-prefer a{font-family:var(--font-mono)}
@media (min-width:1024px){
  .st{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"head card" "prefer card";column-gap:clamp(48px,6vw,104px);row-gap:24px}
  .st-head{grid-area:head;gap:20px}
  .st-h1{margin-top:-.08em;font-size:clamp(56px,5.6vw,88px)}
  .st-card{grid-area:card}
  .st-prefer{grid-area:prefer;align-self:end}
}

/* the card: the form, then the code step, then the sent state. Beside the H1 on desktop they share
   one cell, so the card keeps its size (the tallest of the three) as one takes the other's place; a
   hidden one stays laid out, unseen. */
.st-card{min-width:0;padding:clamp(20px,2.4vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.st-form{display:grid;gap:20px}
.st-card > [hidden]{display:none}
/* field and segment edges at 3:1 or more against the fields and the card, both themes (WCAG 1.4.11) */
.st-card{--color-line-strong:#8e8e8e}
[data-theme="dark"] .st-card{--color-line-strong:#767676}
@media (min-width:1024px){
  .st-card{display:grid}
  .st-card > *{grid-area:1/1;min-width:0}
  .st-card > [hidden]{display:grid;visibility:hidden}
  .st-done{align-self:center}
}
.st-card .fld textarea{min-height:0;resize:vertical}
.st-card .fset legend{padding-bottom:8px}

/* what they are looking for: three equal segments; one a row on a phone */
.st-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.st-seg-opt{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 10px;border:1px solid var(--color-line-strong);background:var(--color-bg);color:var(--color-text);font:500 15.5px/1.25 var(--font-body);text-align:center;cursor:pointer}
.st-seg-opt + .st-seg-opt{margin-inline-start:-1px}
.st-seg-opt:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}
.st-seg-opt:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}
.st-seg-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.st-seg-opt:hover{background:var(--color-surface)}
.st-seg-opt:has(input:checked){z-index:1;border-color:var(--color-accent-fill);box-shadow:inset 0 0 0 1px var(--color-accent-fill);background:var(--color-accent-soft)}
.st-seg-opt:has(input:focus-visible){z-index:2;outline:2px solid var(--color-accent-fill);outline-offset:2px}
/* the free film's language: two segments (free.mjs) */
.ff-seg2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:599px){
  .st-seg{grid-template-columns:1fr}
  .st-seg-opt{justify-content:flex-start;padding:8px 16px;text-align:start}
  .st-seg-opt + .st-seg-opt{margin-inline-start:0;margin-top:-1px}
  .st-seg-opt:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}
  .st-seg-opt:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}
}

/* the free film (free.mjs): who it is for, the week's count, the terms box */
.ff-who{margin:0;color:var(--color-muted)}
.ff-count{margin:0;font:600 17px/1.4 var(--font-body);color:var(--color-accent-text)}
.ff-count:empty{display:none}
.ff-agree{display:flex;align-items:flex-start;gap:10px;font-weight:400!important}
.ff-agree input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--color-accent-fill)}
.ff-notify{align-self:center}

/* Send across the card; Turnstile, when Cloudflare needs the visitor, on its own line above it */
.st-go{display:grid}
.st-captcha{min-width:0}
.st-captcha.is-shown{margin-bottom:12px}
.st-send{width:100%;min-height:54px;font-size:17px}
/* a short laptop screen (1366x768): a little tighter, so the card with both errors showing still ends
   above the corner slate, and Send stays on the screen when Turnstile asks for a click as well */
@media (min-width:1024px) and (max-height:820px){
  .st{padding-top:24px}
  .st-card{padding:24px 28px}
  .st-form{gap:16px}
}

/* sent: a short confirmation in the card's place */
.st-done{display:grid;gap:14px;align-content:start}
.st-done-h{max-width:none;font-size:clamp(26px,2.4vw,34px)}
.st-done-h:focus,.st-done-h:focus-visible{outline:none}
.st-done p:not(.eyebrow){margin:0;font-size:16px;line-height:1.5;color:var(--color-muted)}
.st-done p.st-done-lead{font:600 clamp(17px,1.5vw,19px)/1.45 var(--font-body);color:var(--color-text);text-wrap:pretty}
.st-done p.note{font-size:14.5px}
.st-done a{color:var(--color-text)}
.st-done strong{color:var(--color-text);overflow-wrap:anywhere}
.st:has(.st-done:not([hidden])) .st-prefer{visibility:hidden}

/* ─── About (founder, 2026-10-14): one statement set large, one line of facts, our films moving past ─── */
.ab{padding-top:clamp(40px,8vw,120px)}
.ab-head{display:grid;gap:clamp(22px,2.6vw,36px);padding-bottom:clamp(44px,6vw,96px)}
.ab-h1{margin:0;max-width:21ch;font:800 clamp(34px,5.4vw,86px)/1.02 var(--font-heading);letter-spacing:-.04em;text-wrap:balance}
.ab-coda{display:block;margin-top:.28em;color:var(--brand)}
:root[lang="ar"] .ab-h1{line-height:1.35;letter-spacing:0;text-wrap:wrap}
.ab-facts{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font:500 14.5px/1.5 var(--font-mono);color:var(--color-muted)}
:root[lang="ar"] .ab-facts{font-family:var(--font-body)}
.ab-facts a{color:var(--color-text);text-decoration-color:var(--color-line-strong);text-underline-offset:4px}
.ab-sep{opacity:.55}
.ab-strip{padding:clamp(28px,3.4vw,48px) 0}
.ab-strip .wall-foot{justify-content:flex-end}

/* ─── 3D product films (founder, 2026-10-14): the showcase film, its label, what we need, more work ─── */
.p3d-head{display:grid;gap:12px;padding-block:clamp(32px,6vw,80px) clamp(24px,3.4vw,44px)}
.p3d-h1{margin:0}
.p3d-price{margin:0;font:600 clamp(18px,1.7vw,22px)/1.4 var(--font-body)}
.p3d-stage{padding-block:clamp(20px,3vw,40px) clamp(32px,4.4vw,56px)}
.p3d-label{margin:14px 0 0;font:500 14px/1.45 var(--font-body);color:var(--screen-muted)}
.p3d-need,.p3d-more{display:grid;gap:14px;padding-top:clamp(40px,5.6vw,80px)}
.p3d-need-line{margin:0;max-width:40ch;font:700 clamp(24px,2.6vw,36px)/1.2 var(--font-heading);letter-spacing:-.02em}
.p3d-more{padding-bottom:clamp(48px,6vw,96px)}
.p3d-more .grid{margin-top:8px}
.psw-need{font:500 clamp(17px,1.5vw,20px)/1.45 var(--font-body)}
/* a film with a 9:16 cut plays it upright on phones */
@media (max-width:767px){.player-916 .player{aspect-ratio:9/16;width:min(100%,calc(72svh * 9 / 16));margin-inline:auto}}

/* ── Services (services.mjs): the offer on the left, the sample films beside it, then what we need and
   the length and the payment. On a phone: the offer, the films, what we need, the form. ── */
.sv{display:grid;gap:24px;padding:clamp(24px,3.6vw,48px) 0 clamp(48px,7vw,96px)}
.sv-head{display:grid;gap:16px;align-content:start}
.sv-head .eyebrow,.sv-h1,.sv-fence{margin:0}
.sv-need{display:grid;gap:10px;align-content:start}
.sv-need h2{margin:0}
@media (min-width:1024px){
  .sv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,104px)}
  .sv[data-services]{grid-template-areas:"head films" "need card";align-items:start;row-gap:clamp(32px,3.4vw,48px)}
  .sv-head{grid-area:head}.sv-films{grid-area:films}.sv-need{grid-area:need}.sv[data-services] .st-card{grid-area:card}
}
/* the sample films: one large in the film player, the others picked under it */
.sv-films{display:grid;gap:14px;min-width:0}
.sv-label{margin:0;font:500 14px/1.45 var(--font-body);color:var(--color-muted)}
.sv-picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sv-pick{display:grid;align-content:start;gap:8px;min-width:0;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--color-text);font:inherit;text-align:start;cursor:pointer}
.sv-pick img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-line);transition:box-shadow var(--dur-micro) ease,opacity var(--dur-micro) ease}
.sv-pick:hover img{opacity:.86}
.sv-pick[aria-pressed="true"] img{opacity:1;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent-fill)}
.sv-pick:focus-visible{outline:2px solid var(--color-accent-fill);outline-offset:6px}
.sv-pick-text{display:grid;gap:2px;min-width:0}
.sv-pick-text b{font:600 14.5px/1.3 var(--font-body)}
.sv-pick-text span{font-size:13.5px;line-height:1.35;color:var(--color-muted)}
.sv-pick[aria-pressed="true"] .sv-pick-text b{color:var(--color-accent-text)}
@media (max-width:599px){
  .sv-picks{grid-template-columns:1fr;gap:10px}
  .sv-pick{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px}
}
.sv-form{display:grid;gap:20px}
.sv-lengths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sv-len{position:relative;display:grid;align-content:center;gap:3px;min-height:64px;padding:12px 16px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:background var(--dur-micro) ease,border-color var(--dur-micro) ease}
.sv-len b{font:600 16px/1.25 var(--font-body)}
.sv-len span{font:500 15px/1.3 var(--font-mono);color:var(--color-muted)}
.sv-len input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.sv-len:hover{background:var(--color-surface)}
.sv-len:has(input:checked){border-color:var(--color-accent-fill);box-shadow:inset 0 0 0 1px var(--color-accent-fill);background:var(--color-accent-soft)}
.sv-len:has(input:checked) span{color:var(--color-accent-text)}
.sv-len:has(input:focus-visible){outline:2px solid var(--color-accent-fill);outline-offset:2px}
.sv-thanks{grid-template-columns:minmax(0,640px);justify-content:center}
.sv-thanks .st-card > div:not([hidden]){display:grid;gap:12px;align-content:start}
@media (min-width:1024px){.sv-thanks .st-card > div[hidden]{display:grid;gap:12px;align-content:start}}
.sv-thanks .st-card h1{margin:0}
.sv-thanks .st-card h1:focus{outline:none}
.sv-thanks .button{justify-self:start}
.fld input[type="file"]{min-height:0;padding:10px 0;border:0;background:none}

/* ─── A prospect's page, /for/<slug> (campaign, 2026-10-24): phone first, one column, filled by site.js ─── */
.mast-bare{display:flex;align-items:center}
.fp-preview{justify-self:start;margin:0;padding:4px 10px;border:1px solid var(--color-line-strong);border-radius:99px;font:500 12px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--color-muted)}
.fp{display:grid;gap:clamp(28px,4vw,48px);max-width:960px;margin-inline:auto;padding:clamp(24px,4vw,56px) 0 clamp(48px,7vw,96px)}
.fp > [hidden]{display:none}
.fp-page{display:grid;gap:clamp(24px,3.4vw,40px);min-width:0}
.fp-head{display:grid;gap:12px}
.fp-h1{margin:0;font-size:clamp(36px,5.2vw,72px);max-width:18ch}
.fp-intro{margin:0;max-width:60ch}
.fp-films{display:grid;gap:24px}
.fp-film{margin:0;display:grid;gap:8px;min-width:0}
.fp-film-tall{width:100%;max-width:420px;justify-self:center}
.fp-player{background:#000}
.fp-player video{object-fit:contain}
.fp-book-btn{width:100%;min-height:54px;font-size:17px}
.fp-book-btn[hidden]{display:none}
.fp-card{max-width:640px;grid-area:auto}
.fp-card-h{margin:0;font:700 clamp(22px,2vw,26px)/1.2 var(--font-heading);letter-spacing:-.02em}
.fp-load{display:grid;gap:16px}
.fp-sk{display:block;border-radius:var(--radius-md);background:var(--color-surface)}
.fp-sk-1{height:14px;width:30%}
.fp-sk-2{height:clamp(40px,6vw,72px);width:80%}
.fp-sk-film{aspect-ratio:16/9;border-radius:var(--radius-film)}
.fp-missing{display:grid;gap:20px;padding-block:clamp(24px,6vw,80px)}
.fp-missing .v-h2{max-width:28ch}
@media (min-width:600px){.fp-book-btn{width:auto;padding-inline:28px}}