/* =========================================================
   Adsage landing — design tokens mirrored from app.adsage.net
   ========================================================= */
:root{
  /* palette (identical to the app theme) */
  --background:#14141a;
  --foreground:#fff;
  --card:#1b1a22;
  --card-foreground:#fff;
  --primary:#5b6cff;
  --primary-foreground:#fff;
  --secondary:#252430;
  --muted:#1b1a22;
  --muted-foreground:#838383;
  --accent:#252430;
  --destructive:#ef4444;
  --border:#ffffff14;
  --input:#ffffff14;
  --ring:#5b6cff;
  --chip:#2a2935;
  --progress:#2ed47c;
  --chart-2:#8b5cf6;

  --radius:.625rem;
  --radius-sm:calc(var(--radius) * .6);
  --radius-md:calc(var(--radius) * .8);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) * 1.4);
  --radius-2xl:calc(var(--radius) * 1.8);
  --radius-3xl:calc(var(--radius) * 2.6);

  --font-sans:"Geist","Geist Fallback",system-ui,sans-serif;
  --font-body:"Inter","Inter Fallback",system-ui,sans-serif;

  --shell:1200px;
  --shell-narrow:820px;
  --header-h:72px;

  --gradient:linear-gradient(135deg,var(--primary),var(--chart-2));

  /* ---- semantic layer, so a light theme is a matter of overriding tokens ----
     Everything below used to be a literal hex scattered through the file. The
     names describe the role, not the colour, which is what makes a second
     theme possible at all. */
  --surface-1:#191922;          /* cards on the page background            */
  --surface-2:#1f1f29;          /* the same, hovered                       */
  --surface-3:#1e1e28;          /* bands that lift off the background      */
  --surface-4:#22222e;          /* band gradient, top                      */
  --surface-5:#1c1c26;          /* band gradient, bottom                   */
  --footer-bg:#131319;

  --text-soft:#c9c9d1;          /* body copy that is not muted             */
  --text-strong:#e4e4ec;        /* emphasis inside quiet text              */
  --text-dim:#6f6f7a;           /* eyebrows                                */

  --accent-soft:#c3c9ff;        /* numbers in circles, links on tint       */
  --accent-mid:#9aa5ff;         /* footer headings, heart, rules           */
  --accent-icon:#8b95ff;        /* card icons                              */

  /* tint overlays — white on a dark theme, black on a light one */
  --ov-1:#ffffff08;
  --ov-2:#ffffff0d;
  --ov-3:#ffffff0f;
  --ov-4:#ffffff1f;
  --ov-5:#ffffff26;
  --ov-6:#ffffff2e;
  --ov-7:#ffffff33;
  --ov-8:#ffffff38;

  --shadow-strong:#000;
  --shadow-soft:#000c;

  --scroll-thumb:#33323f;
  --scroll-thumb-hover:#43424f;

  color-scheme:dark;
}

/* ============================ light theme ============================
   Same structure, different tokens. Only the values change — no rule below
   this point knows which theme is active. */
:root[data-theme="light"]{
  --background:#f7f7fb;
  --foreground:#14141a;
  --card:#ffffff;
  --card-foreground:#14141a;
  --primary:#4c5bf0;
  --secondary:#ececf3;
  --muted:#f1f1f6;
  --muted-foreground:#6a6a76;
  --accent:#ececf3;
  --border:#14141a14;
  --input:#14141a14;
  --chip:#eceef6;

  /* client logos are forced to a flat colour so a mixed bag of brand files reads
     as one row; on a light background that colour has to be black, not white */
  --logo-invert:0;
  --logo-opacity:.62;

  --surface-1:#ffffff;
  --surface-2:#f4f4f9;
  --surface-3:#f0f0f6;
  --surface-4:#f1f1f7;
  --surface-5:#e9e9f1;
  --footer-bg:#f1f1f6;

  --text-soft:#3c3c47;
  --text-strong:#14141a;
  --text-dim:#8a8a95;

  --accent-soft:#3b47c9;
  --accent-mid:#4450d8;
  --accent-icon:#4c5bf0;

  --ov-1:#14141a06;
  --ov-2:#14141a0a;
  --ov-3:#14141a0f;
  --ov-4:#14141a14;
  --ov-5:#14141a1f;
  --ov-6:#14141a26;
  --ov-7:#14141a2e;
  --ov-8:#14141a38;

  --shadow-strong:#8a8aa033;
  --shadow-soft:#8a8aa029;

  --scroll-thumb:#c9c9d6;
  --scroll-thumb-hover:#b4b4c4;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{background-color:var(--background);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* the fixed header no longer takes up space, so the page owes it that height */
  padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px));
  /* No overflow property here on purpose. Any value other than visible makes
     <body> a clipping context, and Safari then treats it as the containing
     block for position:fixed children — the header stopped being pinned to the
     window and scrolled with the page, which is what let content ride up into
     the status bar. Only one element actually bled sideways (the decorative
     network behind the About block) and it is clipped where it lives instead. */
}
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
button{font:inherit;color:inherit}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Whatever the browser decides about edge-to-edge, this paints the strip behind
   the status bar solid. Zero height when the inset is zero, so it costs nothing
   on desktop. */
body::before{
  content:"";
  position:fixed;left:0;right:0;top:0;
  height:env(safe-area-inset-top,0px);
  background:#5b6cff; /* brand strip under the status bar, same as theme-color */
  z-index:200;
  pointer-events:none;
}

/* A little film grain over everything. CSS gradients are perfectly smooth, and
   that smoothness is exactly what reads as machine-made.
   It starts BELOW the header on purpose. Safari 26 on iPhone draws the page
   under the clock / island / battery and tints that strip with the colour of
   the fixed bar touching the top edge. A full-screen fixed overlay at the top
   edge is what it found instead, and a transparent noise image has no colour,
   so Safari fell back to showing the scrolling text up there. The header is
   solid, so leaving the grain off it changes nothing visible. */
body::after{
  content:"";
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  top:calc(var(--header-h) + env(safe-area-inset-top,0px));
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------------------------------- scrollbars ---------------------------------- */
:root{color-scheme:dark}

/* Firefox */
html,.modal-body,.nav-mobile{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}

/* WebKit / Blink */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border:3px solid var(--background);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-corner{background:transparent}

.modal-body::-webkit-scrollbar-thumb{border-color:var(--card)}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}

/* ---------------------------------- layout ---------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:20px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.shell-narrow{max-width:var(--shell-narrow)}

.section{padding-block:clamp(44px,4.6vw,76px)}
.section-tight{padding-block:clamp(40px,4vw,60px)}

.section-head{margin-bottom:clamp(32px,4vw,56px);max-width:720px}
.section-head-center{margin-inline:auto;text-align:center}

/* ---------------------------------- type ---------------------------------- */
.h2,.h3,.hero-title,h1,h4{font-family:var(--font-sans);margin:0;letter-spacing:-.02em}

.hero-title{
  font-size:clamp(2.25rem,5.4vw,4rem);
  line-height:1.05;
  font-weight:600;
  letter-spacing:-.035em;
}
.h2{font-size:clamp(1.9rem,3.9vw,3.25rem);line-height:1.08;font-weight:600}
.h3{font-size:1.125rem;line-height:1.35;font-weight:600}

.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:16px;
}
.section-head-center .eyebrow{margin-bottom:12px}

.lede{font-size:clamp(1rem,1.5vw,1.1875rem);color:var(--text-soft);max-width:34em;margin-top:20px}
.sub{color:var(--muted-foreground);margin-top:14px;font-size:1.0625rem}

.grad{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------------------------------- icons ---------------------------------- */
.ico{width:24px;height:24px;flex:none;overflow:visible}
.ico-sm{width:18px;height:18px}

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding-inline:18px;
  border:1px solid transparent;border-radius:var(--radius-lg);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;
  white-space:nowrap;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-lg{height:50px;padding-inline:26px;font-size:1rem}
.btn .ico{width:18px;height:18px}

.btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:0 8px 24px -12px var(--primary)}
.btn-primary:hover{background:color-mix(in oklab,var(--primary) 88%,var(--foreground));box-shadow:0 12px 30px -12px var(--primary)}

.btn-outline{background:transparent;border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--secondary);border-color:var(--ov-5)}

