/* ---------------------------------- video player ---------------------------------- */
/* The native controls cannot be trimmed, so they are off and this is the whole
   interface: a seek bar, a clock, and the video surface itself as play/pause. */
.vp{position:absolute;inset:0;outline:none}
.vp video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;cursor:pointer}

.vp-toggle{
  position:absolute;inset:0;margin:auto;
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  /* Brand colour, not a grey disc: the badge only shows while the video is
     paused, so it is the one thing asking to be clicked. */
  background:color-mix(in oklab,var(--primary) 88%,#0b0b10);
  border:1px solid #ffffff2e;
  color:#fff;
  cursor:pointer;padding:0;
  box-shadow:0 14px 34px -14px color-mix(in oklab,var(--primary) 70%,transparent);
  transition:opacity .18s ease,scale .18s cubic-bezier(.22,.61,.36,1),background-color .18s ease;
}
/* older browsers without color-mix fall back to the flat brand colour */
@supports not (background:color-mix(in oklab,red 50%,blue)){
  .vp-toggle{background:var(--primary)}
}
.vp-toggle:hover{background:var(--primary)}
.vp-toggle svg{width:26px;height:26px;translate:2px 0;
  filter:drop-shadow(0 1px 2px #0b0b10) drop-shadow(0 0 6px #0b0b10b3)}
.vp-toggle:hover{scale:1.06}
/* hidden while playing, back the moment it pauses */
.vp.is-playing .vp-toggle{opacity:0;pointer-events:none}

.vp-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:14px 18px 16px;
  background:linear-gradient(to top,#0b0b10e0,#0b0b1000);
  opacity:0;transition:opacity .2s ease;
}
.vp:hover .vp-bar,
.vp:focus-within .vp-bar,
.vp:not(.is-playing) .vp-bar{opacity:1}

.vp-track{
  position:relative;flex:1;height:20px;
  display:flex;align-items:center;
  cursor:pointer;touch-action:none;
}
.vp-track::before{
  content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;
  background:#ffffff38;
}
.vp-buffer,.vp-played{position:absolute;left:0;height:4px;border-radius:999px;pointer-events:none}
.vp-buffer{background:#ffffff45;width:0}
.vp-played{background:var(--primary);width:0}
.vp-knob{
  position:absolute;left:0;width:13px;height:13px;border-radius:50%;
  background:#fff;translate:-50% 0;pointer-events:none;
  box-shadow:0 1px 5px #0b0b10b3;
  scale:0;transition:scale .15s ease;
}
.vp-track:hover .vp-knob,
.vp:focus-within .vp-knob{scale:1}

.vp-time{
  font-family:var(--font-sans);font-size:.8125rem;color:#ffffffd1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

@media (max-width:520px){
  .vp-bar{gap:10px;padding:12px 12px 14px}
  .vp-toggle{width:60px;height:60px}
  .vp-knob{scale:1}          /* no hover on a phone, so always visible */
}

/* ---------------------------------- contact form ---------------------------------- */
.modal-form{width:min(620px,calc(100vw - 32px))}
.form{padding:clamp(20px,3vw,28px);display:grid;gap:14px}
.form-lead{margin:0 0 4px;color:var(--muted-foreground);font-size:.9375rem;line-height:1.55}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.field{display:grid;gap:7px}
.field > span{
  font-family:var(--font-sans);font-size:.8125rem;font-weight:500;
  color:var(--muted-foreground);letter-spacing:.01em;
}
.field-opt{font-style:normal;opacity:.7}
.field input,.field textarea{
  width:100%;box-sizing:border-box;
  padding:12px 14px;
  font:inherit;font-size:.9375rem;
  color:var(--foreground);
  background:var(--input,#ffffff0d);
  border:1px solid var(--border);
  border-radius:var(--radius-lg,12px);
  outline:none;
  transition:border-color .15s ease,background-color .15s ease;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.55}
.field input:focus,.field textarea:focus{
  border-color:color-mix(in oklab,var(--primary) 55%,transparent);
  background:color-mix(in oklab,var(--primary) 7%,transparent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-foreground);opacity:.6}

/* off-screen rather than display:none — some bots skip anything hidden */
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.check{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  font-size:.875rem;line-height:1.5;color:var(--muted-foreground);cursor:pointer;
}
/* Drawn rather than left to the browser. accent-color only paints the tick;
   the pressed state and the focus ring stayed the operating system's blue,
   which is what looked wrong against the dark panel. */
.check input{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;margin:1px 0 0;flex:none;
  border:1.5px solid color-mix(in oklab,var(--foreground) 32%,transparent);
  border-radius:6px;
  background:var(--ov-2,#ffffff0d);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .15s ease,border-color .15s ease,scale .1s ease;
}
.check input::after{
  content:"";
  width:10px;height:10px;
  /* the tick as a mask, so it takes the colour rather than carrying its own */
  background:#fff;
  clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,85% 9%,38% 70%);
  scale:0;
  transition:scale .14s cubic-bezier(.22,.61,.36,1);
}
.check input:hover{border-color:color-mix(in oklab,var(--primary) 55%,transparent)}
.check input:active{scale:.94}
.check input:checked{
  background:var(--primary);
  border-color:var(--primary);
}
.check input:checked::after{scale:1}
.check input:focus-visible{
  outline:2px solid color-mix(in oklab,var(--primary) 70%,transparent);
  outline-offset:2px;
}
.check a{color:var(--accent-mid,#9aa5ff);text-decoration:underline;text-underline-offset:3px}

.form-note{
  margin:0;padding:11px 14px;border-radius:var(--radius-lg,12px);
  font-size:.875rem;line-height:1.5;
}
.form-note.is-wait{background:var(--ov-2,#ffffff0d);color:var(--muted-foreground)}
.form-note.is-ok{
  background:color-mix(in oklab,var(--progress,#3fb950) 16%,transparent);
  color:color-mix(in oklab,var(--progress,#3fb950) 72%,var(--foreground));
}
.form-note.is-err{
  background:color-mix(in oklab,var(--destructive,#f85149) 15%,transparent);
  color:color-mix(in oklab,var(--destructive,#f85149) 70%,var(--foreground));
}

.form-actions{margin-top:4px}
.form-actions .btn{width:100%}
.form .btn[disabled]{opacity:.6;pointer-events:none}

@media (max-width:560px){
  .form-row{grid-template-columns:minmax(0,1fr)}
}

.form-captcha{display:flex;justify-content:flex-start;min-height:65px}
.form-captcha iframe{max-width:100%}


/* ---------------------------------- creators block ---------------------------------- */
/* A note under the call to action, and the claim as its own band. Both texts
   were asked for in the header, but five stacked lines under one title stop
   being a hierarchy and become a wall. */
.btn-note{margin-top:12px;font-size:.8125rem;color:var(--muted-foreground)}

.cre-band{
  margin:clamp(30px,3.6vw,46px) 0 clamp(26px,3vw,38px);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,34px);
  border-radius:var(--radius-3xl);
  border:1px solid color-mix(in oklab,var(--primary) 24%,transparent);
  background:
    radial-gradient(90% 130% at 12% 0%,color-mix(in oklab,var(--primary) 20%,transparent),transparent 62%),
    radial-gradient(80% 120% at 92% 100%,color-mix(in oklab,var(--chart-2) 16%,transparent),transparent 60%),
    var(--card);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
  text-align:left;                      /* the header above it is centred */
}
.cre-band .card-ico{margin:0}      /* keeps --accent-icon, light theme included */
.cre-band-claim{
  margin:0;
  font-family:var(--font-sans);font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-weight:500;line-height:1.3;letter-spacing:-.02em;
  color:var(--foreground);
}
.cre-band-text{margin:8px 0 0;color:var(--text-soft);font-size:.9375rem}
@media (max-width:560px){
  .cre-band{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ---------------------------------- contacts popup ---------------------------------- */

/* Two per row. The last block runs the full width: with five of them an odd
   one would otherwise sit in a half-width column next to nothing. */
.contacts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,13px);
  margin-top:16px;
}
.contacts-grid > .cblock:last-child{grid-column:1 / -1}

.cblock{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-content:start;
  padding:clamp(16px,1.8vw,20px);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  background:var(--ov-1);
  transition:border-color .2s ease,background-color .2s ease;
}
.cblock:hover{border-color:var(--ov-5);background:var(--ov-2)}
.cblock-ico{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:var(--radius-lg);
  background:color-mix(in oklab,var(--primary) 15%,transparent);
  color:var(--accent-icon);
}
.cblock-ico .ico{width:22px;height:22px}
.cblock-title{
  margin:0 0 6px;
  font-family:var(--font-sans);font-size:1rem;font-weight:600;letter-spacing:-.01em;
  color:var(--foreground);
}
.cblock-text{margin:0;color:var(--muted-foreground);font-size:.9375rem;line-height:1.6;font-style:normal}
.cname{margin:0 0 8px}
.cname b{color:var(--foreground);font-weight:500}

/* label/value pairs that stay aligned and still wrap on a phone */
.cdl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;font-size:.9375rem}
.cdl dt{color:var(--muted-foreground)}
.cdl dd{margin:0;color:var(--foreground);overflow-wrap:anywhere}
.csub{margin:12px 0 4px;font-size:.8125rem;font-weight:500;color:var(--muted-foreground)}

/* One per line, icon first. A <button> uses this too, so the browser's own
   button chrome has to be reset here. */
/* Stacked like ordinary lines of text, not spaced-out buttons: the gap is
   small on purpose and the row height carries the rhythm.
   The margin reset has to match .modal-body .cmail on specificity, or the
   12px meant for a single link under a paragraph gets added to every row. */
.clinks{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px}
.clinks .cmail,
.modal-body .clinks .cmail{margin-top:0}

/* .modal-body a paints links with --primary for legal prose, and it beats a
   bare .cmail on specificity — which left the <a> items indigo while the
   <button> next to them stayed lighter. Hence .modal-body scoping here.
   --accent-mid is also the readable one: on the card background it measures
   6.98:1 against 3.82:1 for --primary, which is under the 4.5:1 minimum. */
.cmail,
.modal-body .cmail{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:0;border:0;background:none;
  font-family:var(--font-sans);font-size:1rem;font-weight:500;
  text-align:left;cursor:pointer;
  color:var(--accent-mid);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.cmail .ico{width:17px;height:17px}
.cmail:hover,
.modal-body .cmail:hover{color:var(--foreground)}

/* The full-width block has room beside its text, so the icons sit next to it
   rather than adding another row to a popup that is already tall. */
@media (min-width:721px){
  .contacts-grid > .cblock:last-child > div{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(16px,2.4vw,28px);align-items:center;
  }
  .contacts-grid > .cblock:last-child .cblock-title{grid-column:1}
  .contacts-grid > .cblock:last-child .cblock-text{grid-column:1}
  .contacts-grid > .cblock:last-child .csocials{grid-column:2;grid-row:1 / span 2;margin-top:0}
}

.csocials{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.csocials 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;
}
.csocials a:hover{color:#fff;background:var(--gradient);border-color:transparent}
.csocials .ico{width:19px;height:19px}

.chours{margin-top:10px;font-size:.8125rem;color:var(--muted-foreground)}

/* .modal-body underlines links because legal documents are prose. Buttons and
   icon links are not prose. */
.modal-body .csocials a{text-decoration:none}

/* One column below this: two columns of buttons and label/value pairs stop
   fitting long before the modal itself gets narrow. */
@media (max-width:720px){
  .contacts-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .cblock{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* Contacts button in the footer, matching the press-kit one. */
.btn-contacts{
  align-self:flex-start;        /* .footer-col is a flex column — without this
                                   the button would stretch across it */
  margin-top:16px;height:38px;padding-inline:16px;font-size:.875rem;
  color:var(--muted-foreground);
  border-color:var(--border);
  background:transparent;
}
.btn-contacts:hover{color:var(--foreground);background:var(--secondary);border-color:var(--ov-5)}
.btn-contacts .ico{width:17px;height:17px}


/* ---------------------------------- hero mascot ---------------------------------- */
/* The PNG is trimmed flush to his gripping hand — there is no body to the left of
   it — so laying him OVER the front card at its right edge reproduces the render's
   own composition: fingers curling onto the card, the rest of him beside it, and
   nothing to give away that his other half was never drawn. Hence z-index 4 rather
   than tucking him behind: fingers cannot sit on top of a card that is on top of
   them. clip-b is upright and his grip was rendered about 3deg off vertical, so the
   -3deg stands that edge up. The float is clip-b's own, delay and all, so the hand
   never drifts off the card. .hero already clips, so overflowing the column to the
   right costs nothing. */
.hero-bot{
  position:absolute;
  z-index:4;
  left:73%;                 /* the PNG is trimmed flush to his raised hand, so the image's
                               left edge IS the hand. The front card (.clip-b) ends at
                               exactly 76.00% of the stack at every width, so 76.35%
                               (the .35% offsets the rotate(-2deg) below, which swings the
                               hand ~2px left of the element's own edge) puts the hand
                               dead on the rim — and that read as detached, because a
                               touching edge plus his drop-shadow leaves a visible seam.
                               73% lays the hand about 17px onto the card so it rests on
                               the rim. The old 70% was 33px in, which buried the hand and
                               made him look like he was floating inside the card. */
  bottom:2%;
  width:min(40%, calc(50vw - 448px)); /* the stack is right-aligned in a centred shell,
                               so as the window narrows its right edge approaches the
                               viewport twice as fast as the window shrinks. Anchored at
                               the card's rim he would start losing his ring light below
                               ~1332px. Rather than a breakpoint that snaps his size, the
                               second term lets him give up width continuously exactly as
                               fast as the room runs out; above ~1330 the 40% wins and
                               nothing changes. */
  height:auto;
  transform:rotate(-2deg);
  transform-origin:0 45%;
  pointer-events:none;
  filter:drop-shadow(0 24px 48px #000c);
}
@media (prefers-reduced-motion:no-preference){
  .hero-bot{animation:float 7s ease-in-out infinite;animation-delay:-2.4s}
}
/* Below 1200 the stack all but fills the window: its right edge sits ~15px from the
   viewport, so anchoring the fist to the card at 76.35% leaves only ~145px of room to
   his right. He keeps the anchor and gives up the size — being off the card's rim was
   the visible fault, being smaller is not. 25% keeps him clear of the
   viewport edge across the whole band with a dozen pixels of air (checked at 1200, 1100, 1000 and 950). */
@media (max-width:1200px){
  .hero-bot{width:25%}
}
/* Below 900 the layout changes under him: the stack centres itself at up to
   520px and the cards narrow from 52% to 47%, which moves the front card's edge
   — the thing he holds — from 76% of the stack to 71%. The anchor follows it,
   keeping the same 3% overlap the desktop rule uses: sitting flush against the
   edge reads as detached, because his own drop-shadow puts a seam between the
   hand and the card. The fluid width above is calibrated to the desktop column,
   so both values are restated rather than inherited. */
@media (max-width:900px){
  .hero-bot{left:68.4%;width:31%}
}

/* ---------------------------------- support mascot ---------------------------------- */
/* The card is full: icon, eyebrow, title, three lines, two buttons, phone, hours. The
   only free patch is the top right, beside the headset icon, so he sits there and
   rides up over the card's top edge rather than squeezing inside it. The card is
   position:sticky, which is already a positioned ancestor, so he anchors to it and
   travels down the FAQ with it. */
.support-card{isolation:isolate}
.support-bot{
  position:absolute;
  z-index:-1;              /* behind the card's own text, in case of a narrow column */
  top:-70px;
  right:-12px;
  width:150px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 14px 28px #000a);
}
/* Below 900 the FAQ collapses to one column and the card runs full width; he would
   then sit over the heading, so he steps down and in. */
@media (max-width:900px){
  .support-bot{width:112px;top:-52px;right:-4px}
}
@media (max-width:560px){
  .support-bot{display:none}
}

/* ---------------------------------- about mascot ---------------------------------- */
/* Measured rather than guessed: the claim ends 149px above the block's bottom, and
   below the block the next section's heading is centred and starts at x=360, so the
   lower left stays clear. He occupies that L of empty space, overhanging the block's
   bottom edge into it. z-index -1 keeps him under the copy — negative children still
   paint above the parent's background, and above the decorative web, which is also
   -1 but earlier in the markup. */
.about-bot{
  position:absolute;
  z-index:-1;
  left:20px;
  bottom:-60px;
  width:200px;   /* the jump is a square silhouette, so it can be bigger than a
                    standing figure in the same corner */
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 36px #000a);
}
@media (max-width:1100px){
  .about-bot{width:165px;bottom:-48px}
}
/* One column below 900: the copy runs the full width and there is no corner left. */
@media (max-width:900px){
  .about-bot{display:none}
}

/* ---------------------------------- video mascot ---------------------------------- */
/* The band is 1160x200 with the thumbnail left and the copy centre, which leaves the
   right ~400px empty. He leans there. His render was cut along an invisible ledge, so
   that cut is parked on the band's own bottom border and reads as him resting on it
   rather than as a cropped image. The band was static, so it gets position here. */
.video-cta{position:relative}
.video-bot{
  position:absolute;
  z-index:0;
  right:48px;
  /* His body is cut at the ledge, but the hand hangs 7% of the image height below
     that cut. So the image is pushed down by those 7% — the cut lands on the band's
     border and the fingers hang over it, which is what the render actually shows. */
  bottom:-12px;
  width:172px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 12px 26px #000a);
}
@media (max-width:1100px){
  .video-bot{width:140px;right:24px;bottom:-10px}
}
/* The band stacks on a phone and the copy runs under the thumbnail: no corner left. */
@media (max-width:820px){
  .video-bot{display:none}
}

/* ---------------------------------- cta mascot ---------------------------------- */
/* He sits beside the banner, not inside it: the banner clips (overflow:hidden) and the
   button he presses has to hang past its bottom edge. Being outside cost him the
   banner's own entrance animation — .reveal shifts it 18px and slides it back, and the
   two drifted apart while that ran — so he carries the reveal class too and moves with
   it. He is small because the corner is busy: the "talk to a person" link sits right
   above him and must stay readable. */
.cta-shell{position:relative}
.cta-bot{
  position:absolute;
  z-index:0;
  /* Placed so his head laps onto the button's right end. The button runs to 945 and its
     label stops at 888, so the head's left edge at ~905 covers only padding — the words
     and the arrow stay clear. */
  right:47px;
  bottom:-28px;    /* measured for this size: torso cut on the border, button outside */
  width:200px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 12px 26px #0009);
}
/* Below ~1380 the title stops wrapping, the banner loses 62px of height and his head
   would rise into the link, so he is sized down to stay under it. */
@media (max-width:1380px){
  .cta-bot{width:150px;right:24px;bottom:-21px}
}
@media (max-width:1100px){
  .cta-bot{width:118px;right:8px;bottom:-16px}
}
/* The banner stacks below 900 and the button goes full width: no corner left. */
@media (max-width:900px){
  .cta-bot{display:none}
}

/* ---------------------------------- partner mascot ---------------------------------- */
/* He stands on the band's bottom hairline, in the open ground between the "Become an
   affiliate" button and the steps column. This render's torso cut is the bottom edge of
   the file, so no overhang correction is needed. He is anchored to the shell rather than
   the band, so he tracks the content column on any width; the negative bottom repeats
   the section's own vertical padding to reach the band's border. z-index 1 — he paints
   OVER the rule under the 3% block, so that line runs behind him rather than across his
   head; he is placed clear of every piece of text, so nothing else is covered. */
/* isolation matters: position:relative alone does not open a stacking context, so a
   z-index:-1 child falls behind the band's own gradient and disappears. */
.partners{position:relative;isolation:isolate}
.partner-bot{
  position:absolute;
  z-index:1;
  /* Measured, not guessed: behind the button is impossible. To clear his head above
     the button he needs at least 227px of width; to stay clear of the 3% block above he
     needs at most 180px. The ranges do not meet — the gap between them is 55px. He goes
     in the clean strip between the button (ends at 455) and the steps column (starts at
     896) instead. */
  left:455px;
  bottom:calc(-1 * clamp(44px,4.6vw,76px));
  width:180px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 16px 32px #000a);
}
@media (max-width:1100px){
  .partner-bot{width:150px;left:370px}
}
/* One column below 900: the button goes full width and there is no room behind it. */
@media (max-width:900px){
  .partner-bot{display:none}
}

/* ---------------------------------- moderation mascot ---------------------------------- */
/* The block is two columns: a short heading on the left (440x128) and the seven-step
   rail on the right, leaving 440x225 of empty floor under the heading. This block draws
   no lines of its own — .panel-flow has neither background nor border — so his ledge cut
   is parked on the panel's own bottom edge. The cut is the bottom of the file here, so
   no overhang correction is needed. */
/* Anchored to the BAND, not the panel. The visible rule that closes this section is the
   band's own bottom border, and the band's padding puts it 45-75px below the panel
   depending on width — parked on the panel he floated above that line by exactly that
   much. He also had to leave .panel-flow in the markup: that element carries .reveal,
   which applies a translate, and a transform makes an element the containing block for
   absolutely positioned children even while it is position:static — so bottom:0 kept
   resolving against the panel. left is computed from the centre so he still tracks the
   content column: 50% - min(600px,50vw) is the column's left edge, +20px the padding. */
.flow-band{position:relative}
.flow-bot{
  position:absolute;
  z-index:0;
  left:calc(50% - min(600px,50vw) + 120px);
  bottom:-5px;     /* measured in rendered pixels: sits his cut on the band's rule */
  width:240px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 36px #000a);
}
@media (max-width:1100px){
  .flow-bot{width:200px;left:calc(50% - min(600px,50vw) + 100px)}
}
/* One column below 900: the heading and the rail stack, and the floor disappears. */
@media (max-width:900px){
  .flow-bot{display:none}
}

/* The button stack is nudged in from the banner's right edge so the mascot gets a corner
   of its own; without it he had to overlap the "talk to a person" link and stay small.
   translate rather than margin: a margin would take those pixels out of the copy column
   and break the three facts onto two lines each, which grew the banner by 48px. */
.cta-actions{transform:translateX(-100px)}
@media (max-width:1380px){ .cta-actions{transform:translateX(-72px)} }
@media (max-width:1100px){ .cta-actions{transform:translateX(-46px)} }
@media (max-width:900px){ .cta-actions{transform:none} }

/* ---------------------------------- full-service mascot ---------------------------------- */
/* Sized against the title's actual lines, not its box. The box runs to x493, but the
   lines end at 472, 473 and 302 — so below the second line (y166) everything from x302
   to the list at x557 is free, which is far more room than the box suggests. He sits in
   that pocket with his top just under line two. His cut is on the panel's bottom border;
   the panel clips (overflow:hidden), so the few pixels of hand below the cut are taken by
   the border rather than hanging onto the near-black page, which is what went wrong on
   the launch banner. */
.managed-bot{
  position:absolute;
  z-index:0;
  left:404px;
  bottom:-11px;
  width:138px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 10px 22px #0009);
}
/* The title rewraps as the panel narrows and its bottom edge drops onto his head, so he
   steps down a size; below 1100 the button also grows toward him and he moves right. */
@media (max-width:1300px){
  .managed-bot{width:132px;left:352px;bottom:-11px}
}
@media (max-width:1100px){
  .managed-bot{width:112px;left:290px;bottom:-9px}
}
/* Below 900 the panel stacks into one column and the pocket disappears. */
@media (max-width:900px){
  .managed-bot{display:none}
}

/* ---------------------------------- tax mascot ---------------------------------- */
/* The button moves down onto the disclaimer's line and in from the right edge, which
   frees the whole right end of the strip for him. translate rather than margin so the
   body column keeps its width and the paragraph does not rewrap. */
.tax-note{position:relative}
.tax-btn{align-self:end;transform:translateX(-240px)}
.tax-bot{
  position:absolute;
  z-index:0;
  left:970px;
  bottom:-16px;    /* his hand hangs 7.7% below the torso cut; this puts the cut itself
                      on the block's bottom rule */
  width:220px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 14px 30px #000a);
}
@media (max-width:1240px){
  .tax-btn{transform:translateX(-180px)}
  .tax-bot{left:auto;right:-28px;width:190px;bottom:-14px}
}
/* Below 1024 the strip drops the button under the text and there is no corner left. */
@media (max-width:1024px){
  .tax-btn{transform:none;align-self:start}
  .tax-bot{display:none}
}

/* ---------------------------------- vetted mascot ---------------------------------- */
/* The closing card runs full width but is only 153px tall, and both columns are full:
   icon and title to x246, the paragraph from x517. He stands in the pocket between them.
   His torso is cut at 78% of the render and the shield hangs below that, so the cut goes
   on the grid's closing rule and the shield drops past it into the section's padding —
   safe here because the cell above the rule and the page below it are the same tone.
   This is the last cell in the grid, so nothing paints over him. */
.card-adv:last-child{position:relative}
.vetted-bot{
  position:absolute;
  z-index:0;
  left:280px;
  bottom:-55px;    /* measured in rendered pixels, not element geometry: his resting arm
                      sits 14px above the box edge, so the box has to hang that much
                      lower for the arm itself to meet the grid's rule */
  width:182px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 14px 28px #000a);
}
/* The card loses height as the paragraph rewraps, so he steps down with it rather than
   pushing his head through the hairline above. */
@media (max-width:1500px){
  .vetted-bot{width:168px;left:262px;bottom:-51px}
}
@media (max-width:1200px){
  .vetted-bot{width:150px;left:240px;bottom:-46px}
}
/* The grid drops to two columns at 1200 and one below 900; the pocket goes with it. */
@media (max-width:900px){
  .vetted-bot{display:none}
}

/* ─────────────── Creative examples — mascot on the clips strip ───────────────
   He goes on .clips-slider, NOT .clips-strip: the strip is the scroll viewport
   (overflow:auto), so a child there would both be clipped and add phantom scroll
   height. The slider wrapper is already position:relative and overflow:visible.
   The figure is whole: an earlier pass cropped the render to its flat row to get a
   straight bottom edge, and that amputated the fingers of the lowered hand, which
   hang 22px lower. Nothing is cut now — he simply stands BEHIND the strip, and the
   tiles occlude the few pixels that pass their top rule.
   Behind, not in front, for two reasons. A flush butt joint leaves a one-pixel seam
   wherever sub-pixel layout rounds the two edges apart, and an overlap can only hide
   a seam if the tiles paint last. And .clip lifts 4px on hover
   (.clip:has(a.clip-link):hover{transform:translateY(-4px)}), which with him in front
   made his hand climb further onto the tile every time the pointer crossed it; behind,
   the same lift simply tucks him 4px deeper, which reads as depth instead of a glitch.
   Paint order is by DOM: he is z-index:0 and .clip is z-index:auto, so with equal
   levels the later element — the tile — wins. Do NOT give him a positive z-index.
   His base is NOT a straight line, and no amount of sinking closes it: wherever the
   silhouette meets the tiles' top rule at a shallow angle, antialiasing leaves a
   hairline of page background between the two, and sinking him further only slides
   that hairline along the contour. So the asset itself is bled: every column whose
   silhouette already reaches the base has its last opaque pixel repeated 44 rows
   downward (784x724 -> 784x768). Those rows live behind the tiles and are never seen;
   they only guarantee that no column can expose background above the rule. The 314
   columns of genuine open air between the camera post and the body are left alone —
   bleeding those would hang visible streaks in the gap.
   Offset: the flat row sits 67/768 = 8.724% of the image height above its bottom, and
   a percentage translateY resolves against the element's OWN height, so that part
   rescales itself at every breakpoint; the +8px on top is the overlap, kept constant
   in pixels because a seam is a pixel problem, not a proportional one.
   The 2px is the strip's padding: the tiles start two pixels inside it.
   He is turned to his right and looks back across the empty half of the header. */
.creat-bot{
  position:absolute;
  z-index:0;                /* must stay 0: see the paint-order note above */
  right:56px;               /* NOT flush with the strip: a tile's top-right corner is
                               rounded, and with him flush his arm overhung that curve
                               and hung in open background. 60px puts his whole base
                               inside the tile's straight top edge. */
  bottom:calc(100% - 2px);
  transform:translateY(calc(8.724% + 14px)); /* 8.724% brings the flat row down to the
                                               tiles' top rule; the 14px sinks it past.
                                               See the bleed note above for why 8 is now
                                               enough where 18 was not. */
  width:264px;              /* 250 plus the 14px that the deeper sink now buries, so the
                               visible figure stays the size it was on screen */
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 24px #0009);  /* short throw: the tiles begin the pixel
                                            below his cut, so a long shadow would land
                                            on the first frame of a clip, not on the page */
}
/* The headline rewraps as the shell narrows and its first line reaches further right,
   so he gives ground rather than colliding with it. */
@media (max-width:1500px){
  .creat-bot{width:245px}
}
@media (max-width:1280px){
  .creat-bot{width:222px}
}
/* Below this the title takes the full width of the shell and the pocket is gone. */
@media (max-width:1080px){
  .creat-bot{display:none}
}

/* ─────────────────── the eye beside a creative's view count ───────────────────
   .clip-views is a small pill, so the icon sits inline with the digits rather
   than beside the pill. 13px, not the sprite's usual 16: at the pill's .75rem
   the full-size icon out-weighs the number it belongs to. The slight fade
   keeps it a unit label instead of a second thing to read. */
.clip-views{display:inline-flex;align-items:center;gap:5px}
.clip-views .clip-eye{width:13px;height:13px;flex:none;opacity:.78}

/* ─────────────────── Creative examples — filter by network ───────────────────
   A row of buttons over the strip. The count on each one is the point: it says
   what the button will do before it is pressed, which a bare icon cannot.
   Sized off the same tokens as the rest of the page so it reads as part of the
   section rather than as a control panel bolted on top of it. */
.clip-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  /* No padding of its own: unlike .clips-slider, which sits directly in the
     section and pads itself, this bar lives inside .shell and inherits the
     gutter from there. Adding it twice pushed the row 20px right of the
     headline it belongs to. */
}
.clip-filter{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in oklab,var(--card) 92%,transparent);
  color:var(--muted-foreground);
  font-family:var(--font-sans);
  font-size:.8125rem;
  font-weight:500;
  cursor:pointer;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.clip-filter:hover{color:var(--foreground);border-color:var(--ov-7)}
.clip-filter .ico{width:16px;height:16px}
/* aria-pressed is the state; .is-on only exists so the first paint is already
   correct before the script has run. */
.clip-filter.is-on,
.clip-filter[aria-pressed="true"]{
  color:var(--foreground);
  background:var(--secondary);
  border-color:var(--ov-7);
}
.clip-filter:focus-visible{outline:2px solid var(--accent-icon);outline-offset:2px}

/* Hidden by the filter. display:none rather than visibility, so the tile gives
   up its width and the row closes the gap instead of leaving a hole. */
.clips-track .clip[hidden]{display:none}

@media (max-width:520px){
  .clip-filters{margin-bottom:16px}
  .clip-filter{padding:6px 11px}
}

/* The script hides him with the hidden attribute when the row of tiles no
   longer reaches under him. That attribute alone is not enough here: the reset
   in styles.css sets img,svg{display:block}, and an author rule beats the
   browser's own [hidden]{display:none} whatever their specificities. Without
   this line the attribute is set, reads as set, and changes nothing on screen. */
.creat-bot[hidden]{display:none}

/* ─────────────── Creative examples — the "launch a campaign" tile ───────────────
   Same .clip box as every creative beside it, so it keeps the row's rhythm; the
   only thing that sets it apart is that it is the one saturated panel among
   photographs. That contrast is the whole design — no border, no badge, no
   shout is needed on top of it. */
.clip-cta{
  background:var(--gradient);
  border-color:transparent;
}
.clip-cta-in{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
  padding:24px 22px;
  color:#fff;
}
/* A wash from the top keeps white text legible over the lighter end of the
   gradient without flattening the colour that makes the tile work. */
.clip-cta-in::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0b0b1000 30%,#0b0b1040 100%);
  pointer-events:none;
}
.clip-cta-in > *{position:relative}
.clip-cta-eyebrow{
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.72;
}
.clip-cta-title{
  margin:0;
  font-family:var(--font-display,var(--font-sans));
  font-size:clamp(1.15rem,1.55vw,1.4rem);
  line-height:1.22;
  font-weight:600;
  text-wrap:balance;
}
/* White on the brand colour, the inverse of .btn-primary elsewhere: on this
   tile the accent is already the background, so the button has to step out of
   it rather than repeat it. */
.btn-cta-tile{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  color:#1b1b2b;
  font-family:var(--font-sans);
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}
.btn-cta-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0000004d}
.btn-cta-tile .ico{width:16px;height:16px}
.clip-cta:hover{transform:none}   /* the row's lift belongs to real creatives */

@media (max-width:520px){
  .clip-cta-in{padding:20px 18px;gap:10px}
}

/* ─────────────── Creative examples — the note under the carousel ───────────────
   A caveat, so it is quiet: muted, small, and capped in width so it reads as a
   footnote to the row rather than as a second paragraph of the section. The
   margin above it is larger than the one below, which ties it to the carousel
   it qualifies instead of to the section that follows. */
.clips-note{
  margin:22px 0 0;
  max-width:62ch;
  font-family:var(--font-sans);
  font-size:.8125rem;
  line-height:1.6;
  color:var(--muted-foreground);
}
@media (max-width:520px){
  .clips-note{margin-top:18px;font-size:.78125rem}
}

/* Icons only once the page is in its mobile layout. 900 rather than a width
   picked from where the pills happen to wrap: that is the breakpoint at which
   this site becomes the mobile site — the hero restacks there too — so "on a
   phone" means the same thing everywhere instead of meaning something slightly
   different in each rule. The four marks are about as recognisable as marks
   get, so nothing is lost. "All" keeps its word: it has no icon to fall back on. */
@media (max-width:900px){
  .clip-filter .clip-filter-label{display:none}
  .clip-filter{padding:8px 11px}          /* square up once the label is gone */
  .clip-filter[data-net="all"]{padding:8px 14px}
  .clip-filter .ico{width:17px;height:17px}
}

/* ─────────────── the play affordance on a creative tile ───────────────
   Brought into line with .video-play on the explainer block, which was thought
   through properly and this one was not.

   The difference that matters is the blur. styles.css gives .clip-play a
   backdrop-filter, and these covers are the worst possible place for one: they
   are screenshots with burned-in captions and channel bugs, and the blur smears
   exactly the words the tile is there to show. The player's answer is better —
   a nearly transparent fill, a white hairline to hold the shape, and a glyph
   carrying its own shadow so it survives on a pale frame too.

   The behaviour stays as it was: this appears on hover, because a tile's action
   is to open the post, not to play in place. Only the look is shared. */
.clip-play{
  background:#0b0b1038;
  border:1px solid #ffffff85;   /* a shade stronger than the player's: this
                                   button is 52px against its 58 and sits on a
                                   busier frame, so the hairline needs the help */
  box-shadow:0 2px 14px -4px #0b0b1099;
  transition:opacity .2s ease,scale .22s cubic-bezier(.22,.61,.36,1),background-color .22s ease;
}
@supports (backdrop-filter:blur(1px)){
  .clip-play{backdrop-filter:none}   /* undoes the rule in styles.css */
}
.clip-play .ico{filter:drop-shadow(0 1px 2px #0b0b10) drop-shadow(0 0 6px #0b0b10b3)}

/* The accent fill on hover, exactly as .video-thumb:hover .video-play does it,
   down to the 1.08. In the player the lilac answers a pointer on the COVER, not
   on the button — so carried across to a tile it means: pointer on the tile,
   button appears and is lilac. Same gesture, same answer.
   The see-through treatment above is therefore what the button looks like while
   it fades in, and on touch screens, where there is no hover to answer. */
.clip:hover .clip-play,
.clip-link:focus-visible .clip-play{
  background:var(--primary);
  border-color:transparent;
  scale:1.08;
}

/* Nothing hovers on a touch screen, so on a phone this button existed in the
   stylesheet and never once appeared. Shown there by default — quieter than on
   hover, since it is not answering a gesture, just saying the tile is live. */
@media (hover:none){
  .clip-play{opacity:1;scale:1;background:#0b0b1038}
}


/* ------------------------------------------------ formats: "Published on" */
/* Set in the same pill as the two shapes beside it, so the row reads as three
   facts of one kind instead of two pills and a stray caption. The icons take
   the accent the ratio frames use. */
.shape-nets{gap:10px}
.shape-nets .net-icons{gap:8px;color:var(--accent-icon)}
.shape-nets .ico-sm{width:16px;height:16px}

/* ---------------------------------- video dialog size ---------------------------------- */
/* .modal is declared after .modal-video in styles.css and was capping the video
   at the legal-modal width (760px). The video dialog grows with the screen, but
   never taller than the viewport: its width is also limited by the height left
   for a 16:9 frame under the 81px header. */
.modal.modal-video{
  width:min(1280px, calc(100vw - 64px), calc((100vh - 81px - 48px) * 16 / 9));
  max-width:none;
  max-height:calc(100vh - 48px);
}
@media (max-width:760px){
  .modal.modal-video{width:100vw;max-height:92vh}
  .modal-video .modal-head{padding:12px 14px 12px 18px;gap:12px}
  .modal-video .modal-head .h3{font-size:1rem;line-height:1.3}
}


/* ---------------------------------- support chat: Rebeca ---------------------------------- */
/* The veil behind the open chat: blurs and dims the site, like a popup's
   backdrop. No opacity fade on purpose — Safari drops backdrop-filter on an
   element whose opacity is below 1 or animating, so the chat came up with no
   blur there. The blur and the tint are faded in themselves instead. */
.schat-veil{position:fixed;inset:0;z-index:109;pointer-events:none;
  background:rgba(11,11,16,0);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background-color .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease}
.schat-veil.is-on{pointer-events:auto;background:rgba(11,11,16,.55);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
:root[data-theme="light"] .schat-veil.is-on{background:rgba(20,20,30,.28)}
/* The robot button in the bottom-right corner and the chat window it opens.
   It steps aside while the cookie banner is up, so the two never overlap. */
.support-fab{
  position:fixed;z-index:110;
  right:max(20px,calc(env(safe-area-inset-right,0px) + 16px));
  bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 16px));
  width:64px;height:64px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:var(--gradient);
  box-shadow:0 18px 40px -12px color-mix(in oklab,var(--primary) 75%,transparent), 0 0 0 1px rgba(255,255,255,.1) inset;
  opacity:0;transform:translateY(16px) scale(.9);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.support-fab.is-in{opacity:1;transform:none}
/* while the chat is open, its window covers this corner and has its own ×, so the button steps away */
.support-fab.is-in.is-open{opacity:0;pointer-events:none;transform:translateY(12px) scale(.8)}
.support-fab .fab-ic{display:grid;place-items:center;transition:opacity .2s, transform .25s}
.support-fab .fab-ic svg{width:44px;height:44px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.support-fab .fab-x{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotate(-60deg) scale(.6);
  transition:opacity .2s, transform .25s}
.support-fab .fab-x .ico{width:26px;height:26px}
.support-fab.is-open .fab-ic{opacity:0;transform:rotate(60deg) scale(.6)}
.support-fab.is-open .fab-x{opacity:1;transform:none}
.support-fab .fab-dot{position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px var(--background);transition:opacity .2s}
.support-fab.is-open .fab-dot{opacity:0}
.support-fab:hover{transform:translateY(-2px)}
.support-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.support-fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--primary) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .support-fab.is-in:not(.is-open)::after{animation:fab-ring 2.4s ease-out 1.2s 3}
}
@keyframes fab-ring{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--primary) 55%,transparent)}
  100%{box-shadow:0 0 0 18px color-mix(in oklab,var(--primary) 0%,transparent)}}
.support-fab::before{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;
  translate:0 -50%;white-space:nowrap;pointer-events:none;padding:8px 12px;border-radius:10px;
  font-size:.875rem;font-weight:500;color:var(--foreground);background:var(--card);border:1px solid var(--border);
  box-shadow:0 12px 30px -12px var(--shadow-strong);opacity:0;transition:opacity .18s ease}
@media (hover:hover){ .support-fab:not(.is-open):hover::before{opacity:1} }
.cookie:not([hidden]) ~ .support-fab{opacity:0;pointer-events:none;transform:translateY(16px) scale(.9)}

.schat{
  position:fixed;z-index:111;
  right:max(20px,calc(env(safe-area-inset-right,0px) + 16px));
  bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 16px));   /* sits where the button is */
  width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 110px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:24px;
  box-shadow:0 40px 90px -30px var(--shadow-strong), 0 0 0 1px rgba(255,255,255,.03);
  opacity:0;transform:translateY(14px) scale(.97);transform-origin:bottom right;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.schat.is-open{opacity:1;transform:none}
.schat[hidden]{display:none}
.schat-h{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-bottom:1px solid var(--border);flex:none}
.schat-av{width:40px;height:40px;border-radius:50%;flex:none}
.schat-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.schat-who b{font-size:.9375rem;font-weight:600;color:var(--foreground)}
.schat-who small{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schat-who small i{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none}
.schat-x{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:0;
  background:transparent;color:var(--muted-foreground);cursor:pointer;flex:none}
.schat-x:hover{background:var(--secondary);color:var(--foreground)}
.schat-x .ico{width:18px;height:18px}
.schat-body{flex:1;min-height:0;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.schat-msg{display:flex;align-items:flex-end;gap:8px;max-width:88%;opacity:0;transform:translateY(8px);
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1)}
.schat-msg.is-in{opacity:1;transform:none}
.schat-msg img{width:28px;height:28px;border-radius:50%;flex:none}
.schat-b{padding:10px 13px;border-radius:18px;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}
.schat-msg.bot .schat-b{background:var(--secondary);color:var(--foreground);border-bottom-left-radius:6px}
.schat-msg.me{align-self:flex-end}
.schat-msg.me .schat-b{background:var(--gradient);color:#fff;border-bottom-right-radius:6px}
.schat-msg .muted{opacity:.75;font-style:italic}
.schat-consent{display:block;margin-top:8px;font-size:.75rem;line-height:1.4;color:var(--muted-foreground)}
.schat-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dots{display:inline-flex;gap:4px;padding:3px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground);opacity:.4;animation:dot 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.schat-quick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:0 14px 10px;flex:none}
.schat-quick[hidden]{display:none}
/* options are dashed, outlined and carry an icon — the filled gradient is kept
   for the visitor's own messages, so a choice never looks like a sent reply */
.schat-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px 0 12px;border-radius:99px;
  border:1.5px dashed color-mix(in oklab,var(--primary) 60%,transparent);
  background:color-mix(in oklab,var(--primary) 7%,transparent);
  color:var(--foreground);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s}
.schat-chip svg{width:16px;height:16px;flex:none;color:var(--primary)}
.schat-chip:hover{background:color-mix(in oklab,var(--primary) 16%,transparent);border-style:solid}
.schat-chip:active{transform:scale(.96)}
.schat-chip.is-on{border-style:solid;border-color:var(--primary);background:color-mix(in oklab,var(--primary) 26%,transparent)}
.schat-chip.is-on svg{color:#fff}
.schat-chip:disabled{opacity:.45;cursor:default}
/* the one action that moves the chat on (Send, Done): filled, so it stands out */
.schat-chip.is-primary{border:0;background:var(--primary);color:#fff;font-weight:600;padding:0 18px 0 14px;
  box-shadow:0 10px 24px -10px color-mix(in oklab,var(--primary) 90%,transparent)}
.schat-chip.is-primary svg{color:#fff}
.schat-chip.is-primary:hover{background:color-mix(in oklab,var(--primary) 85%,#fff)}
.schat-chip.is-primary:disabled{background:color-mix(in oklab,var(--primary) 35%,transparent);box-shadow:none;opacity:.7}
.schat-in{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-top:1px solid var(--border);flex:none}
.schat-in input{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:99px;border:1px solid var(--border);
  background:var(--background);color:var(--foreground);font:inherit;font-size:16px;outline:none}
.schat-in input:focus{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.schat-send{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;flex:none;
  background:var(--gradient);color:#fff;cursor:pointer}
.schat-send .ico{width:20px;height:20px}
.schat-in.is-off{opacity:.5}
.schat-in.is-off input,.schat-in.is-off .schat-send{cursor:default}
.schat-ts{flex:none;padding:0 14px}
.schat-ts:empty{display:none}
@media (max-width:640px){
  .support-fab{width:58px;height:58px}
  /* on a phone the open chat takes the bottom of the screen and has its own ×,
     so the round button steps out of the way instead of showing a second one */
  .schat{right:8px;left:8px;width:auto;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) + 6px));
    height:min(620px,calc(100dvh - 72px))}
}
@media (max-width:640px){ .support-fab .fab-ic svg{width:40px;height:40px} }


/* ---------------------------------- robots that talk ---------------------------------- */
/* Hover near one of the robots and it says something about its section, in a
   chat bubble: three dots first, then the line. Desktop pointers only. */
/* top/left 0 until the script places it: left in the flow position it sat
   under the footer and added an empty strip at the very bottom of the page */
.bot-tip{position:absolute;top:0;left:0;z-index:105;max-width:270px;padding:11px 14px;border-radius:18px;
  background:var(--card);border:1px solid var(--border);color:var(--foreground);
  font-size:.875rem;line-height:1.45;box-shadow:0 22px 50px -18px var(--shadow-strong);
  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(6px) scale(.96);
  transition:opacity .18s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear .25s}
.bot-tip.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.bot-tip.to-left{border-bottom-right-radius:6px;transform-origin:bottom right}
.bot-tip.to-right{border-bottom-left-radius:6px;transform-origin:bottom left}
.bot-tip .dots{display:inline-flex;gap:4px;padding:3px 0}
.bot-tip .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground);animation:dot 1.1s infinite}
.bot-tip .dots i:nth-child(2){animation-delay:.15s}.bot-tip .dots i:nth-child(3){animation-delay:.3s}
.bot-tip b{display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;color:var(--primary)}


/* ---------------------------------- press kit viewer ---------------------------------- */
.modal.modal-pdf{width:min(1040px,calc(100vw - 40px));height:min(92vh,1200px);max-height:none}
.modal-pdf .modal-head{gap:12px}
.modal-pdf .pdf-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the viewer controls sit together in one outlined group, apart from the close button */
.pdf-tools{display:flex;align-items:center;gap:2px;flex:none;padding:2px;border:1px solid var(--border);border-radius:12px}
.pdf-tools .pdf-btn{border-radius:9px}
.modal-pdf .modal-head .modal-close{margin-left:6px}
.pdf-count{min-width:56px;padding:0 6px;text-align:center;font-size:.875rem;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
/* same size and look as the close button: 32px, no border */
.pdf-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:10px;border:0;
  background:transparent;color:var(--muted-foreground);cursor:pointer;transition:background-color .18s ease,color .18s ease}
.pdf-btn:hover{background:var(--secondary);color:var(--foreground)}
.pdf-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pdf-btn .ico{width:18px;height:18px}
.pdf-body{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;background:color-mix(in oklab,var(--background) 70%,#000);padding:16px}
.pdf-body.is-zoomed{overflow-x:auto}
.pdf-pages{width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.pdf-page{width:100%;background:#1a1a22;border-radius:6px;overflow:hidden;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.pdf-page canvas{display:block;width:100%;height:100%}
.pdf-frame{display:block;width:100%;height:100%;border:0;min-height:70vh;background:#fff}
.pdf-wait{position:absolute;inset:0;display:none;place-items:center}
.modal-pdf.is-loading .pdf-wait{display:grid}
.pdf-wait .dots i{width:9px;height:9px}
@media (max-width:640px){
  .modal.modal-pdf{width:100vw;height:92dvh;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;margin-bottom:0}
  .pdf-body{padding:8px}
  .pdf-pages{gap:8px}
  .pdf-count{min-width:48px;font-size:.8125rem}
  .modal-pdf .pdf-title{font-size:1rem}
}
.pdf-body:focus{outline:none}
/* thin 5px scrollbar in the viewer */
.pdf-body{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
.pdf-body::-webkit-scrollbar{width:5px;height:5px}
.pdf-body::-webkit-scrollbar-track{background:transparent}
.pdf-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:5px;border:0}
.pdf-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}

/* logo downloads: a fixed strip at the bottom of the viewer, always in view */
.pdf-logos{flex:none;display:flex;align-items:center;gap:18px;padding:16px 22px;border-top:1px solid var(--border);background:var(--card)}
.modal-pdf.is-loading .pdf-logos{visibility:hidden}
.pdf-logos h4{margin:0;font-size:1rem;font-weight:600;color:var(--foreground);white-space:nowrap}
.pdf-logos-grid{display:flex;gap:12px;min-width:0}
.pdf-logo{margin:0;display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;border:1px solid var(--border);border-radius:12px}
.pdf-logo-view{width:184px;height:72px;border-radius:8px;display:grid;place-items:center;flex:none}
.pdf-logo-view img{max-width:124px;max-height:36px;width:auto;height:auto}
.pdf-logo.is-dark .pdf-logo-view{background:#14141a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pdf-logo.is-light .pdf-logo-view{background:#fff}
.pdf-logo-links{display:flex;flex-direction:column;gap:6px;flex:none}
.pdf-logo-links a{padding:6px 12px;border-radius:8px;font-size:.8125rem;font-weight:600;line-height:1.2;text-align:center;color:var(--foreground);background:var(--secondary);transition:background-color .18s ease,color .18s ease}
.pdf-logo-links a:hover{background:var(--primary);color:#fff}
.pdf-logos-all{margin-left:auto;min-height:44px;padding:0 18px;font-size:.875rem;gap:8px;flex:none}
.pdf-logos-all .ico{width:18px;height:18px}
@media (max-width:980px){
  .pdf-logos h4{display:none}
  .pdf-logo-view{width:150px}
}
@media (max-width:760px){
  .pdf-logos{flex-wrap:wrap;gap:10px;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .pdf-logos-grid{flex:1 1 100%;gap:10px}
  .pdf-logo{flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:8px;padding:6px}
  .pdf-logo-view{width:auto;height:64px}
  .pdf-logo-view img{max-width:70%;max-height:28px}
  .pdf-logo-links{flex-direction:row;gap:6px}
  .pdf-logo-links a{flex:1;padding:8px 0}
  .pdf-logos-all{margin-left:0;flex:1 1 100%;justify-content:center;min-height:42px}
}

/* company block at the end of the legal documents (main.js requisites()) */
.legal-req{margin:18px 0 8px;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:color-mix(in oklab,var(--card) 70%,var(--background))}
.legal-req-name{margin:0 0 10px!important;font-weight:600;color:var(--foreground)!important}
.legal-req dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.legal-req dt{color:var(--muted-foreground)}
.legal-req dd{margin:0;color:var(--foreground);overflow-wrap:anywhere}
.legal-req a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 35%,transparent);text-underline-offset:3px}
@media (max-width:560px){.legal-req dl{grid-template-columns:1fr;gap:0}.legal-req dd{margin-bottom:8px}}

/* ---------------------------------- contacts popup: form + direct channels ---------------------------------- */
.modal.modal-contacts{width:min(1120px,calc(100vw - 40px));max-height:min(92vh,980px)}
.modal-contacts .modal-body{padding:0}
.cx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.cx-form{position:relative;padding:26px 28px 28px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.cx-form::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0 0,color-mix(in oklab,var(--primary) 16%,transparent),transparent 60%);pointer-events:none}
.cx-form > *{position:relative}
.modal-body .cx-title{margin:0;font-size:1.5rem;font-weight:700;color:var(--foreground)}
.modal-body .cx-sub{margin:-4px 0 4px;display:flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--muted-foreground)}
.cx-sub i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;flex:none}
.cx-seg{display:flex;gap:6px;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--background)}
.cx-seg label{flex:1;position:relative;cursor:pointer}
.cx-seg input{position:absolute;opacity:0;pointer-events:none}
.cx-seg span{display:block;text-align:center;padding:9px 6px;border-radius:10px;font-size:.9375rem;color:var(--muted-foreground);transition:background-color .18s ease,color .18s ease}
.cx-seg input:checked + span{background:var(--primary);color:#fff;font-weight:600}
.cx-seg input:focus-visible + span{outline:2px solid var(--ring);outline-offset:2px}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-row[hidden],.cx-f[hidden]{display:none}
.cx-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-f > span{font-size:.8125rem;color:var(--muted-foreground)}
.cx-f input,.cx-f select,.cx-f textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--background);color:var(--foreground);font:inherit;font-size:.9375rem;padding:11px 13px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.cx-f textarea{resize:vertical;min-height:104px}
.cx-f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted-foreground) 50%),linear-gradient(135deg,var(--muted-foreground) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.cx-f input:focus,.cx-f select:focus,.cx-f textarea:focus{border-color:color-mix(in oklab,var(--primary) 70%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 20%,transparent)}
.cx-f input::placeholder,.cx-f textarea::placeholder{color:color-mix(in oklab,var(--muted-foreground) 70%,transparent)}
.cx-check{font-size:.8125rem}
.cx-send{width:100%;margin-top:2px;background:var(--gradient);border:0}
.cx-send:disabled{opacity:.7}

.cx-side{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px}
.modal-body .cx-lab{margin:4px 0 0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-mid)}
.modal-body a.cx-ch{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--border);border-radius:16px;background:var(--secondary);color:var(--foreground);text-decoration:none;transition:border-color .18s ease,background-color .18s ease}
.modal-body a.cx-ch:hover{border-color:color-mix(in oklab,var(--primary) 55%,transparent)}
.cx-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in oklab,var(--primary) 16%,transparent);color:var(--accent-mid)}
.cx-ic .ico{width:19px;height:19px}
.cx-tg .cx-ic{background:rgba(41,182,246,.15);color:#3fb7f0}
.cx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-t b{font-size:.9375rem;font-weight:600;overflow-wrap:anywhere}
.cx-t small{font-size:.8125rem;color:var(--muted-foreground)}
.cx-ar{flex:none;width:16px;height:16px;color:var(--muted-foreground)}
.modal-body a.cx-phone.is-live{border-color:rgba(34,197,94,.4)}
.cx-phone.is-live .cx-status{color:#22c55e}
.cx-soc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.modal-body .cx-soc a{display:grid;place-items:center;height:40px;border:1px solid var(--border);border-radius:12px;color:var(--muted-foreground);text-decoration:none;transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.modal-body .cx-soc a:hover{color:#fff;background:var(--gradient);border-color:transparent}
.cx-soc .ico{width:18px;height:18px}
.cx-req{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;margin:0;padding:14px 16px;border:1px dashed var(--border);border-radius:16px;font-size:.8125rem}
.cx-req dt{color:var(--muted-foreground)}
.cx-req dd{margin:0;color:var(--foreground);overflow-wrap:anywhere}

@media (max-width:860px){
  .modal.modal-contacts{width:100vw}
  .cx{grid-template-columns:minmax(0,1fr)}
  .cx-form{border-right:0;border-bottom:1px solid var(--border);padding:20px 18px}
  .cx-side{padding:20px 18px 24px}
}
@media (max-width:480px){
  .cx-row{grid-template-columns:minmax(0,1fr)}
  .cx-req{grid-template-columns:minmax(0,1fr);gap:0}
  .cx-req dd{margin-bottom:6px}
}

.cx-press{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 14px;border:1px solid var(--border);border-radius:16px;background:var(--secondary)}
.modal-body a.cx-press-mail{flex:1;min-width:0;display:flex;align-items:center;gap:14px;color:var(--foreground);text-decoration:none}
.modal-body a.cx-press-mail:hover b{color:var(--accent-mid)}
.modal-body a.cx-kit{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;font-size:.8125rem;color:var(--foreground);text-decoration:none;transition:border-color .18s ease,background-color .18s ease}
.modal-body a.cx-kit:hover{border-color:color-mix(in oklab,var(--primary) 55%,transparent);background:color-mix(in oklab,var(--primary) 10%,transparent)}
.cx-kit .ico{width:15px;height:15px;color:var(--accent-mid)}
/* "Write to us" popup: the contacts request form on its own */
#contactModal .modal-body.cx-solo{padding:0}
.cx-solo .cx-form{border-right:0;border-bottom:0}
.cx-solo .cx-title{display:none}
/* documents popup: company details at the bottom, same block as in contacts */
.docs-req{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.docs-req-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.docs-req-cols .cx-req{align-content:start}
/* contacts: bank name and SWIFT share one line */
.cx-bank{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.cx-swift i{font-style:normal;color:var(--muted-foreground);margin-right:4px}

/* ============================================================ calculator */
.calc{max-width:1000px;margin:clamp(28px,3vw,40px) auto 0;padding:clamp(16px,2vw,22px);border:1px solid var(--border);border-radius:28px;background:var(--card);box-shadow:0 30px 80px -50px color-mix(in oklab,var(--primary) 60%,transparent)}
.calc-seg{display:flex;gap:6px;width:max-content;max-width:100%;margin:0 auto 18px;padding:5px;border:1px solid var(--border);border-radius:16px;background:var(--background)}
.calc-seg button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:12px;background:none;color:var(--muted-foreground);font:inherit;font-size:.9375rem;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.calc-seg button .ico{width:18px;height:18px}
.calc-seg button[aria-selected="true"]{background:var(--primary);color:#fff;font-weight:600}
.calc-seg button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,2vw,22px)}
.calc-grid[hidden]{display:none}
.calc-in{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(8px,1.6vw,18px)}
.calc-f{display:flex;flex-direction:column;gap:12px}
.calc-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.9375rem;color:var(--muted-foreground)}
.calc-l output{font-family:var(--font-sans);font-size:1.375rem;font-weight:600;color:var(--foreground);font-variant-numeric:tabular-nums}
.calc-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted-foreground)}
.calc-scale i{font-style:normal}
.calc input[type=range]{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;margin:0;cursor:pointer;background:linear-gradient(90deg,var(--primary),#8b5cf6) 0 0/var(--p) 100% no-repeat,var(--secondary)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px color-mix(in oklab,var(--primary) 30%,transparent),0 4px 12px #0006;transition:box-shadow .18s ease}
.calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px color-mix(in oklab,var(--primary) 30%,transparent),0 4px 12px #0006}
.calc input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 9px color-mix(in oklab,var(--primary) 35%,transparent),0 4px 12px #0006}
.calc input[type=range]:focus-visible{outline:2px solid var(--ring);outline-offset:6px}
.calc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-stats div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--background)}
.calc-stats span{font-size:.8125rem;color:var(--muted-foreground)}
.calc-stats b{font-family:var(--font-sans);font-size:1.5rem;font-weight:600}
.calc-stats em{font-style:normal;font-variant-numeric:tabular-nums}
.calc-out{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:clamp(22px,2.6vw,32px);border-radius:22px;color:#fff;
  background:radial-gradient(110% 140% at 0% 0%,#6d7cff 0%,transparent 58%),radial-gradient(90% 120% at 100% 110%,#8b5cf6 0%,transparent 55%),linear-gradient(135deg,#3f4ae0 0%,#2e2a6b 60%,#221f45 100%)}
.calc-cap{margin:0;font-size:.9375rem;color:#ffffffc7}
.calc-big{margin:0;font-family:var(--font-sans);font-size:clamp(2.6rem,5.2vw,3.75rem);line-height:1.05;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.calc-sm{margin:0 0 14px;font-size:.875rem;color:#ffffffb8}
.calc-sm b{color:#fff;font-weight:600}
.calc-cta{width:100%;justify-content:center;background:#fff;color:#2e2a6b;border:0}
.calc-cta:hover{background:#eef0ff;color:#2e2a6b}
.calc-cta .ico{color:#4c5bf0}
.calc-self{align-self:center;margin-top:6px;font-size:.875rem;color:#ffffffd1;text-decoration:none}
.calc-self:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.calc-note{margin:14px 4px 2px;text-align:center;font-size:.8125rem;color:var(--muted-foreground)}
@media (max-width:760px){
  .calc{border-radius:22px}
  .calc-grid{grid-template-columns:minmax(0,1fr)}
  .calc-seg{width:100%}
  .calc-seg button{flex:1;justify-content:center;padding:10px 8px}
}

/* ============================================================ newsletter band */
.nl{position:relative;overflow:hidden;color:#fff;padding-block:clamp(44px,5vw,72px);
  background:radial-gradient(60% 140% at 0% 0%,#6d7cff 0%,transparent 60%),radial-gradient(50% 140% at 100% 100%,#8b5cf6 0%,transparent 60%),linear-gradient(135deg,#3f4ae0 0%,#33307a 55%,#26224f 100%)}
.nl-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
:root .nl .eyebrow{color:#ffffffa6}
:root .nl .nl-title{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;margin-top:10px}
.nl-text{margin:14px 0 0;max-width:52ch;color:#ffffffd1;font-size:1.0625rem;line-height:1.55}
.nl-form{display:flex;flex-direction:column;gap:14px}
.nl-row{display:flex;gap:8px;padding:6px;border-radius:16px;background:#ffffff1f;border:1px solid #ffffff33;backdrop-filter:blur(6px)}
.nl-row input{flex:1;min-width:0;border:0;background:none;color:#fff;font:inherit;font-size:1rem;padding:12px 14px;outline:none}
.nl-row input::placeholder{color:#ffffffa6}
.nl-row:focus-within{border-color:#ffffff80;box-shadow:0 0 0 3px #ffffff26}
.nl-btn{flex:none;align-self:stretch;height:auto;background:#fff;color:#2e2a6b;border:0;border-radius:12px;padding:12px 20px;font-weight:600}
.nl-btn:hover{background:#eef0ff;color:#2e2a6b}
.nl-btn:disabled{opacity:.7}
:root .nl-check{color:#ffffffc7;font-size:.8125rem}
:root .nl-check a{color:#fff}
.nl-check input{border-color:#ffffff66;background:#ffffff14}
.nl-note{margin:0;padding:10px 14px;border-radius:12px;font-size:.875rem;background:#ffffff1f}
.nl-note.is-ok{background:#22c55e33}
.nl-note.is-err{background:#ef444440}
@media (max-width:760px){
  .nl-inner{grid-template-columns:minmax(0,1fr)}
  .nl-row{flex-direction:column}
  .nl-btn{width:100%}
}
/* creative filters: how many of each */
.clip-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;margin-left:2px;border-radius:99px;background:var(--ov-7,#ffffff14);color:var(--muted-foreground);font-size:.75rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.clip-filter.is-on .clip-count,.clip-filter[aria-pressed="true"] .clip-count{background:var(--primary);color:#fff}
@media (max-width:900px){
  .clip-filter{gap:5px;padding:7px 8px 7px 10px}
  .clip-filter[data-net="all"]{padding:7px 8px 7px 12px}
  .clip-count{min-width:18px;height:18px;padding:0 5px;margin-left:0;font-size:.6875rem}
}
/* "How it works" tabs: the same role icons as the calculator */
.tab{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tab .ico{width:18px;height:18px;flex:none}
@media (max-width:420px){ .tab{gap:6px} .tab .ico{width:16px;height:16px} }

/* ============================================================ hero: reactions behind the cards */
.hero-stack{isolation:isolate}
.hx{position:absolute;inset:-14% -18% -10% -22%;z-index:0;pointer-events:none}
.hx-glow{position:absolute;left:50%;top:46%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--primary) 32%,transparent),color-mix(in oklab,#8b5cf6 14%,transparent) 55%,transparent 75%);
  animation:hx-breathe 6s ease-in-out infinite}
.hx-ring{position:absolute;left:50%;top:46%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;
  border:1.5px solid color-mix(in oklab,var(--primary) 45%,transparent);opacity:0;animation:hx-ring 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.hx-ring:nth-of-type(2){animation-delay:1.6s}.hx-ring:nth-of-type(3){animation-delay:3.2s}
.hx-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:99px;
  background:color-mix(in oklab,var(--card) 80%,transparent);border:1px solid var(--border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -16px var(--shadow-soft);font:600 15px/1 var(--font-sans);color:var(--foreground);white-space:nowrap;
  animation:hx-pop 6s ease-in-out infinite both}
.hx-chip i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5b6cff,#8b5cf6);box-shadow:0 6px 16px -6px #5b6cff}
.hx-chip i svg{width:16px;height:16px;color:#fff;fill:none;stroke:currentColor}
.hx-chip small{font-weight:500;font-size:13px;color:var(--accent-mid)}
.hx-chip.pink i{background:linear-gradient(135deg,#8b5cf6,#d946ef)}
.hx-chip.far{scale:.82;filter:blur(.5px)}
.hx-dot{position:absolute;width:24px;height:24px;color:#8b95ff;opacity:0;animation:hx-float 5s ease-in infinite}
.hx-dot svg{width:100%;height:100%;fill:currentColor;stroke:none}
.hx-dot.v{color:#a78bfa}
@keyframes hx-ring{0%{transform:scale(.55);opacity:0}15%{opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes hx-breathe{50%{transform:scale(1.08);opacity:.8}}
@keyframes hx-pop{0%{opacity:0;translate:0 26px}10%{opacity:1;translate:0 0}70%{opacity:1;translate:0 -18px}85%,100%{opacity:0;translate:0 -40px}}
@keyframes hx-float{0%{opacity:0;translate:0 30px;scale:.6}15%{opacity:.9}100%{opacity:0;translate:14px -150px;scale:1.1;rotate:12deg}}
@media (max-width:900px){
  .hx-chip{font-size:13px;padding:5px 11px 5px 5px}.hx-chip i{width:24px;height:24px}.hx-chip i svg{width:13px;height:13px}
  .hx-chip.far,.hx-chip small{display:none}
  .hx{inset:-8% -6% -6% -6%}
}

/* ============================================================ section backgrounds (How it works, Calculator) */
.fx-host{position:relative;isolation:isolate}
.fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.fx-blob{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(70px);opacity:.5}
.fx-blob.b1{left:-8%;top:8%;background:color-mix(in oklab,var(--primary) 40%,transparent);animation:fx-drift 18s ease-in-out infinite}
.fx-blob.b2{right:-6%;bottom:-6%;background:color-mix(in oklab,#8b5cf6 36%,transparent);animation:fx-drift 22s ease-in-out infinite reverse}
@keyframes fx-drift{0%,100%{transform:translate(0,0)}33%{transform:translate(90px,40px)}66%{transform:translate(-40px,70px)}}
/* How it works: glass icon tiles drifting beside the heading */
.fx-tile{position:absolute;width:var(--s);height:var(--s);display:grid;place-items:center;border-radius:calc(var(--s) * .3);
  background:color-mix(in oklab,var(--card) 72%,transparent);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 50px -24px var(--shadow-strong),inset 0 1px 0 rgba(255,255,255,.06);color:var(--accent-icon);
  animation:fx-bob 8s ease-in-out infinite}
.fx-tile svg{width:46%;height:46%;fill:none;stroke:currentColor}
.fx-tile.far{filter:blur(1.2px);opacity:.6}
@keyframes fx-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(5deg)}}
/* Calculator: slow orbits with travelling dots, centred behind the card */
.fx-calc{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.fx-orbits{position:absolute;left:50%;top:640px;width:0;height:0}
.fx-orb{position:absolute;left:0;top:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--primary) 22%,transparent);translate:-50% -50%;animation:fx-spin linear infinite}
.fx-orb.o1{width:760px;height:760px;animation-duration:60s}
.fx-orb.o2{width:1040px;height:1040px;animation-duration:90s;animation-direction:reverse;border-style:dashed}
.fx-orb.o3{width:1320px;height:1320px;animation-duration:120s}
.fx-orb.o4{width:1600px;height:1600px;animation-duration:150s;animation-direction:reverse;border-color:color-mix(in oklab,var(--border) 60%,transparent)}
.fx-orb i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#a5b0ff;box-shadow:0 0 12px 2px color-mix(in oklab,var(--primary) 70%,transparent)}
.fx-orb i:nth-child(2){top:auto;bottom:-5px}
.fx-orb.o3 i,.fx-orb.o4 i{width:7px;height:7px;margin-left:-3.5px;top:-3.5px;opacity:.7}
.fx-orb.o4 i:nth-child(2){top:auto;bottom:-3.5px}
@keyframes fx-spin{to{rotate:360deg}}
@media (max-width:900px){ .fx-tile.far{display:none} .fx-orbits{transform:scale(.55);top:520px} .fx-tile{--s:44px !important} .fx-blob{width:340px;height:340px} }
@media (prefers-reduced-motion:reduce){
  .hx-glow,.hx-ring,.hx-dot,.fx-blob,.fx-tile,.fx-orb{animation:none}
  .hx-chip{animation:none;opacity:1}
  .hx-ring,.hx-dot{display:none}
}
/* hero: result badges sit in front of the cards (behind the robot) */
.hx.hx-front{z-index:3}
.hx-chip.green i{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 6px 16px -6px #22c55e}
.hx-chip.green small{color:#4ade80}
@media (max-width:900px){ .hx-front .hx-chip small{display:inline} }
:root[data-theme="light"] .hx-chip.green small{color:#15803d}
/* Creative examples: giant outlined words drifting behind the strip */
.fx-cre::before{content:"";position:absolute;left:0;right:0;top:48%;height:46%;
  background:radial-gradient(60% 60% at 50% 50%,color-mix(in oklab,var(--primary) 26%,transparent),transparent 70%);filter:blur(30px)}
.fx-cre{-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.fx-mq{position:absolute;left:0;display:flex;width:max-content;white-space:nowrap;
  font:700 clamp(90px,11vw,170px)/1 var(--font-sans);letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:2px color-mix(in oklab,var(--primary) 55%,transparent);animation:fx-mq 90s linear infinite}
.fx-mq span{padding-right:.3em}
.fx-mq.r1{top:42%}
.fx-mq.r2{top:calc(42% + clamp(100px,12vw,190px));animation-direction:reverse;animation-duration:110s;
  -webkit-text-stroke-color:color-mix(in oklab,#8b5cf6 50%,transparent)}
@keyframes fx-mq{to{transform:translateX(-50%)}}
@media (max-width:900px){ .fx-mq{font-size:72px}.fx-mq.r2{top:calc(42% + 84px)} }
@media (prefers-reduced-motion:reduce){ .fx-mq{animation:none} }
/* every section background fades out at its top and bottom edge: a blob or glow
   clipped by the section box used to leave a hard-edged strip at the border */
.fx-how{-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.fx-cre{-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
.fx-blob.b2{bottom:6%}
/* About: the network strip under the copy */
.about-net-wrap{position:relative;margin-top:clamp(-56px,-3vw,-24px);margin-bottom:clamp(8px,2vw,24px)}
.about-net{display:block;width:100%;height:auto;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent 14%,#000 28%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent 14%,#000 28%,#000 90%,transparent)}
.an-lines line{stroke:color-mix(in oklab,var(--primary) 45%,transparent);stroke-width:1.2}
.an-pulse line{fill:none;stroke:#c3c9ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:100;
  filter:drop-shadow(0 0 4px #8b95ff);animation:aw-pulse 4s linear infinite}
@keyframes aw-pulse{to{stroke-dashoffset:0}}
.an-dots circle{fill:color-mix(in oklab,var(--primary) 75%,transparent)}
.an-node .halo{fill:color-mix(in oklab,var(--primary) 20%,transparent);transform-box:fill-box;transform-origin:center;animation:aw-halo 3s ease-in-out infinite}
.an-node .disc{fill:var(--card);stroke:color-mix(in oklab,var(--primary) 70%,transparent);stroke-width:1.5}
.an-node svg{color:#a5b0ff;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.an-node:nth-of-type(2) .halo{animation-delay:-1s}.an-node:nth-of-type(3) .halo{animation-delay:-2s}
@keyframes aw-halo{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.25);opacity:1}}
@media (max-width:900px){ .about-net-wrap{margin-top:8px} .about-net{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} }
@media (prefers-reduced-motion:reduce){ .an-pulse{display:none} .an-node .halo{animation:none} }
/* For creators: the sign-up button lives in the band, on the right */
.cre-band{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(18px,2.4vw,32px)}
.cre-band-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.cre-band-cta .btn-note{margin:0;text-align:center;max-width:26ch}
@media (max-width:900px){
  .cre-band{grid-template-columns:auto minmax(0,1fr)}
  .cre-band-cta{grid-column:1 / -1;margin-top:6px}
  .cre-band-cta .btn{width:100%}
}
@media (max-width:560px){ .cre-band{grid-template-columns:minmax(0,1fr)} }
@media (min-width:901px){ .cre-band-cta .btn-note{max-width:none;white-space:nowrap} }
/* desktop: the button alone is centred in the band; the note hangs underneath it */
@media (min-width:901px){
  .cre-band-cta{position:relative}
  .cre-band-cta .btn-note{position:absolute;top:100%;right:0;margin-top:10px;text-align:right}
  .cre-band{padding-block:calc(clamp(22px,2.6vw,32px) + 8px)}
}

/* ============================================================ mobile sign-up bar */
.mcta{display:none}
@media (max-width:900px){
  .mcta{position:fixed;z-index:109;display:flex;align-items:center;gap:6px;
    left:max(12px,calc(env(safe-area-inset-left,0px) + 12px));
    right:calc(max(20px,calc(env(safe-area-inset-right,0px) + 16px)) + 58px + 10px);
    bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 16px));
    height:58px;padding:6px;border-radius:18px;
    background:color-mix(in oklab,var(--card) 86%,transparent);border:1px solid var(--border);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -14px var(--shadow-strong);
    opacity:0;transform:translateY(130%);pointer-events:none;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
  .mcta.is-on{opacity:1;transform:none;pointer-events:auto}
  .mcta-go{flex:1;height:100%;border-radius:13px;background:var(--gradient);border:0;font-weight:600}
  .mcta-login{flex:none;padding:0 14px;height:100%;display:grid;place-items:center;border-radius:13px;
    color:var(--foreground);font-weight:500;font-size:.9375rem;text-decoration:none}
  .mcta-login:active{background:var(--ov-2)}
}
@media (max-width:520px){ .mcta-login{display:none} }
@media (prefers-reduced-motion:reduce){ .mcta{transition:opacity .2s ease;transform:none} }

/* ============================================================ For creators: payout pushes */
.pz{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pz-n{position:absolute;width:max-content;min-width:240px;max-width:330px;display:flex;gap:12px;align-items:center;padding:11px 14px 11px 11px;border-radius:18px;
  background:color-mix(in oklab,var(--card) 84%,transparent);border:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 50px -22px var(--shadow-strong);
  opacity:0;animation:pz-push 9s cubic-bezier(.22,.61,.36,1) infinite}
.pz-av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,#5b6cff,#8b5cf6);box-shadow:0 0 0 2px color-mix(in oklab,var(--primary) 40%,transparent)}
.pz-tx{flex:1;min-width:0}
.pz-hd{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted-foreground)}
.pz-hd b{color:var(--accent-soft);font-weight:600}
.pz-ln{display:block;margin-top:3px;font-size:14px;line-height:1.3;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-ln em{font-style:normal;font-weight:700;color:#22c55e}
.pz-n.far{scale:.86;filter:blur(.5px)}
@keyframes pz-push{
  0%{opacity:0;transform:translateY(-24px) scale(.96)}
  6%{opacity:1;transform:none}
  50%{opacity:1;transform:none}
  58%,100%{opacity:0;transform:translateY(-10px) scale(.98)}}
.pz-n.far{animation-name:pz-push-far}
@keyframes pz-push-far{0%{opacity:0;transform:translateY(-24px)}6%,50%{opacity:.6;transform:none}58%,100%{opacity:0;transform:translateY(-10px)}}
:root[data-theme="light"] .pz-ln em{color:#15803d}
/* only where the sides of the heading are actually empty */
@media (max-width:1279px){ .pz{display:none} }
@media (prefers-reduced-motion:reduce){ .pz-n{animation:none;opacity:1} .pz-n.far{opacity:.6} }

/* ---------------------------------- White Label popup (footer → /white-label/) ---------------------------------- */
.modal.modal-wl{width:min(760px,calc(100vw - 40px))}
.modal-wl .modal-body{padding:0}
.wl{display:flex;flex-direction:column}
.wl-hero{position:relative;padding:26px 28px 22px;overflow:hidden}
.wl-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 100% 0,color-mix(in oklab,var(--primary) 22%,transparent),transparent 62%);pointer-events:none}
.wl-hero > *{position:relative}
.modal-body .wl-eyebrow{margin:0 0 8px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-mid)}
.modal-body .wl-title{margin:0;font-family:var(--font-sans);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--foreground)}
.modal-body .wl-lead{margin:10px 0 0;max-width:38em;font-size:1rem;line-height:1.55;color:var(--muted-foreground)}
.modal-body .wl-feats{list-style:none;margin:0;padding:0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wl-feats li{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--secondary)}
.wl-feats .cx-ic{margin-bottom:4px}
.wl-feats b{font-size:.9375rem;font-weight:600;color:var(--foreground)}
.wl-feats small{font-size:.8125rem;line-height:1.45;color:var(--muted-foreground)}
.wl-for{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:18px 28px 0}
.wl-lab{font-size:.8125rem;color:var(--muted-foreground)}
.modal-body .wl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wl-chips li{padding:6px 12px;border:1px solid var(--border);border-radius:999px;font-size:.8125rem;color:var(--foreground);background:var(--background)}
.wl-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;margin:22px 28px 28px;padding:18px 20px;border-radius:18px;
  border:1px solid color-mix(in oklab,var(--primary) 45%,transparent);
  background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 16%,transparent),color-mix(in oklab,var(--primary) 4%,transparent))}
.wl-cta-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.wl-cta-t b{font-size:1.0625rem;font-weight:700;color:var(--foreground)}
.wl-cta-t small{font-size:.875rem;color:var(--muted-foreground)}
.wl-cta-a{display:flex;gap:8px;flex-wrap:wrap}
.modal-body a.wl-mail{background:var(--gradient);border:0;color:#fff;text-decoration:none}
.wl-mail .ico{width:17px;height:17px}
.wl-copy.is-done{background:#22c55e;border-color:#22c55e;color:#fff}
@media (max-width:680px){
  .modal.modal-wl{width:100vw}
  .wl-hero{padding:22px 18px 18px}
  .modal-body .wl-feats{grid-template-columns:minmax(0,1fr);padding:0 18px}
  .wl-feats li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .wl-feats .cx-ic{grid-row:span 2;margin:0}
  .wl-for{padding:16px 18px 0}
  .wl-cta{margin:18px 18px 22px}
  .wl-cta-a,.wl-cta-a .btn{width:100%}
  .wl-cta-a .btn{justify-content:center}
}

/* ---------------------------------- copy icon button (contacts + White Label popups) ---------------------------------- */
.copy-btn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--muted-foreground);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.copy-btn .ico{width:16px;height:16px}
.copy-btn:hover{border-color:color-mix(in oklab,var(--primary) 55%,transparent);background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--foreground)}
.copy-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.copy-btn.is-done{border-color:#22c55e;background:rgba(34,197,94,.14);color:#22c55e}
/* next to the big mail button in the White Label popup: the same height as the button */
.wl-cta-a{align-items:stretch}
.wl-cta-a .copy-btn.wl-copy{width:42px;height:auto;min-height:42px;border-radius:12px;background:var(--background)}
.wl-cta-a .copy-btn.wl-copy .ico{width:18px;height:18px}
@media (max-width:680px){ .wl-cta-a{flex-wrap:nowrap} .wl-cta-a .btn{width:auto;flex:1} .wl-cta-a .copy-btn.wl-copy{width:44px} }
/* phones: next to the copy icon the press-kit link keeps only its icon, so the address is not broken in two */
@media (max-width:480px){ .modal-body a.cx-kit{padding:0;width:36px;height:36px;justify-content:center} .cx-kit span{display:none} }