.btn-ghost{background:transparent;color:var(--muted-foreground)}
.btn-ghost:hover{background:var(--secondary);color:var(--foreground)}

.icon-btn{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-lg);
  cursor:pointer;transition:background-color .18s ease;
}
.icon-btn:hover{background:var(--secondary)}

/* theme toggle — same 42px box as the burger and the language pill */
.theme-toggle{display:inline-flex;color:var(--muted-foreground)}
.theme-toggle:hover{color:var(--foreground)}
.theme-toggle .ico{width:19px;height:19px}
/* show the icon of the theme you would switch TO, which is the convention
   people already expect from this control */
.ico-moon{display:none}
:root[data-theme="light"] .ico-sun{display:none}
:root[data-theme="light"] .ico-moon{display:block}

/* ---------------------------------- header ---------------------------------- */
/* fixed, not sticky. Sticky depends on which element the browser treats as the
   scroll container, and on iOS that decision has bitten us three times: the bar
   detaches and the page runs up into the status bar. A fixed bar is pinned to
   the viewport no matter what, and ::before paints a solid block above it, so
   even if the page is drawn under the clock and the island there is nothing
   there but background. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* Opaque enough that scrolling text never reads through it, and padded for the
     safe area in case the page is ever served edge-to-edge again. */
  background:var(--background);
  padding-top:env(safe-area-inset-top,0px);
  /* a shadow, not a border: a border would add 1px to the bar's height and the
     page's top padding would no longer match it exactly */
  box-shadow:0 0 0 0 transparent;
  isolation:isolate;
  transition:box-shadow .2s ease,background-color .2s ease;
}

/* No backdrop-filter here on purpose. On iOS Safari the blur layer of a sticky
   element paints past its own box while the page scrolls, and the sampled
   content shows up in the status bar around the clock and the Dynamic Island.
   A solid bar costs nothing visually and cannot leak. */
.site-header.is-stuck{box-shadow:0 1px 0 0 var(--border)}

/* the solid block above the bar */
.site-header::before{
  content:"";
  position:absolute;left:0;right:0;bottom:100%;
  height:200px;
  background:var(--background);
  pointer-events:none;
}

.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}

.brand{display:flex;align-items:center;flex:none}
/* two files, one shown at a time: the wordmark is white and would vanish on a
   light background, and a CSS filter would eat the coloured dot in it */
.brand-logo{width:auto;height:36px}
.brand-logo-dark{display:none}
:root[data-theme="light"] .brand-logo-light{display:none}
:root[data-theme="light"] .brand-logo-dark{display:block}

/* The Russian menu needs about 1250px and the column gives 1160, so the row is
   trimmed rather than allowed to spill past the grid. */
.nav-desktop{display:flex;align-items:center;gap:0;margin-left:4px}


.nav-desktop a{
  padding:8px 8px;border-radius:var(--radius-md);
  font-size:.9375rem;color:var(--muted-foreground);
  /* a two-word item like "How it works" broke across lines and made the bar
     taller than the items next to it */
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease;
}
.nav-desktop a:hover{color:var(--foreground);background:var(--ov-2)}

/* "For creators" addresses the other side of the marketplace, so it is set
   apart from the section links — by colour alone, with no chrome around it. */
.nav-desktop a.nav-highlight,
.nav-mobile a.nav-highlight{color:var(--accent-mid);font-weight:500}
.nav-desktop a.nav-highlight:hover,
.nav-mobile a.nav-highlight:hover{color:var(--foreground);background:var(--ov-2)}

.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}

/* language switcher */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:42px;padding-inline:10px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-lg);
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  cursor:pointer;transition:background-color .18s ease;
}
.lang-btn:hover{background:var(--secondary)}
.lang-btn .ico{width:18px;height:18px;color:var(--muted-foreground)}
.lang-caret{transition:transform .18s ease}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}

.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:110;
  min-width:172px;padding:6px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:0 24px 60px -20px var(--shadow-soft);
}
.lang-menu li{display:block}
.lang-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:var(--radius-md);
  background:transparent;font-size:.9375rem;text-align:left;cursor:pointer;
  transition:background-color .15s ease;
}
/* Hovering a language you are about to switch to gets the brand colour, so the
   pointer target is unmistakable; the language you are already on keeps the
   quiet neutral fill, because it is a state, not an action. */
.lang-menu button:hover,
.lang-menu button:focus-visible{
  background:var(--primary);
  color:#fff;
}
.lang-menu button:hover .lang-code,
.lang-menu button:focus-visible .lang-code{color:#ffffffc7}
.lang-menu button[aria-selected="true"]{background:var(--accent)}
.lang-menu .lang-code{font-size:.75rem;letter-spacing:.06em;color:var(--muted-foreground);transition:color .15s ease}

/* mobile nav */
.nav-mobile{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);
  background:var(--background);
}
.nav-mobile[hidden]{display:none}
.nav-mobile a{padding:13px 8px;border-radius:var(--radius-md);font-size:1.0625rem}
.nav-mobile a:hover{background:var(--secondary)}
.nav-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.nav-mobile-actions .btn{width:100%}
.nav-mobile-actions .btn-ghost{border-color:var(--border);border-style:solid}

/* ---------------------------------- hero ---------------------------------- */
.hero{position:relative;padding-block:clamp(52px,6vw,92px) clamp(52px,6vw,92px);overflow:hidden}
.hero-glow{
  position:absolute;inset:-20% -10% auto -10%;height:640px;pointer-events:none;
  background:
    radial-gradient(46% 52% at 22% 30%,color-mix(in oklab,var(--primary) 26%,transparent),transparent 70%),
    radial-gradient(40% 46% at 78% 18%,color-mix(in oklab,var(--chart-2) 20%,transparent),transparent 70%);
  filter:blur(20px);
}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:center}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* All four in one row. Explicit columns rather than wrapping, so they can never
   fall into a ragged 3+1. */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  /* the row gap here sits between a figure and its own label, so it stays tight;
     the 20px it had came from the earlier two-row layout */
  gap:4px 18px;
  margin:44px 0 0;padding-top:28px;
  border-top:1px solid var(--border);
}
.hero-stats dt{text-wrap:balance}
/* Rows, not stacks: the figures share one baseline and the labels share another,
   so a label that runs to two lines cannot lift its own number out of line. */
.hero-stats{grid-auto-rows:auto}
.hero-stats div{display:contents}
.hero-stats dd{grid-row:1}
.hero-stats dt{grid-row:2}
.hero-stats dt{font-size:.8125rem;color:var(--muted-foreground);align-self:start}
.hero-stats dd{margin:0;align-self:end;font-family:var(--font-sans);font-size:1.625rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* signature: stack of native video clips */
.hero-stack{position:relative;height:clamp(400px,46vw,520px)}

.clip:has(a.clip-link){transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.clip:has(a.clip-link):hover{transform:translateY(-4px)}

.clip{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius-3xl);
  border:1px solid var(--border);
  background:var(--card);
  overflow:hidden;
  isolation:isolate;
}
.clip-media{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  background:
    radial-gradient(120% 80% at 20% 10%,var(--ov-4),transparent 60%),
    linear-gradient(160deg,#2a2935,var(--card) 55%,#171620);
}
/* Photos are the only bright thing on a dark page, so they sit dimmed until
   the pointer arrives. */
.clip img.clip-media,
.clip video.clip-media{
  filter:brightness(.62) saturate(.9);
  transition:filter .3s ease;
}
.clip:hover img.clip-media,
.clip:hover video.clip-media,
.clip:focus-within img.clip-media,
.clip:focus-within video.clip-media{
  filter:brightness(1) saturate(1);
}

/* Scrim lives on .clip-link, which is always present and is a real element,
   so it works over a gradient, an image and a video alike. */
.clip-link::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0b0b1059 0%,transparent 30%,transparent 50%,#0b0b10d9 100%);
}
.clip-link{position:absolute;inset:0;z-index:3;display:block;color:inherit;text-decoration:none}

.clip-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:var(--radius-md);
  background:#0b0b1099;border:1px solid var(--border);
  color:#fff;
}
@supports (backdrop-filter:blur(1px)){.clip-badge{backdrop-filter:blur(8px)}}

.clip-foot{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.8125rem;
}
.clip-handle{color:#e6e6ec;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-views{
  flex:none;padding:3px 8px;border-radius:999px;
  background:#0b0b10a6;border:1px solid var(--border);
  color:#fff;font-variant-numeric:tabular-nums;font-size:.75rem;
}

.hero-stack .clip{position:absolute;width:52%;box-shadow:0 40px 80px -30px var(--shadow-strong)}
.hero-stack .clip-a{left:0;top:8%;transform:rotate(-7deg) scale(.86);z-index:1;opacity:.85}
.hero-stack .clip-b{left:24%;top:0;z-index:3}
.hero-stack .clip-c{right:0;top:12%;transform:rotate(7deg) scale(.86);z-index:2;opacity:.85}

.clip-pill{
  position:absolute;left:50%;top:100%;margin-top:12px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);
  font-family:var(--font-sans);font-size:.8125rem;font-weight:500;
  box-shadow:0 20px 50px -20px var(--shadow-strong);
}
.clip-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--progress);box-shadow:0 0 0 4px color-mix(in oklab,var(--progress) 22%,transparent)}

@media (prefers-reduced-motion:no-preference){
  .hero-stack .clip{animation:float 7s ease-in-out infinite}
  .hero-stack .clip-b{animation-delay:-2.4s}
  .hero-stack .clip-c{animation-delay:-4.6s}
  .clip-pill .dot{animation:pulse 2s ease-in-out infinite}
}
@keyframes float{
  0%,100%{translate:0 0}
  50%{translate:0 -14px}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in oklab,var(--progress) 22%,transparent)}
  50%{box-shadow:0 0 0 8px color-mix(in oklab,var(--progress) 6%,transparent)}
}

/* ---------------------------------- about ---------------------------------- */
/* No panel, no border, no card. An asymmetric type spread with a network of
   connections behind it — the thing the mission text is actually about. */
/* the only thing on the page that reaches past the viewport, so it is clipped
   here rather than by a blanket overflow rule on <body> */
#about{overflow-x:clip}
@supports not (overflow:clip){
  #about{overflow-x:hidden}
}

.about-intro{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  grid-template-areas:
    "eyebrow ."
    "claim   side";
  column-gap:clamp(32px,5vw,80px);
  /* The side column carries mission plus the team note now — top-aligned with
     the claim, so the two columns start on one line instead of the right one
     hanging low. */
  align-items:start;
  padding-block:clamp(28px,4vw,64px) clamp(40px,5vw,76px);
}
.about-intro .eyebrow{grid-area:eyebrow;margin-bottom:20px}

.about-claim{
  grid-area:claim;
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(1.8rem,3.8vw,3.15rem);
  line-height:1.14;
  font-weight:500;
  letter-spacing:-.03em;
  max-width:19ch;
}
/* The team line sits under the mission, quieter than it: experience is proof,
   not the headline. */
.about-team{
  margin:20px 0 0;
  font-size:.9375rem;line-height:1.6;
  color:var(--muted-foreground);
  max-width:46ch;
}
.about-team strong{
  display:block;
  font-family:var(--font-sans);font-weight:600;font-size:1rem;
  color:var(--accent-soft);margin-bottom:4px;
}

.about-side{grid-area:side;padding-top:10px}

.about-mission{
  margin:0;
  position:relative;
  padding-top:22px;
  color:var(--muted-foreground);
  font-size:1rem;
  line-height:1.65;
  max-width:46ch;
}
/* a rule, not a frame */
.about-mission::before{
  content:"";
  position:absolute;left:0;top:0;width:52px;height:2px;border-radius:2px;
  background:var(--accent-mid);
}

.about-web{
  position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;translate:-50% -50%;
  width:min(1320px,124%);height:118%;
  overflow:visible;
  -webkit-mask-image:radial-gradient(72% 78% at 62% 45%,#000 0%,transparent 78%);
  mask-image:radial-gradient(72% 78% at 62% 45%,#000 0%,transparent 78%);
}
.about-web-lines{stroke:color-mix(in oklab,var(--primary) 42%,transparent);stroke-width:1;fill:none}
.about-web-dots{fill:color-mix(in oklab,var(--primary) 62%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .about-web-dots circle{animation:node 6s ease-in-out infinite}
  .about-web-dots circle:nth-child(3n){animation-delay:-2s}
  .about-web-dots circle:nth-child(3n+1){animation-delay:-4s}
}
@keyframes node{0%,100%{opacity:.55}50%{opacity:1}}

@media (max-width:900px){
  .about-intro{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "claim" "side";
    /* 16px matches the eyebrow-to-heading gap every other section uses; the row
       gap alone was making this one look loose. The side column gets its own
       margin so the two blocks stay apart. */
    row-gap:16px;
  }
  /* the grid row-gap already separates them; the eyebrow's own margin doubled it */
  .about-intro .eyebrow{margin-bottom:0}
  .about-claim{max-width:none}
  .about-side{padding-top:0;margin-top:10px}
  .about-mission{padding-top:20px;max-width:none}
  .about-team{max-width:none}
}

/* ---------------------------------- brand marquee ---------------------------------- */
.marquee{
  display:flex;gap:0;overflow:hidden;margin-top:8px;padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:clamp(32px,6vw,72px);
  padding-right:clamp(32px,6vw,72px);
  flex:none;
}
.marquee-track li{
  font-family:var(--font-sans);font-size:clamp(1.125rem,2vw,1.5rem);
  font-weight:600;letter-spacing:-.02em;
  color:var(--ov-8);white-space:nowrap;
  transition:color .2s ease;
}
.marquee-track li:hover{color:var(--muted-foreground)}

/* Client logos: drop an <img> inside the <li>. The filter forces any logo —
   colour, black, raster or vector — to flat white, so a mixed bag of brand
   files still reads as one row on the dark background. */
/* Every logo gets the same slot, and is fitted inside it. A fixed height alone
   does not work: a one-line wordmark spreads sideways while a stacked lockup
   splits that height across three tiers and reads as tiny. */
.marquee-track li:has(img){
  display:grid;place-items:center;
  width:clamp(104px,11vw,152px);
  height:clamp(40px,4.4vw,58px);
}
.marquee-track li img{
  /* fill the slot and let object-fit do the fitting — a percentage max-height
     does not resolve on a replaced element inside a grid cell, which let square
     logos blow past the slot */
  width:100%;
  height:100%;
  /* a grid item's automatic minimum size is its intrinsic size, which would
     override height:100% and let big files escape the slot */
  min-width:0;
  min-height:0;
  object-fit:contain;
  display:block;
  /* per-logo nudge, set from the $clients array */
  transform:scale(var(--logo-scale,1));
  filter:brightness(0) invert(var(--logo-invert,1));
  opacity:var(--logo-opacity,.55);
  transition:opacity .2s ease;
}
.marquee-track li:hover img{opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:scroll 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes scroll{from{translate:0 0}to{translate:-100% 0}}

/* ---------------------------------- cards ---------------------------------- */
.card{
  position:relative;
  padding:26px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--ov-5);background:var(--surface-2)}
.card p{color:var(--muted-foreground);margin-top:10px;font-size:.9375rem}

/* Plain glyph, no tinted square. The same 44px box repeated a dozen times was
   the single most template-looking thing on the page. */
.card-ico{display:block;margin-bottom:18px;color:var(--accent-icon)}
.card-ico-lg{margin-bottom:0}
.ico-lg{width:30px;height:30px}

/* No cards. 1px gaps over a border-coloured background draw the hairlines, and
   they follow any cell span automatically. The first item runs 2x2 so the block
   has a focal point instead of six equal boxes. */
.grid-adv{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border-block:1px solid var(--border);
}
.card-adv{
  background:var(--background);
  padding:clamp(24px,2.4vw,38px) clamp(20px,2vw,32px);
  transition:background-color .22s ease;
}
.card-adv:hover{background:var(--surface-1)}
.card-adv .h3{font-size:1.0625rem}
.card-adv p{color:var(--muted-foreground);margin-top:10px;font-size:.9375rem;line-height:1.6}

/* Seven cards: the closing one still runs full width, the rest are single
   cells. 6 + 3 = 9 tiles over three columns, which fills exactly three rows.
   Widening the first one again would push the count to ten and leave a hole. */
.card-adv:first-child{grid-column:auto}

/* Last cell runs the full width and lays out sideways, so the closing row is a
   band rather than another column of text. */
.card-adv:last-child{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  column-gap:clamp(24px,4vw,64px);
  align-items:center;
}
.card-adv:last-child .card-ico{grid-column:1;grid-row:1;margin-bottom:16px}
.card-adv:last-child .h3{grid-column:1;grid-row:2;font-size:1.25rem}
.card-adv:last-child p{grid-column:2;grid-row:1 / span 2;margin-top:0;font-size:1rem}

/* ---------------------------------- steps / tabs ---------------------------------- */
.tabs{margin-bottom:24px}
.tablist{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:28px;
  background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-xl);
}
.section-head-center + .tabs .tablist{display:flex;width:max-content;margin-inline:auto}
.tab{
  padding:10px 20px;border:0;border-radius:var(--radius-md);
  background:transparent;color:var(--muted-foreground);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;
  white-space:nowrap;                 /* never let a label break across lines */
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.tab:hover{color:var(--foreground);background:var(--ov-2)}
.tab[aria-selected="true"],
.tab[aria-selected="true"]:hover{
  background:var(--gradient);
  color:#fff;
  box-shadow:0 8px 20px -10px var(--primary);
}

.tabpanel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .tabpanel:not([hidden]) .card-step{animation:rise .38s cubic-bezier(.22,.61,.36,1) backwards}
  .tabpanel:not([hidden]) .card-step:nth-child(2){animation-delay:.07s}
  .tabpanel:not([hidden]) .card-step:nth-child(3){animation-delay:.14s}
}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card-step{padding-top:26px}
.step-n{
  position:absolute;top:22px;right:24px;
  font-family:var(--font-sans);font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;color:var(--ov-6);font-variant-numeric:tabular-nums;
}

/* moderation panel */
/* Its own band across the full width: moderation covers the whole flow, not the
   three steps above it, and a band says that far better than more spacing. */
.flow-band{
  margin-top:clamp(44px,5vw,80px);
  padding-block:clamp(44px,5vw,80px);
  /* var(--surface-1) differed from the page by six points per channel and vanished under
     the grain. This tone plus brighter rules is a separation you can see. */
  background:linear-gradient(180deg,var(--surface-4),var(--surface-5));
  border-block:1px solid var(--ov-4);
  box-shadow:inset 0 1px 0 var(--ov-3);
}

.panel-flow{
  margin-top:0;padding:0;
  background:none;border:0;border-radius:0;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,4vw,60px);
  align-items:start;
}
.flow-head{display:block}
.flow-head .card-ico{margin-bottom:18px}
.flow-head .sub{margin-top:8px;font-size:.9375rem}
/* These are ordered steps, not a feature list — ticks in two columns hid both
   the sequence and the fact that one thing follows another. A single numbered
   track reads in one direction and cannot be misread. */
.flow-list{counter-reset:flow;list-style:none;position:relative}

/* One continuous rail behind the whole track. Drawn on the list rather than
   between items: with short one-line steps the gaps were only 8px, which read
   as stray ticks instead of a thread. */
.flow-list::before{
  content:"";
  position:absolute;left:15.5px;top:18px;bottom:18px;width:1px;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--primary) 60%,transparent),
    color-mix(in oklab,var(--primary) 14%,transparent));
}
.flow-list li{
  position:relative;
  counter-increment:flow;
  padding-left:52px;
  padding-bottom:20px;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--text-soft);
}
.flow-list li:last-child{padding-bottom:0}

.flow-list li::before{
  content:counter(flow,decimal-leading-zero);
  position:absolute;left:0;top:-1px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:50%;
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--accent-soft);
  background:color-mix(in oklab,var(--primary) 16%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 32%,transparent);
}


/* ------------------------- what gets made (inside advantages) ------------------------- */
/* Not its own section any more: the formats belong to the advantages story, so
   they sit under the grid as a sub-block rather than a separate band. */
.formats-sub{margin-top:clamp(34px,4vw,56px)}
.formats-head{max-width:64ch;margin-bottom:clamp(18px,2vw,26px)}
.formats-head .h3{font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.02em}
.formats-head .sub{margin-top:10px;font-size:1rem}

.formats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.format{
  background:var(--surface-1);
  padding:clamp(22px,2.4vw,30px);
  transition:background-color .22s ease;
}
.format:hover{background:var(--surface-2)}
.format .h3{font-size:1.0625rem}
.format p{margin-top:10px;color:var(--muted-foreground);font-size:.9375rem;line-height:1.6}

/* the shapes and networks a task can ask for */
.format-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 32px;margin-top:clamp(18px,2.2vw,26px);
}
.format-shapes{display:flex;flex-wrap:wrap;gap:10px}
.shape{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--ov-1);
  font-size:.875rem;color:var(--text-soft);
}
/* a literal little frame, so the aspect ratio is shown rather than described */
.ratio{display:block;border:1.5px solid var(--accent-icon);border-radius:2px}
.ratio-v{width:9px;height:16px}
.ratio-h{width:18px;height:10px}

.format-nets{display:inline-flex;align-items:center;gap:12px}
.net-icons{display:inline-flex;align-items:center;gap:10px;color:var(--accent-mid)}
.format-nets .small{font-size:.875rem}

@media (max-width:900px){
  .formats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .format-meta{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------- full service ---------------------------------- */
/* Same gradient panel as the closing banner, because it carries the same weight:
   an offer, not another feature. Its own structure though — a claim, three
   things you get, and one button. */
.managed{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(28px,3.4vw,48px);
  border-radius:var(--radius-3xl);
  border:1px solid #ffffff2e;
  background:
    radial-gradient(115% 150% at 6% -10%,#6d7cff 0%,transparent 58%),
    radial-gradient(95% 130% at 98% 110%,#8b5cf6 0%,transparent 55%),
    linear-gradient(135deg,#3f4ae0 0%,#2e2a6b 55%,#221f45 100%);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 40px 90px -40px color-mix(in oklab,var(--primary) 70%,transparent);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  grid-template-areas:"copy list" "actions list";
  align-items:start;
  column-gap:clamp(28px,4vw,64px);
  row-gap:clamp(20px,2.4vw,28px);
}
.managed-copy{grid-area:copy}
.managed-copy .eyebrow{color:#ffffffa6}
.managed-copy .h2{font-size:clamp(1.6rem,2.8vw,2.25rem);letter-spacing:-.03em;max-width:18ch}

.managed-list{grid-area:list;display:grid;gap:clamp(16px,2vw,22px);align-content:start}
.managed-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.managed-list .ico{width:22px;height:22px;margin-top:2px;color:#c3c9ff}
.managed-list strong{display:block;font-family:var(--font-sans);font-weight:600;font-size:1.0625rem;color:#fff}
.managed-list span{display:block;margin-top:4px;color:#ffffffc7;font-size:.9375rem;line-height:1.55}

.managed-actions{grid-area:actions;align-self:end}
/* an indigo button would vanish on an indigo panel */
.managed .btn-primary{
  background:#121118;color:#fff;
  border:1px solid #ffffff1f;
  box-shadow:0 18px 38px -16px #000000b3;
}
.managed .btn-primary:hover{background:#1c1a26;border-color:#ffffff38}

@media (max-width:900px){
  .managed{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "list" "actions"}
  .managed-copy .h2{max-width:none}
  .managed .btn{width:100%}
}

/* ---------------------------------- creatives slider ---------------------------------- */
/* Native scroll with snap, arrows only steer it. Keyboard, trackpad and swipe
   all work the same, and with JS off the row is still scrollable. */
.clips-slider{
  position:relative;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:20px;
}
.clips-strip{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-block:2px;
  margin-inline:-2px;   /* room for the focus ring without clipping it */
  padding-inline:2px;
}
.clips-strip::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.clips-strip{scroll-behavior:auto}}

.clips-track{
  display:flex;
  gap:16px;
  width:max-content;
  align-items:stretch;
}
/* Four across on desktop: bigger tiles read better than six small ones. */
.clips-track .clip{
  /* sized from the slider's own width, not from 100vw: the viewport unit
     includes the scrollbar and pushed the row a few pixels too wide */
  flex:0 0 calc((var(--slider-w,1160px) - 48px) / 4);
  scroll-snap-align:start;
}

/* arrows */
.slider-arrow{
  position:absolute;top:50%;z-index:5;
  translate:0 -50%;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--border);border-radius:50%;
  background:color-mix(in oklab,var(--card) 92%,transparent);
  color:var(--foreground);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,opacity .18s ease;
}
@supports (backdrop-filter:blur(1px)){.slider-arrow{backdrop-filter:blur(10px)}}
.slider-arrow:hover{background:var(--secondary);border-color:var(--ov-7)}
.slider-arrow[disabled]{opacity:.32;cursor:default}
.slider-arrow[disabled]:hover{background:color-mix(in oklab,var(--card) 92%,transparent);border-color:var(--border)}
.slider-arrow[hidden]{display:none}
/* Sitting flush by default; they only step outside the column once the window
   is wide enough to have margins to step into — otherwise those few pixels
   hang off the screen and give the whole page a horizontal scroll. */
.slider-prev{left:0}
.slider-next{right:0}
@media (min-width:1290px){
  .slider-prev{left:-6px}
  .slider-next{right:-6px}
}
.slider-prev .ico{rotate:90deg}
.slider-next .ico{rotate:-90deg}

/* dots */
.slider-dots{display:none;justify-content:center;gap:8px;margin-top:20px}
.slider-dots[hidden]{display:none!important}
.slider-dot{
  width:7px;height:7px;padding:0;
  border:0;border-radius:50%;
  background:var(--ov-6);cursor:pointer;
  transition:background-color .2s ease,width .2s ease;
}
.slider-dot[aria-current="true"]{width:22px;border-radius:999px;background:var(--accent-icon)}
.slider-count{
  font-family:var(--font-sans);font-size:.8125rem;font-weight:500;
  color:var(--muted-foreground);font-variant-numeric:tabular-nums;
}

@media (max-width:1080px){
  .clips-track .clip{flex-basis:calc((var(--slider-w,1160px) - 32px) / 3)}
}
@media (max-width:760px){
  .clips-track .clip{flex-basis:calc((var(--slider-w,1160px) - 16px) / 2)}
}
@media (max-width:520px){
  .clips-track{gap:12px}
  .clips-track .clip{flex-basis:calc(var(--slider-w,320px) - 52px)}   /* next tile peeks in */
  .slider-arrow{display:none}
  .slider-dots{display:flex}
}

.clip-tile:has(a.clip-link){cursor:pointer}
.clip:hover .clip-play{opacity:1;scale:1}
.clip-link:focus-visible .clip-play{opacity:1;scale:1}
.clip-play{
  position:absolute;inset:0;z-index:4;margin:auto;
  display:grid;place-items:center;
  width:52px;height:52px;
  border:1px solid var(--border);border-radius:50%;
  background:#0b0b10b3;color:#fff;cursor:pointer;
  opacity:0;scale:.86;
  transition:opacity .2s ease,scale .2s ease;
}
@supports (backdrop-filter:blur(1px)){.clip-play{backdrop-filter:blur(8px)}}
.clip-play .ico{translate:1px 0}

/* ---------------------------------- CTA banner ---------------------------------- */
.cta-banner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,4vw,56px);
  padding:clamp(34px,4.6vw,64px);
  border-radius:var(--radius-3xl);
  border:1px solid var(--ov-6);
  background:
    radial-gradient(115% 150% at 6% -10%,#6d7cff 0%,transparent 58%),
    radial-gradient(95% 130% at 98% 110%,#8b5cf6 0%,transparent 55%),
    linear-gradient(135deg,#3f4ae0 0%,#2e2a6b 55%,#221f45 100%);
  box-shadow:
    inset 0 1px 0 var(--ov-7),
    0 40px 90px -40px color-mix(in oklab,var(--primary) 70%,transparent);
}

/* These two panels keep their dark gradient in both themes, so their text has
   to be pinned to white — otherwise it inherits the page colour and turns black
   on the purple in the light theme. */
.cta-banner,
.managed{color:#fff}
/* Belt and braces: inheritance alone is enough, but naming the headings
   directly means nothing further down the file can quietly win. */
:root .cta-banner .h2,
:root .managed .h2,
:root .managed-list strong{color:#fff}
:root .cta-banner .sub{color:#ffffffd1}
:root .managed .eyebrow{color:#ffffffa6}

.cta-banner .h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.03em}

/* The last block before the footer is where the decision happens, so it answers
   the three objections an advertiser still has instead of shouting again. */
.cta-facts{display:grid;gap:10px;margin-top:clamp(20px,2.4vw,26px)}
.cta-facts li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  color:#ffffffd9;font-size:1rem;line-height:1.5;
}
.cta-facts .ico{width:19px;height:19px;margin-top:2px;color:#a9b3ff}

.cta-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.cta-secondary{
  text-align:center;font-size:.9375rem;
  color:#ffffffb8;
  text-decoration:underline;text-underline-offset:4px;
  transition:color .18s ease;
}
.cta-secondary:hover{color:#fff}

/* An indigo button disappears on an indigo panel and a white one reads as a
   default. Near-black picks up the page background and holds its own here. */
.cta-banner .btn-primary{
  height:56px;padding-inline:30px;font-size:1.0625rem;
  background:#121118;color:#fff;
  border:1px solid var(--ov-4);
  box-shadow:0 18px 38px -16px #000000b3;
}
.cta-banner .btn-primary:hover{
  background:#1c1a26;
  border-color:var(--ov-8);
  box-shadow:0 22px 46px -16px #000000cc;
}
.cta-banner .btn-primary .ico{transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.cta-banner .btn-primary:hover .ico{transform:translateX(3px)}

/* ---------------------------------- creators ---------------------------------- */
.section-creators .section-head .btn{margin-top:28px}
.steps-creators{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-creators .card-step{padding-top:26px}

/* ---------------------------------- FAQ ---------------------------------- */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{border-color:var(--ov-5)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-sans);font-size:1.0625rem;font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-caret{color:var(--muted-foreground);transition:transform .2s ease}
.faq-item[open] .faq-caret{transform:rotate(180deg)}
.faq-body{padding:0 22px 20px}
.faq-body p{color:var(--muted-foreground);max-width:68ch}

/* ---------------------------------- video explainer ---------------------------------- */
/* A thin bar with a label read as a footnote. A real preview tile with a play
   button reads as something to watch. */
.video-cta{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(18px,2.2vw,26px);
  padding:clamp(16px,1.8vw,20px);
  border-radius:var(--radius-3xl);
  border:1px solid color-mix(in oklab,var(--primary) 22%,transparent);
  background:
    radial-gradient(70% 150% at 4% 50%,color-mix(in oklab,var(--primary) 14%,transparent),transparent 62%),
    var(--surface-1);
}

.video-thumb{
  position:relative;display:block;
  aspect-ratio:16/9;width:100%;
  padding:0;border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  overflow:hidden;cursor:pointer;
  background:
    radial-gradient(120% 90% at 20% 0%,color-mix(in oklab,var(--primary) 26%,transparent),transparent 62%),
    linear-gradient(150deg,var(--surface-3),var(--surface-5));
  transition:transform .22s cubic-bezier(.22,.61,.36,1),border-color .2s ease;
}
.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-thumb:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}

/* Bottom-right rather than dead centre. A designed cover carries its own
   headline, and a button in the middle lands straight on it — this corner is
   the one the covers deliberately keep empty. */
.video-play{
  position:absolute;inset:0;margin:auto;
  display:grid;place-items:center;
  width:58px;height:58px;border-radius:50%;
  /* See-through enough that whatever the cover says underneath still reads.
     The glyph keeps its own shadow so it survives on a light frame too. */
  background:#0b0b1038;
  border:1px solid #ffffff6b;
  color:#fff;
  box-shadow:0 2px 14px -4px #0b0b1099;
  transition:scale .22s cubic-bezier(.22,.61,.36,1),background-color .22s ease;
}
/* a short scrim under the corner so the button holds its shape on a light frame */
.video-thumb::after{
  content:"";position:absolute;right:0;bottom:0;
  width:132px;height:110px;pointer-events:none;
  background:radial-gradient(120% 120% at 100% 100%,#0b0b1099,transparent 70%);
}
/* No backdrop blur at all. Any blur smears whatever the cover says underneath,
   which is the opposite of what a see-through button is for. The glyph carries
   its own shadow instead, so it stays readable on a light frame. */
.video-thumb:hover .video-play{scale:1.08;background:var(--primary);border-color:transparent}
/* The triangle is centred in its own box now, so only the optical nudge is
   left: a shape with a flat left edge and a point on the right reads as sitting
   too far left when it is centred by geometry. */
.video-play .ico{width:22px;height:22px;translate:1px 0;filter:drop-shadow(0 1px 2px #0b0b10)  drop-shadow(0 0 6px #0b0b10b3)}

.video-copy .eyebrow{margin-bottom:8px}
.video-copy .h3{font-size:clamp(1.0625rem,1.6vw,1.25rem)}
.video-copy p{margin-top:8px;color:var(--muted-foreground);font-size:.9375rem;line-height:1.6;max-width:52ch}
.video-copy .btn{margin-top:16px}

@media (max-width:760px){
  .video-cta{grid-template-columns:minmax(0,1fr)}
}

/* the dialog itself is the shared .modal; only the frame is specific */
.modal-video{width:min(960px,calc(100vw - 40px))}
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border-bottom-left-radius:var(--radius-3xl);
  border-bottom-right-radius:var(--radius-3xl);
  overflow:hidden;
}
.video-frame iframe,
.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------------------------------- legal modal ---------------------------------- */
.modal{
  width:min(760px,calc(100vw - 40px));
  max-height:min(84vh,900px);
  padding:0;margin:auto;
  color:var(--foreground);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-3xl);
  box-shadow:0 40px 100px -30px var(--shadow-strong);
  overflow:hidden;
}
.modal[open]{display:flex;flex-direction:column}
/* Whatever is open — a popup or the chat — the site behind it is blurred and
   dimmed, the same veil for both (.schat-veil in player.css). Lighter dimming
   than before so the blur actually reads. */
.modal::backdrop{background:rgba(11,11,16,.55)}
:root[data-theme="light"] .modal::backdrop{background:rgba(20,20,30,.28)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .modal::backdrop{-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
}
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-in .26s cubic-bezier(.22,.61,.36,1)}
}
@keyframes modal-in{from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}

.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;flex:none;
  border-bottom:1px solid var(--border);
  background:var(--card);
}
.modal-head .h3{color:var(--foreground)}
/* compact, the same as the chat window's close button */
.modal-close{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;padding:0;
  background:transparent;border:0;border-radius:10px;
  color:var(--muted-foreground);cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.modal-close:hover{background:var(--secondary);color:var(--foreground)}
.modal-close .ico{width:18px;height:18px}

.modal-body{
  padding:8px 22px 28px;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-body h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;margin:26px 0 8px}
.modal-body p + p{margin-top:10px}
.modal-body strong{color:var(--text-strong);font-weight:600}
.modal-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;
  padding:1px 5px;border-radius:var(--radius-sm);
  background:var(--ov-3);color:var(--accent-soft);
}
.modal-body p{color:var(--muted-foreground);font-size:.9375rem;max-width:70ch}
.modal-body ul{margin:8px 0;padding-left:18px;list-style:disc}
.modal-body li{color:var(--muted-foreground);font-size:.9375rem;margin-bottom:6px}
.modal-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

.legal-meta{margin-top:18px;font-size:.8125rem;letter-spacing:.02em}
/* visible marker on the placeholder documents, so an unfinished one cannot
   quietly go live — delete the paragraph together with the placeholder text */
.legal-todo{
  margin-top:12px;padding:11px 14px;
  border-radius:var(--radius-md);
  background:color-mix(in oklab,var(--destructive) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--destructive) 30%,transparent);
  color:color-mix(in oklab,var(--destructive) 62%,var(--foreground));font-size:.875rem;
}

/* ---------------------------------- 404 ---------------------------------- */
.notfound{
  position:relative;overflow:hidden;
  min-height:calc(100dvh - var(--header-h));
  display:grid;place-items:center;
  padding-block:clamp(48px,8vw,96px);
}
.notfound-glow{
  position:absolute;inset:-30% -10% auto -10%;height:620px;pointer-events:none;
  background:
    radial-gradient(44% 50% at 30% 32%,color-mix(in oklab,var(--primary) 24%,transparent),transparent 70%),
    radial-gradient(40% 46% at 72% 16%,color-mix(in oklab,var(--chart-2) 18%,transparent),transparent 70%);
  filter:blur(20px);
}
.notfound-inner{position:relative;text-align:center;max-width:620px}
.notfound-code{
  display:block;
  font-family:var(--font-sans);
  font-size:clamp(5rem,16vw,10rem);
  font-weight:600;line-height:.95;letter-spacing:-.05em;
  margin-bottom:12px;
}
.notfound-inner .sub{margin-inline:auto;max-width:48ch}
.notfound-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
@media (max-width:520px){
  .notfound-cta .btn{width:100%}
}
/* the lost robot: beside the text on wide screens, above it on phones */
.notfound-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px)}
.notfound-bot{display:block;flex:none;width:clamp(200px,24vw,300px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.notfound-wrap .notfound-inner{text-align:left}
.notfound-wrap .notfound-inner .sub{margin-inline:0}
.notfound-wrap .notfound-cta{justify-content:flex-start}
@media (max-width:800px){
  .notfound-wrap{flex-direction:column;gap:8px}
  .notfound-bot{width:170px}
  .notfound-wrap .notfound-inner{text-align:center}
  .notfound-wrap .notfound-inner .sub{margin-inline:auto}
  .notfound-wrap .notfound-cta{justify-content:center}
}


/* 404: the robot's speech bubble */
.nf-botbox{position:relative;flex:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.nf-botbox:focus-visible .notfound-bot{outline:2px solid var(--ring);outline-offset:6px;border-radius:24px}
.nf-tip{position:absolute;bottom:97%;left:42%;z-index:2;width:max-content;max-width:250px;padding:11px 14px;border-radius:18px;border-bottom-left-radius:6px;
  background:var(--card);border:1px solid var(--border);color:var(--foreground);font-size:.875rem;line-height:1.45;text-align:left;
  box-shadow:0 22px 50px -18px var(--shadow-strong);pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.96);transform-origin:bottom left;
  transition:opacity .18s ease,transform .25s cubic-bezier(.22,.61,.36,1),visibility 0s linear .25s}
.nf-tip.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nf-tip b{display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;color:var(--primary)}
.nf-tip .dots{display:inline-flex;gap:4px;padding:3px 0}
.nf-tip .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground);animation:nf-dot 1.1s infinite}
.nf-tip .dots i:nth-child(2){animation-delay:.15s}.nf-tip .dots i:nth-child(3){animation-delay:.3s}
@keyframes nf-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:800px){
  .nf-tip{bottom:94%;left:40%;max-width:190px;font-size:.8125rem}
  .notfound-wrap{padding-top:64px}
}

/* ---------------------------------- cookie banner ---------------------------------- */
.cookie{
  position:fixed;z-index:120;
  left:20px;right:20px;
  bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));
  max-width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);
  padding:18px 22px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  box-shadow:0 30px 70px -25px var(--shadow-strong);
}
@supports (backdrop-filter:blur(1px)){
  .cookie{background:color-mix(in oklab,var(--card) 88%,transparent);backdrop-filter:blur(14px)}
}
.cookie[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .cookie{animation:cookie-in .32s cubic-bezier(.22,.61,.36,1)}
}
@keyframes cookie-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

.cookie-ico{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:color-mix(in oklab,var(--primary) 14%,transparent);
  color:var(--accent-icon);
}
.cookie-ico .ico{width:22px;height:22px}
.cookie-text{color:var(--muted-foreground);font-size:.875rem;max-width:78ch}
.cookie-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.cookie-actions .btn{height:38px;padding-inline:16px;font-size:.875rem}
.cookie-link{
  color:var(--text-soft);
  text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;              /* the label itself never breaks mid-way */
  transition:color .18s ease;
}
.cookie-link:hover{color:var(--foreground)}

@media (max-width:760px){
  .cookie{left:12px;right:12px;bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px));flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .cookie-ico{display:none}   /* no room for decoration on a phone */
  .cookie-actions{margin-left:0;flex-wrap:wrap}
  .cookie-actions .btn{flex:1;min-width:140px}
}

/* ---------------------------------- partner program ---------------------------------- */
/* Its own band, like moderation: the referral scheme sits beside the product
   rather than inside it. */
.partners-band{
  background:linear-gradient(180deg,var(--surface-4),var(--surface-5));
  border-block:1px solid var(--ov-4);
  box-shadow:inset 0 1px 0 var(--ov-3);
}
.partners{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.partners-intro .sub{max-width:46ch}
.partners-intro .btn{margin-top:clamp(24px,3vw,34px)}

/* the two commission figures, as numbers rather than sentences */
.partner-rates{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:clamp(26px,3vw,36px) 0 0;
  border-block:1px solid var(--border);
}
.partner-rates > div{padding:20px 20px 20px 0;display:flex;flex-direction:column;gap:6px}
.partner-rates > div + div{border-left:1px solid var(--border);padding-left:24px}
.partner-rates dd{
  order:-1;margin:0;
  font-family:var(--font-sans);font-size:clamp(2rem,3.4vw,2.75rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  width:max-content;
}
.partner-rates dt{font-size:.875rem;color:var(--muted-foreground);max-width:24ch}

/* four steps, numbered by CSS like the moderation flow */
.partner-steps{counter-reset:pstep;list-style:none;display:grid;gap:0}
.partner-steps li{
  position:relative;
  counter-increment:pstep;
  padding:22px 0 22px 60px;
  border-bottom:1px solid var(--border);
}
.partner-steps li:first-child{padding-top:0}
.partner-steps li:first-child::before{top:-2px}
.partner-steps li:last-child{border-bottom:0;padding-bottom:0}
.partner-steps li::before{
  content:counter(pstep,decimal-leading-zero);
  position:absolute;left:0;top:20px;
  width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-sans);font-size:.75rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--accent-soft);
  background:color-mix(in oklab,var(--primary) 16%,var(--surface-3));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 32%,transparent);
}
.partner-steps p{margin-top:8px;color:var(--muted-foreground);font-size:.9375rem;line-height:1.6}

@media (max-width:900px){
  .partners{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:520px){
  .partner-rates{grid-template-columns:minmax(0,1fr)}
  .partner-rates > div + div{border-left:0;border-top:1px solid var(--border);padding-left:0}
  .partners-intro .btn{width:100%}
}

/* ---------------------------------- tax help ---------------------------------- */
/* Deliberately not a fourth step card: this is an aside, not part of the
   sequence. Horizontal, tinted, no number — so the eye reads it as a note. */
.tax-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,28px);
  align-items:start;
  margin-top:clamp(20px,2.4vw,28px);
  padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radius-3xl);
  border:1px solid color-mix(in oklab,var(--primary) 24%,transparent);
  background:
    radial-gradient(70% 140% at 6% 0%,color-mix(in oklab,var(--primary) 14%,transparent),transparent 62%),
    var(--surface-1);
}
.tax-ico{
  display:grid;place-items:center;
  width:52px;height:52px;flex:none;
  border-radius:var(--radius-xl);
  background:color-mix(in oklab,var(--primary) 16%,transparent);
  color:var(--accent-icon);
}
.tax-body .h3{font-size:1.125rem}
.tax-body p{margin-top:10px;color:var(--muted-foreground);font-size:.9375rem;line-height:1.65;max-width:74ch}
.tax-btn{align-self:center;white-space:nowrap}
.tax-btn .ico{width:18px;height:18px}

/* The disclaimer is a legal footnote, not part of the offer — it should read as
   the small print it is. */
.tax-body .tax-meta{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border);
  font-size:.75rem;
  line-height:1.5;
  opacity:.8;
}

@media (max-width:1000px){
  /* the button drops under the text before the text gets squeezed */
  .tax-note{grid-template-columns:auto minmax(0,1fr)}
  .tax-btn{grid-column:2;justify-self:start;margin-top:4px}
}
@media (max-width:640px){
  .tax-note{grid-template-columns:minmax(0,1fr)}
  .tax-btn{grid-column:1;width:100%}
}

/* ---------------------------------- FAQ + support ---------------------------------- */
.faq-layout{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:0 clamp(24px,3vw,48px);
  align-items:start;
}
/* the heading owns row 1 on its own, so the card starts level with the first
   question rather than with the eyebrow above it */
.faq-head{grid-column:1;grid-row:1;margin-bottom:clamp(24px,2.4vw,32px);max-width:none}
.faq-list{grid-column:1;grid-row:2;min-width:0}
.support-card{grid-column:2;grid-row:2}

.support-card{
  position:sticky;
  top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px);
  padding:clamp(24px,2.4vw,32px);
  border-radius:var(--radius-3xl);
  border:1px solid color-mix(in oklab,var(--primary) 26%,transparent);
  background:
    radial-gradient(88% 120% at 18% 0%,color-mix(in oklab,var(--primary) 24%,transparent),transparent 62%),
    radial-gradient(80% 110% at 92% 100%,color-mix(in oklab,var(--chart-2) 20%,transparent),transparent 60%),
    var(--card);
}
.support-card .card-ico{margin-bottom:20px}
.support-card .eyebrow{margin-bottom:10px}
.support-card p{color:var(--text-soft);font-size:.9375rem;margin-top:10px}
/* Two ways to reach us, side by side. Mail stays the primary action; Telegram
   is an outline button so the pair does not read as two equal shouts. */
.support-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.support-card .btn{width:100%;padding-inline:12px}
.support-card .btn .ico{width:17px;height:17px}

.btn-tg{
  background:transparent;
  border-color:color-mix(in oklab,var(--primary) 34%,transparent);
  color:var(--accent-soft);
}
.btn-tg:hover{
  background:var(--primary);
  border-color:transparent;
  color:var(--primary-foreground);
}

@media (max-width:1100px){
  .support-actions{grid-template-columns:minmax(0,1fr)}
}

/* Phone under the button: a hairline instead of a second box, so the card
   still reads as one thing. */
.support-call{
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--ov-4);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.support-call-num{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-sans);
  font-size:1.125rem;font-weight:600;letter-spacing:.01em;
  color:var(--foreground);
  transition:color .18s ease;
}
.support-call-num .ico{width:18px;height:18px;color:var(--accent-mid)}
.support-call-num:hover{color:var(--accent-soft)}
.support-call-num:hover .ico{color:var(--accent-soft)}
.support-hours{font-size:.8125rem;color:var(--muted-foreground)}

@media (max-width:900px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .faq-head,.faq-list,.support-card{grid-column:1;grid-row:auto}
  .support-card{position:static;margin-top:24px}
  .support-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------- footer ---------------------------------- */
.site-footer{border-top:1px solid var(--border);padding-top:clamp(48px,6vw,72px);background:var(--footer-bg)}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,48px);
  padding-bottom:44px;
}
.footer-brand .brand-logo{margin-bottom:18px}
.footer-tagline{color:var(--muted-foreground);font-size:.9375rem;max-width:32ch}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  color:var(--muted-foreground);
  background-image:none;
  transition:color .18s ease,background-image .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.socials a:hover,
.socials a:focus-visible{
  color:#fff;
  background:var(--gradient);
  border-color:transparent;
  box-shadow:0 8px 20px -10px var(--primary);
}
.socials .ico{width:19px;height:19px}
.socials-note{margin-top:14px;color:var(--muted-foreground);font-size:.875rem;max-width:34ch}

.btn-presskit,.btn-wl{
  margin-top:18px;height:38px;padding-inline:16px;font-size:.875rem;
  color:var(--muted-foreground);          /* same weight as the social buttons */
  border-color:var(--border);
  background:transparent;
}
.btn-presskit:hover,.btn-wl:hover{color:var(--foreground);background:var(--secondary);border-color:var(--ov-5)}
.btn-presskit .ico,.btn-wl .ico{width:17px;height:17px}
/* Press kit and Documents side by side under the brand blurb */
.footer-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.footer-btns .btn-presskit,.footer-btns .btn-wl{margin-top:0;cursor:pointer;font:inherit;font-size:.875rem}

.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:4px;
  color:var(--accent-mid);              /* the brand blue-violet, but flat: gradient is
                                 reserved for the hero and the closing banner */
  width:max-content;max-width:100%;
}
/* max-content keeps the hover area tight around the label, but without a cap a
   long one (RU "Политика конфиденциальности") pushes past the column and gives
   the whole page a horizontal scroll. */
.footer-col a{
  font-size:.9375rem;color:var(--muted-foreground);
  transition:color .18s ease;
  width:max-content;max-width:100%;
  /* Last-resort net for a word wider than its column ("конфиденциальности" on a
     320px phone). overflow-wrap:anywhere rather than break-word, because only
     anywhere is taken into account when the box is sized by its content.
     Safari needs the prefixed hyphens property. */
  -webkit-hyphens:auto;
  hyphens:auto;
  overflow-wrap:anywhere;
}
.footer-col a:hover{color:var(--foreground)}
/* phone and e-mail in the footer, each with its icon */
.footer-col a.footer-ico-link{display:inline-flex;align-items:center;gap:8px}
.footer-ico-link .ico{width:16px;height:16px;flex:none;color:var(--primary)}
.footer-col h4.footer-subhead{margin-top:14px}
.footer-address{font-style:normal;font-size:.875rem;color:var(--muted-foreground);line-height:1.7;overflow-wrap:break-word}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  padding-block:22px;border-top:1px solid var(--border);
  font-size:.875rem;color:var(--muted-foreground);
}
.footer-made{display:inline-flex;align-items:center;gap:7px}
/* copyright + the three most-asked documents + "All documents" */
.footer-legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.footer-legal a,.footer-alldocs{color:var(--muted-foreground);transition:color .18s ease}
.footer-legal a:hover{color:var(--foreground)}
.footer-alldocs{padding:0;border:0;background:none;font:inherit;cursor:pointer;color:var(--accent-mid)}
.footer-alldocs:hover{color:var(--foreground)}

/* ---- documents popup: every legal document as a tile ---- */
.modal.modal-docs{width:min(880px,calc(100vw - 40px))}
.modal-docs .modal-head{align-items:flex-start}
.docs-sub{margin-top:4px;color:var(--muted-foreground);font-size:.9375rem}
.docs-body{padding:20px 22px 22px}
.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.doc-tile{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 40px 16px 16px;border:1px solid var(--border);border-radius:16px;background:var(--secondary);color:var(--foreground);transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.doc-tile:hover,.doc-tile:focus-visible{border-color:color-mix(in oklab,var(--primary) 60%,transparent);background:color-mix(in oklab,var(--primary) 9%,var(--secondary))}
.doc-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in oklab,var(--primary) 16%,transparent);color:var(--accent-mid)}
.doc-ico .ico{width:21px;height:21px}
.doc-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.doc-txt b{font-size:.9875rem;font-weight:600;line-height:1.3}
.doc-txt span{font-size:.875rem;line-height:1.45;color:var(--muted-foreground)}
.doc-arr{position:absolute;right:14px;top:18px;width:16px;height:16px;color:var(--muted-foreground);transition:color .18s ease,transform .18s ease}
.doc-tile:hover .doc-arr{color:var(--accent-mid);transform:translateX(2px)}
.modal-body a.doc-tile,.modal-body a.doc-tile:hover{text-decoration:none;color:var(--foreground)}
.modal-body a.doc-tile .doc-txt span{color:var(--muted-foreground)}
.docs-foot{margin-top:16px;font-size:.8125rem;color:var(--muted-foreground)}
@media (max-width:640px){
  .footer-legal > span:first-child{flex-basis:100%}
  .doc-grid{grid-template-columns:minmax(0,1fr)}
  .docs-body{padding:16px}
}
.ico-heart{width:15px;height:15px;color:var(--accent-mid)}
.ico-flag{width:20px;height:10px;border-radius:1.6px;box-shadow:inset 0 0 0 1px var(--ov-4)}

/* ---------------------------------- reveal on scroll ---------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;translate:0 18px;transition:opacity .5s ease,translate .5s cubic-bezier(.22,.61,.36,1)}
  .reveal.is-visible{opacity:1;translate:0 0}
  .grid-adv .reveal:nth-child(2){transition-delay:.06s}
  .grid-adv .reveal:nth-child(3){transition-delay:.12s}
  .grid-adv .reveal:nth-child(4){transition-delay:.18s}
  .grid-adv .reveal:nth-child(5){transition-delay:.24s}
  .steps-creators .reveal:nth-child(2){transition-delay:.08s}
  .steps-creators .reveal:nth-child(3){transition-delay:.16s}
}

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width:1080px){
  .grid-adv{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1200px){
  /* The column caps at 1200px, so its content is 1160px on any wider screen and
     the trimmed row just fits. Below 1200 the column itself shrinks and the row
     no longer does, so the burger takes over there. */
  .nav-desktop{display:none}
  .icon-btn{display:inline-flex}
  .theme-toggle{display:inline-flex}
}

/* header buttons are tighter than the ones in the page body */
.header-actions .btn{padding-inline:14px;gap:7px}
.header-actions .btn .ico{width:17px;height:17px}

@media (max-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-stack{order:-1;height:auto;aspect-ratio:1/.9;max-width:520px;margin:0 auto 72px;width:100%}
  .hero-stack .clip{width:47%}   /* keep the tallest card inside the container so the pill clears it */
  .hero-copy{text-align:left}
  .steps,.steps-creators{grid-template-columns:minmax(0,1fr)}
  .panel-flow{grid-template-columns:minmax(0,1fr)}
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  :root{--header-h:64px}
  .hide-sm{display:none}
  .grid-adv{grid-template-columns:minmax(0,1fr)}
  .card-adv:first-child,
  .card-adv:last-child{grid-column:auto}
  .card-adv:last-child{display:block}
  .card-adv:last-child .h3{font-size:1.0625rem}
  .card-adv:last-child p{margin-top:10px}
  .hero-cta .btn{width:100%}
  /* back to real items in a 2x2 grid: with display:contents the explicit
     grid-row on dd/dt spawned implicit columns and squashed the first two */
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .hero-stats div{display:flex;flex-direction:column-reverse;gap:2px}
  .hero-stats dd,.hero-stats dt{grid-row:auto}
  .hero-stats dd{margin-bottom:0;align-self:auto}
  .hero-stats dt{align-self:auto}
  .hero-stats dd{font-size:1.375rem}
  .cta-banner{grid-template-columns:minmax(0,1fr);gap:26px}
  .cta-actions{align-items:stretch}
  .cta-banner .btn{width:100%}
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-col a{width:auto}
  .footer-brand{grid-column:1 / -1;grid-row:1}
  .footer-col-platform{grid-column:1;grid-row:2}
  .footer-col-hq{grid-column:2;grid-row:2}
  .footer-col-contacts{grid-column:1 / -1;grid-row:3}
  .tablist{
    width:max-content;max-width:100%;
    overflow-x:auto;scrollbar-width:none;
  }
  .tablist::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:9px 15px;font-size:.875rem}
}

@media (max-width:400px){
  .tab{padding:9px 9px;font-size:.8125rem}
  .modal{width:100vw;max-width:100vw;max-height:92vh;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;margin-bottom:0}
  .modal-head{padding:16px 18px}
  .modal-body{padding:8px 18px 24px}
}

.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* big views figure next to the creative examples heading (data/stats.php) */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(32px,4vw,56px)}
.work-head .section-head{margin-bottom:0}
.work-views{flex:none;margin:0;text-align:right}
.work-views-num{
  display:block;font-family:var(--font-sans);font-weight:700;
  font-size:clamp(3.25rem,7vw,5.5rem);line-height:.95;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.work-views-cap{display:block;margin:10px 0 0 auto;max-width:15em;font-size:.9375rem;line-height:1.4;color:var(--muted-foreground);text-wrap:balance}
/* the robot with the camera (.creat-bot, player.css) owns the top-right corner of this
   header: the figure stands just left of him, in the direction he is filming.
   reserve = his right offset 56px + his width + 28px air; he is gone below 1081px */
.work-views-num{font-size:clamp(3rem,5.2vw,4.75rem)}
@media (min-width:1081px){ .work-head{padding-right:348px} }
@media (min-width:1081px) and (max-width:1500px){ .work-head{padding-right:329px} }
@media (min-width:1081px) and (max-width:1280px){ .work-head{padding-right:306px} }
@media (max-width:760px){
  .work-head{flex-direction:column;align-items:flex-start;gap:22px}
  .work-views{text-align:left}
  .work-views-cap{margin-left:0}
}