/* Infinity Strategist — home.
 *
 * Loaded on the front page only, after main.css, so the rest of the site is
 * untouched while this page is rebuilt.
 *
 * WHAT CHANGED, AND WHY
 *
 * The previous home page had more motion than message. Six effects competed for
 * attention at once — three drifting aurora blobs, a sweeping shine on every
 * primary button, a pinging dot on every eyebrow, a shimmering skeleton, two
 * counter-rotating orbit rings and a scrolling grid floor — so nothing was
 * emphasised, because everything was. Restraint is the single biggest
 * difference between a page that looks expensive and one that looks busy.
 *
 * The rules here:
 *
 *   1. ONE moment of motion per screen, and it must mean something. Bars fill
 *      because they are showing coverage. The answer types because that is what
 *      an answer engine does. Nothing moves purely to prove it can.
 *   2. The rotating orbit is gone. Text that rotates cannot be read and a link
 *      that moves cannot be clicked — it was the worst UX on the page while
 *      being the most technically impressive part of it. The same nine surfaces
 *      are now a still grid: scannable, clickable, and legible in a screenshot.
 *   3. Depth comes from shadow, scale and spacing — not from perspective tricks.
 *   4. Space is the layout. Section rhythm is one scale, applied consistently.
 */

/* ═══════════════ tokens ═══════════════ */

.home-v4{
  /* A warmer, deeper ink than the shared one. Pure-grey text on pure white is
     the default nobody chose; a touch of blue in the black reads intentional. */
  --ink:#0A0C12;
  --ink-2:#4A5260;
  --ink-3:#79808F;
  --ink-4:#A5ABB8;

  --paper:#FFFFFF;
  --paper-2:#F7F8FC;
  --paper-3:#EFF1F7;

  --night:#08070F;
  --night-2:#12101F;
  --night-3:#1C1930;

  --violet:#6C5CE7;
  --violet-2:#8B7CFF;
  --violet-3:#B8A9FF;
  --cyan:#22C1DC;
  --mint:#3ADFA5;

  --line:rgba(10,12,18,.09);
  --line-2:rgba(10,12,18,.055);
  --line-d:rgba(255,255,255,.10);
  --line-d2:rgba(255,255,255,.06);

  /* Shadows in the brand hue rather than neutral grey — the difference is
     subtle and it is most of why a card looks "designed". */
  --sh-1:0 1px 2px rgba(10,12,18,.04), 0 2px 8px rgba(10,12,18,.04);
  --sh-2:0 2px 4px rgba(10,12,18,.03), 0 12px 32px rgba(10,12,18,.07);
  --sh-3:0 4px 8px rgba(10,12,18,.04), 0 24px 64px rgba(10,12,18,.10);
  --sh-4:0 40px 90px rgba(10,12,18,.16), 0 8px 24px rgba(10,12,18,.06);

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* One spacing scale, used everywhere. */
  --s-1:8px;   --s-2:12px;  --s-3:16px;  --s-4:24px;
  --s-5:32px;  --s-6:48px;  --s-7:64px;  --s-8:96px;
  --sec-y:clamp(72px,10vw,140px);

  --ease:cubic-bezier(.22,.75,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ═══════════════ type ═══════════════ */

.home-v4 h1,.home-v4 h2,.home-v4 h3,.home-v4 h4{
  font-family:'Inter Tight','Inter',-apple-system,sans-serif;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--ink);
  text-wrap:balance;
}
.home-v4 h1{font-size:clamp(40px,6.4vw,76px);letter-spacing:-.045em}
.home-v4 h2{font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.04em}
.home-v4 h3{font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.022em;font-weight:600}
.home-v4 h4{font-size:16px;line-height:1.35;letter-spacing:-.015em;font-weight:600}

/* The one serif on the site. A single italic phrase inside the H1 does more for
   personality than any amount of gradient, and it costs one 400-weight file. */
.home-v4 .serif{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;
  letter-spacing:-.02em;
  padding-right:.06em;
}

.home-v4 p{color:var(--ink-2)}
.home-v4 .lead{
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);
  letter-spacing:-.011em;text-wrap:pretty;
}
.home-v4 .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* Label — replaces the pill "eyebrow", which had a pinging dot and appeared on
   every section, so six of them competed at once.
   Grey 11px at .45 opacity was too far the other way — it read as a caption
   rather than the signpost that tells you which part of the argument you are
   in. Brand colour does more for prominence than size ever could, so this gains
   one point of size and one step of weight, and takes the accent. Still no
   pill and no animated dot: the point was to stop six of these shouting at
   once, not to make them invisible. */
.home-v4 .label{
  display:flex;align-items:center;gap:11px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin-bottom:var(--s-4);
}
.home-v4 .label::before{
  content:'';width:26px;height:2px;border-radius:2px;background:currentColor;flex:none;
}
.home-v4 .center .label{justify-content:center}
.home-v4 .on-night .label,.home-v4 .h-night .label{color:var(--violet-3)}

/* ═══════════════ layout ═══════════════ */

.home-v4 .h-sec{padding:var(--sec-y) 0;position:relative}
.home-v4 .h-sec.tight{padding:clamp(48px,6vw,80px) 0}
.home-v4 .h-alt{background:var(--paper-2)}
.home-v4 .h-night{background:var(--night);color:#F4F3F8;overflow:hidden}
.home-v4 .h-night h2,.home-v4 .h-night h3,.home-v4 .h-night h4{color:#fff}
.home-v4 .h-night p{color:#9BA2B4}

.home-v4 .h-head{max-width:660px;margin-bottom:clamp(40px,5vw,64px)}
.home-v4 .h-head.center{text-align:center;margin-inline:auto}
.home-v4 .h-head h2 + .lead{margin-top:var(--s-3)}

/* A hairline that stops short of the gutters — a full-bleed rule reads like a
   browser default, an inset one reads like a decision. */
.home-v4 .h-rule{height:1px;background:var(--line-2);margin-inline:var(--gut)}

/* ═══════════════ buttons ═══════════════ */

.home-v4 .h-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:550;line-height:1;letter-spacing:-.011em;
  padding:15px 24px;border-radius:99px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),box-shadow .22s var(--ease),
             transform .22s var(--ease);
}
.home-v4 .h-btn svg{flex:none;transition:transform .26s var(--ease-out)}
.home-v4 .h-btn:hover svg{transform:translateX(3px)}

/* Solid ink, not a gradient. The gradient is now reserved for the two places
   that genuinely are the product's identity — it means more used twice. */
.home-v4 .h-btn-primary{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.home-v4 .h-btn-primary:hover{background:#000;box-shadow:var(--sh-3);transform:translateY(-1px)}
.home-v4 .h-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.home-v4 .h-btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.home-v4 .h-night .h-btn-primary{background:#fff;color:var(--ink)}
.home-v4 .h-night .h-btn-primary:hover{background:#fff;transform:translateY(-1px)}
.home-v4 .h-night .h-btn-ghost{color:#fff;border-color:var(--line-d)}
.home-v4 .h-night .h-btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.home-v4 .h-btns{display:flex;gap:10px;flex-wrap:wrap}
.home-v4 .center .h-btns{justify-content:center}

/* Focus that is actually visible, on both grounds. The old page inherited the
   browser default, which disappears entirely against the dark sections. */
.home-v4 a:focus-visible,.home-v4 button:focus-visible,.home-v4 input:focus-visible{
  outline:2px solid var(--violet);outline-offset:3px;border-radius:6px;
}
.home-v4 .h-night a:focus-visible,.home-v4 .h-night input:focus-visible{outline-color:var(--violet-3)}

/* ═══════════════ 1 · hero ═══════════════ */

.home-v4 .h-hero{
  position:relative;overflow:hidden;
  padding:clamp(52px,7vw,104px) 0 clamp(64px,8vw,112px);
}
/* One soft light source from above, instead of three drifting blobs. */
.home-v4 .h-hero::before{
  content:'';position:absolute;inset:-30% -20% auto -20%;height:80%;pointer-events:none;
  background:radial-gradient(46% 56% at 50% 0%,rgba(108,92,231,.11),transparent 68%);
}
.home-v4 .h-hero .wrap{position:relative;z-index:1}
.home-v4 .h-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,5vw,72px);align-items:center;
}
.home-v4 .h-hero-vis{min-width:0}
.home-v4 .h-hero h1{margin-bottom:var(--s-4)}
.home-v4 .h-hero .lead{max-width:48ch;margin-bottom:var(--s-5)}
.home-v4 .h-hero .h-btns{margin-bottom:var(--s-4)}

/* Availability line — a small, specific, checkable claim beats a slogan. */
.home-v4 .h-avail{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--ink-3);letter-spacing:-.005em;
}
/* Pinned to the first line, not centred on the block — once this wraps to two
   lines on a phone, a centred dot floats between them with nothing to align to. */
.home-v4 .h-avail i{
  width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none;
  box-shadow:0 0 0 3px rgba(58,223,165,.18);
  margin-top:.48em;
}

/* ---- the outcome card ----
   Was a mock of Citely's own dashboard, chrome and all. That made the page
   ambiguous about what is being sold: an agency, or software. This shows the
   result instead — an engine citing the store — and the engine row carries the
   breadth ("every engine, not just one") in a single readable line. */

.home-v4 .h-out{
  position:relative;
  border-radius:var(--r-xl);
  background:var(--night-2);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--sh-4), 0 0 0 1px rgba(108,92,231,.10);
  padding:22px;overflow:hidden;
}
.home-v4 .h-out::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 36%);
}
.home-v4 .h-out > *{position:relative}

.home-v4 .h-out-q{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:#8A91A4;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.home-v4 .h-out-q svg{flex:none;opacity:.75}

/* ---- the rotating surface panel ----
   A fixed min-height holds the card steady as panels swap; without it the
   engine chips below jump every few seconds, which is the exact layout-shift
   problem the old rotating headline had. */
.home-v4 .h-pans{
  background:rgba(108,92,231,.11);border:1px solid rgba(139,124,255,.24);
  border-radius:var(--r);padding:15px 17px;
  min-height:230px;display:flex;flex-direction:column;
}
.home-v4 .h-pan[hidden]{display:none!important}
.home-v4 .h-pan{animation:h-panin .42s var(--ease-out);display:flex;flex-direction:column;flex:1}
@keyframes h-panin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.home-v4 .h-out-tag{
  display:flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-3);margin-bottom:10px;
}
.home-v4 .h-pan p{font-size:14.5px;line-height:1.62;color:#D8DCE6;margin-bottom:12px}
.home-v4 .h-pan sup{font-size:9px;color:var(--violet-3);vertical-align:super}
/* The citation itself — the whole promise of the page, so it is the one thing
   in the hero visual that gets a colour. */
.home-v4 .h-pan mark{
  background:rgba(34,193,220,.16);color:#fff;
  border-bottom:1px solid rgba(34,193,220,.55);
  padding:1px 4px;border-radius:4px;font-weight:550;
}
.home-v4 .h-pan-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.home-v4 .h-pan-src .h-chip{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#8A91A4;
}
.home-v4 .h-pan-src .h-chip.win{
  background:rgba(34,193,220,.14);border-color:rgba(34,193,220,.42);color:#fff;font-weight:550;
}

/* YouTube-style result rows */
.home-v4 .h-vres{display:flex;flex-direction:column;gap:7px}
.home-v4 .h-vrow{
  display:flex;align-items:center;gap:11px;
  padding:8px;border-radius:9px;background:rgba(255,255,255,.04);
  border:1px solid transparent;
}
.home-v4 .h-vrow i{
  width:52px;height:32px;border-radius:6px;flex:none;
  background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
}
.home-v4 .h-vrow span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.home-v4 .h-vrow b{
  font-size:12.5px;font-weight:550;color:#D8DCE6;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-v4 .h-vrow em{font-style:normal;font-size:10.5px;color:#6B7285}
.home-v4 .h-vrow svg{color:var(--mint);flex:none}
.home-v4 .h-vrow.win{background:rgba(34,193,220,.12);border-color:rgba(34,193,220,.35)}
.home-v4 .h-vrow.win i{background:linear-gradient(140deg,rgba(34,193,220,.42),rgba(108,92,231,.34))}
.home-v4 .h-vrow.win b{color:#fff}
.home-v4 .h-vrow.win em{color:var(--cyan)}

/* TikTok-style vertical clips */
.home-v4 .h-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.home-v4 .h-clip{display:flex;flex-direction:column;gap:5px;min-width:0}
.home-v4 .h-clip i{
  display:block;aspect-ratio:1;border-radius:8px;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
}
.home-v4 .h-clip b{
  font-size:11px;font-weight:500;color:#B9BFCC;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-v4 .h-clip em{font-style:normal;font-size:10px;color:#6B7285}
.home-v4 .h-clip.win i{background:linear-gradient(150deg,rgba(34,193,220,.40),rgba(108,92,231,.34))}
.home-v4 .h-clip.win b{color:#fff}
.home-v4 .h-clip.win em{color:var(--cyan)}

.home-v4 .h-eng{margin-top:18px}
.home-v4 .h-eng-lab{
  display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6B7285;margin-bottom:10px;
}
.home-v4 .h-eng-list{display:flex;flex-wrap:wrap;gap:6px}
/* The chips are the tab control for the panel above, so they get real button
   affordances — cursor, hover, and a clearly different selected state. */
.home-v4 .h-eng-i{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:11.5px;color:#8A91A4;white-space:nowrap;
  padding:6px 10px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.home-v4 .h-eng-i:hover{background:rgba(255,255,255,.09);color:#D8DCE6}
.home-v4 .h-eng-i.on{
  background:rgba(139,124,255,.20);border-color:rgba(139,124,255,.52);color:#fff;
}
.home-v4 .h-eng-i svg:first-child{opacity:.7;flex:none}
.home-v4 .h-eng-i.on svg:first-child{opacity:1}
.home-v4 .h-eng-i svg:last-child{color:var(--mint);flex:none;opacity:.55}
.home-v4 .h-eng-i.on svg:last-child{opacity:1}

/* ═══════════════ 2 · the buying journey ═══════════════
   Six stops on one rail. The rail is the point: it says these are stages of a
   single purchase, not six unrelated channels. Each stop carries the platform's
   accent on its dot only — six saturated cards side by side would be a rainbow,
   one coloured dot each reads as a system. */

/* ---- the rotating platform in the headline ----
   Every word occupies the SAME grid cell, so the box is permanently as wide as
   the longest of them ("all six of them") and the line can never reflow as the
   word changes. This is the structural fix the old JS width-measuring hack was
   reaching for. */
.home-v4 .h-rot{
  display:inline-grid;
  vertical-align:top;
  text-align:center;
}
.home-v4 .h-rot-i{
  grid-area:1/1;
  color:var(--ac);
  white-space:nowrap;
  opacity:0;transform:translateY(.2em);
  /* Short enough that the word is fully legible for most of its 1.45s slot —
     a .42s fade against a 1.45s cadence spends a third of it mid-transition. */
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
}
.home-v4 .h-rot-i.on{opacity:1;transform:none}
/* The payoff line gets the brand gradient — it is the only word in the cycle
   that is not a platform, so it should not look like one. */
.home-v4 .h-rot-i.fin{
  background:linear-gradient(100deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* The stop on the rail lights up in time with the headline. */
.home-v4 .h-fstop.is-live .h-fdot{
  transform:translateY(-3px) scale(1.1);
  background:color-mix(in srgb,var(--ac) 12%,var(--paper));
  border-color:var(--ac);
  box-shadow:0 0 0 5px var(--paper-2), 0 10px 26px color-mix(in srgb,var(--ac) 38%,transparent);
}
.home-v4 .h-fstop .h-fplat{transition:color .3s var(--ease)}
.home-v4 .h-fstop.is-live .h-fplat{color:var(--ac)}

.home-v4 .h-flow{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.4vw,18px);
  position:relative;
}
/* The rail, threaded through the dots. Sits behind everything and stops short
   of the first and last dot so it reads as a path, not a border. */
.home-v4 .h-flow::before{
  content:'';position:absolute;z-index:0;
  left:8%;right:8%;top:48px;height:2px;
  background:linear-gradient(90deg,
    rgba(34,193,220,.5),rgba(255,92,138,.5),rgba(255,107,107,.5),
    rgba(108,92,231,.5),rgba(139,124,255,.5),rgba(184,169,255,.5));
  border-radius:2px;
}
.home-v4 .h-fstop{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-2);
}
.home-v4 .h-fstage{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);height:14px;
}
.home-v4 .h-fdot{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--ac);background:var(--paper);
  border:2px solid color-mix(in srgb,var(--ac) 42%,transparent);
  box-shadow:0 0 0 5px var(--paper-2), 0 6px 18px color-mix(in srgb,var(--ac) 22%,transparent);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.home-v4 .h-fstop:hover .h-fdot{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 0 0 5px var(--paper-2), 0 12px 26px color-mix(in srgb,var(--ac) 34%,transparent);
}
.home-v4 .h-fplat{
  font-family:'Inter Tight',Inter,sans-serif;font-size:15px;font-weight:600;
  letter-spacing:-.022em;color:var(--ink);
}
/* The query, dressed as the search box it was typed into — the detail that
   makes the row read as six real searches rather than six labels. */
.home-v4 .h-fq{
  display:flex;align-items:center;gap:6px;
  width:100%;min-height:64px;
  padding:8px 10px;border-radius:9px;
  font-size:11.5px;line-height:1.35;color:var(--ink-2);text-align:left;
  background:var(--paper);border:1px solid var(--line-2);
}
.home-v4 .h-fq svg{flex:none;color:var(--ink-4)}
.home-v4 .h-fnote{font-size:12px;line-height:1.45;color:var(--ink-3);max-width:20ch}


/* ═══════════════ 3 · anatomy of one search result ═══════════════
   The results page itself, stacked. Each block is numbered and the numbers key
   into the legend beside it, so the visitor reads the picture and the argument
   together rather than one after the other. The last block is dimmed on
   purpose: the old organic #1 is the thing that lost its value. */

.home-v4 .h-serp-wrap{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}

.home-v4 .h-serp{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px;box-shadow:var(--sh-2);
}
.home-v4 .h-serp-q{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink-2);
  padding:12px 16px;margin-bottom:14px;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:99px;
}
.home-v4 .h-serp-q svg{flex:none;color:var(--ink-4)}

/* one result block */
.home-v4 .h-sb{
  position:relative;
  padding:14px 14px 14px 40px;
  border-radius:var(--r);
  border:1px solid var(--line-2);
  margin-bottom:8px;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.home-v4 .h-sb:last-child{margin-bottom:0}
.home-v4 .h-sb:hover{border-color:color-mix(in srgb,var(--violet) 32%,transparent);background:rgba(108,92,231,.03)}
.home-v4 .h-sb-n{
  position:absolute;top:14px;left:12px;
  width:19px;height:19px;border-radius:6px;
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  color:#fff;background:var(--ink);
}
.home-v4 .h-sb-t{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-family:'IBM Plex Mono',monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:9px;
}
.home-v4 .h-sb-t svg{flex:none;color:var(--violet)}
.home-v4 .h-sb-a{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:11px;min-height:2.9em}

/* source chips under the AI answer */
.home-v4 .h-sb-src{display:flex;flex-wrap:wrap;gap:6px}
.home-v4 .h-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-3);
  padding:5px 10px;border-radius:99px;
  background:var(--paper-2);border:1px solid var(--line-2);
}
.home-v4 .h-chip.win{
  color:var(--ink);font-weight:550;
  background:rgba(34,193,220,.10);border-color:rgba(34,193,220,.42);
}
.home-v4 .h-chip.win svg{color:var(--cyan);flex:none}

/* video carousel — tinted per platform, because the colour is the information */
.home-v4 .h-vids{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.home-v4 .h-vid{display:flex;flex-direction:column;gap:5px;min-width:0}
.home-v4 .h-vid i{
  display:block;height:48px;border-radius:8px;
  border:1px solid rgba(10,12,18,.05);
  background:linear-gradient(145deg,var(--paper-3),#DDE1EC);
}
.home-v4 .h-vid b{font-size:11.5px;font-weight:550;color:var(--ink-2);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.home-v4 .h-vid em{font-style:normal;font-size:10.5px;color:var(--ink-4)}
.home-v4 .h-vid.yt i{background:linear-gradient(145deg,rgba(255,107,107,.34),rgba(255,107,107,.12))}
.home-v4 .h-vid.tt i{background:linear-gradient(145deg,rgba(34,193,220,.34),rgba(34,193,220,.12))}
.home-v4 .h-vid.ig i{background:linear-gradient(145deg,rgba(255,92,138,.30),rgba(184,169,255,.28))}
.home-v4 .h-vid.win i{
  background:linear-gradient(145deg,var(--violet),var(--cyan));
  border-color:transparent;
  box-shadow:0 4px 14px rgba(108,92,231,.28);
}
.home-v4 .h-vid.win b{color:var(--ink)}
.home-v4 .h-vid.win em{color:var(--cyan);font-weight:600}

/* image pack — Pinterest's ground, with Instagram alongside it */
.home-v4 .h-imgs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.home-v4 .h-img{display:flex;flex-direction:column;gap:5px;min-width:0}
.home-v4 .h-img i{
  display:block;aspect-ratio:1;border-radius:8px;
  border:1px solid rgba(10,12,18,.05);
  background:var(--paper-3);
}
.home-v4 .h-img em{
  font-style:normal;font-size:9.5px;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-v4 .h-img.pin i{background:linear-gradient(150deg,rgba(255,92,138,.34),rgba(255,92,138,.10))}
.home-v4 .h-img.ig i{background:linear-gradient(150deg,rgba(184,169,255,.36),rgba(255,92,138,.16))}
.home-v4 .h-img.win i{
  background:linear-gradient(150deg,var(--violet),var(--cyan));
  border-color:transparent;
  box-shadow:0 4px 14px rgba(108,92,231,.28);
}
.home-v4 .h-img.win em{color:var(--cyan);font-weight:600}

/* people also ask */
.home-v4 .h-paa{display:flex;flex-direction:column;gap:6px}
.home-v4 .h-paa span{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink-2);
  padding:9px 12px;border-radius:8px;background:var(--paper-2);
}
.home-v4 .h-paa span::after{
  content:'';width:7px;height:7px;flex:none;
  border-right:1.5px solid var(--ink-4);border-bottom:1.5px solid var(--ink-4);
  transform:rotate(45deg) translateY(-2px);
}

/* the old blue link */
.home-v4 .h-sb.dim{opacity:.55;border-style:dashed}
.home-v4 .h-sb.dim .h-sb-n{background:var(--ink-4)}
.home-v4 .h-blue b{display:block;font-size:14px;font-weight:550;color:#1A0DAB;letter-spacing:-.01em}
.home-v4 .h-blue span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.home-v4 .h-fold{display:block;margin-top:11px;font-size:10.5px;color:var(--ink-4)}

/* the numbered legend */
.home-v4 .h-legend{list-style:none;counter-reset:sb;padding:0;position:sticky;top:100px}
.home-v4 .h-legend li{
  counter-increment:sb;position:relative;
  padding:16px 0 16px 38px;border-bottom:1px solid var(--line-2);
}
.home-v4 .h-legend li:first-child{padding-top:0}
.home-v4 .h-legend li:last-child{border-bottom:0;padding-bottom:0}
.home-v4 .h-legend li::before{
  content:counter(sb);position:absolute;left:0;top:16px;
  width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line-2);
}
.home-v4 .h-legend li:first-child::before{top:0}
.home-v4 .h-legend b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:5px}
.home-v4 .h-legend p{font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ═══════════════ 4 · surfaces ═══════════════ */
/* Was a rotating orbit. Nine links that moved continuously and rendered their
   labels upside-down for half of every revolution. Now a grid you can read. */

.home-v4 .h-surf{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
}
.home-v4 .h-surf-i{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:clamp(20px,2.4vw,28px);background:var(--paper);position:relative;
  transition:background .22s var(--ease);
}
.home-v4 .h-surf-i:hover{background:var(--paper-2)}
.home-v4 .h-surf-i .ico{
  color:var(--ink-3);transition:color .22s var(--ease),transform .34s var(--ease-out);
}
.home-v4 .h-surf-i:hover .ico{color:var(--ac,var(--violet));transform:translateY(-2px)}
.home-v4 .h-surf-i h3{font-size:17px;letter-spacing:-.02em}
.home-v4 .h-surf-i p{font-size:14px;line-height:1.5;color:var(--ink-3)}
.home-v4 .h-surf-i .h-go{
  display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--s-2);
  font-size:13px;font-weight:550;color:var(--ink-4);
  transition:color .2s var(--ease);
}
.home-v4 .h-surf-i:hover .h-go{color:var(--ac,var(--violet))}
.home-v4 .h-surf-i .h-go svg{width:15px;height:15px;transition:transform .26s var(--ease-out)}
.home-v4 .h-surf-i:hover .h-go svg{transform:translateX(3px)}
/* The accent as a top edge that draws in — one line, one colour, on hover. */
.home-v4 .h-surf-i::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ac,var(--violet));transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out);
}
.home-v4 .h-surf-i:hover::after{transform:scaleX(1)}

.home-v4 .h-surf-note{
  margin-top:var(--s-4);font-size:13.5px;color:var(--ink-3);text-align:center;
}

/* ═══════════════ 5 · deliverables ═══════════════ */

.home-v4 .h-deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.home-v4 .h-card{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:16px 16px 26px;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.home-v4 .h-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.home-v4 .h-card h3{margin:20px 6px 8px}
.home-v4 .h-card > p{font-size:14.5px;line-height:1.55;margin-inline:6px}

.home-v4 .h-mock{
  background:var(--night);border-radius:var(--r-lg);padding:15px;min-height:198px;
  border:1px solid rgba(255,255,255,.07);
}
.home-v4 .h-mock-t{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#6B7285;margin-bottom:13px;
}
.home-v4 .h-mk{
  display:flex;align-items:center;gap:9px;font-size:12px;color:#CFD4E0;
  padding:7px 9px;border-radius:7px;background:rgba(255,255,255,.04);margin-bottom:5px;
}
.home-v4 .h-mk.h-sub{margin-left:18px;background:rgba(255,255,255,.025)}
.home-v4 .h-mk i{width:5px;height:5px;border-radius:1.5px;background:var(--violet-2);flex:none}
.home-v4 .h-mk.h-sub i{background:rgba(139,124,255,.42)}
.home-v4 .h-mk b{margin-left:auto;font-size:10.5px;color:#6B7285;font-family:'IBM Plex Mono',monospace;font-weight:400}

.home-v4 .h-kw{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:7px;background:rgba(255,255,255,.04);margin-bottom:5px}
.home-v4 .h-kw span{font-size:11.5px;color:#CFD4E0;flex:0 0 45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-v4 .h-kw u{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08);position:relative;text-decoration:none}
.home-v4 .h-kw u::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
}
.home-v4 .h-kw b{font-size:10.5px;color:var(--cyan);font-family:'IBM Plex Mono',monospace;flex:none;font-weight:500}

.home-v4 .h-bf-a{
  font-size:12.5px;line-height:1.5;color:#fff;background:rgba(108,92,231,.13);
  border:1px solid rgba(139,124,255,.24);border-radius:8px;padding:10px 12px;margin-bottom:12px;
}
.home-v4 .h-bf-h{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6B7285;margin:13px 0 8px}
.home-v4 .h-bf-l{height:7px;border-radius:4px;background:rgba(255,255,255,.08);margin-bottom:6px}
.home-v4 .h-bf-l.w95{width:95%}.home-v4 .h-bf-l.w85{width:85%}
.home-v4 .h-bf-l.w80{width:80%}.home-v4 .h-bf-l.w70{width:70%}
.home-v4 .h-bf-l.w60{width:60%}
.home-v4 .h-bf-l.hl{background:rgba(58,223,165,.30)}

/* ═══════════════ 6 · process ═══════════════ */

.home-v4 .h-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,32px)}
.home-v4 .h-step{position:relative;padding-top:var(--s-4);border-top:1px solid var(--line)}
.home-v4 .h-step-n{
  display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3);
}
.home-v4 .h-step-n b{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:.06em;
}
.home-v4 .h-step-n span{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);
  padding:3px 8px;border-radius:99px;background:var(--paper-3);
}
.home-v4 .h-step h3{font-size:18px;margin-bottom:8px}
.home-v4 .h-step p{font-size:14.5px;line-height:1.55}
/* The rule above each step fills as it arrives — the progress bar IS the border,
   so nothing extra is drawn on the page. */
.home-v4 .h-step::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
}

/* ═══════════════ 7 · services ═══════════════ */

.home-v4 .h-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,18px)}
.home-v4 .h-svc-i{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,28px);position:relative;overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.home-v4 .h-svc-i:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ac) 26%,transparent);
  box-shadow:0 18px 44px color-mix(in srgb,var(--ac) 14%,transparent);
}
.home-v4 .h-svc-ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--paper));
  border:1px solid color-mix(in srgb,var(--ac) 18%,transparent);
  margin-bottom:var(--s-4);flex:none;
  transition:transform .34s var(--ease-out);
}
.home-v4 .h-svc-i:hover .h-svc-ic{transform:scale(1.06) rotate(-4deg)}
.home-v4 .h-svc-i h3{margin-bottom:8px}
.home-v4 .h-svc-i p{font-size:14.5px;line-height:1.55;margin-bottom:var(--s-4)}
.home-v4 .h-svc-i .h-go{
  display:flex;align-items:center;gap:6px;margin-top:auto;
  font-size:13.5px;font-weight:550;color:var(--ac);
}
.home-v4 .h-svc-i .h-go svg{width:15px;height:15px;transition:transform .26s var(--ease-out)}
.home-v4 .h-svc-i:hover .h-go svg{transform:translateX(3px)}

/* The full-stack tile — the one card that is deliberately different. */
.home-v4 .h-svc-all{
  background:var(--night);border-color:transparent;color:#fff;
  justify-content:space-between;
}
.home-v4 .h-svc-all h3{color:#fff}
.home-v4 .h-svc-all p{color:#9BA2B4}
.home-v4 .h-svc-all .h-svc-ic{
  color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);
}
.home-v4 .h-svc-all .h-go{color:#fff}
.home-v4 .h-svc-all:hover{box-shadow:var(--sh-3)}

/* ═══════════════ 8 · closing CTA ═══════════════ */

.home-v4 .h-cta{position:relative;overflow:hidden;text-align:center}
.home-v4 .h-cta::before{
  content:'';position:absolute;inset:auto -20% -60% -20%;height:90%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(108,92,231,.24),transparent 70%);
}
.home-v4 .h-cta .wrap{position:relative;z-index:1}
.home-v4 .h-cta-in{max-width:660px;margin-inline:auto}
.home-v4 .h-cta h2{margin-bottom:var(--s-3)}
.home-v4 .h-cta .lead{color:#9BA2B4;margin-bottom:var(--s-5)}

.home-v4 .h-scan{
  display:flex;gap:8px;padding:7px;border-radius:99px;max-width:470px;margin-inline:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.home-v4 .h-scan:focus-within{border-color:rgba(139,124,255,.55);background:rgba(255,255,255,.07)}
.home-v4 .h-scan input{
  flex:1;min-width:0;padding:12px 18px;font:inherit;font-size:15.5px;
  color:#fff;background:none;border:0;outline:none;
}
.home-v4 .h-scan input::placeholder{color:#6B7285}
.home-v4 .h-scan input:focus-visible{outline:none}
.home-v4 .h-scan .h-btn{flex:none}
.home-v4 .h-cta-note{
  margin-top:var(--s-4);font-size:12.5px;color:#6B7285;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.home-v4 .h-cta-note svg{width:14px;height:14px;flex:none}

/* ═══════════════ motion ═══════════════
   Small distances, quick durations. A 20px rise over 700ms reads as the page
   settling; a 60px rise over 1.2s reads as waiting for the page. */

html.js .home-v4 .rv{opacity:0;transform:translateY(14px)}
html.js .home-v4 .rv.in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
html.js .home-v4 .rv-s{opacity:0;transform:scale(.985)}
html.js .home-v4 .rv-s.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}

html.js .home-v4 .h-card.in .h-kw u::after{transition:width .9s var(--ease-out) .15s;width:var(--w)}
html.js .home-v4 .h-card.in .h-kw:nth-child(3) u::after{transition-delay:.26s}
html.js .home-v4 .h-card.in .h-kw:nth-child(4) u::after{transition-delay:.37s}
html.js .home-v4 .h-card.in .h-kw:nth-child(5) u::after{transition-delay:.48s}
html:not(.js) .home-v4 .h-kw u::after{width:var(--w)}

html.js .home-v4 .h-step.in::before{transition:transform .7s var(--ease-out);transform:scaleX(1)}

/* The typing caret. JS owns the text; CSS owns the cursor. */
.home-v4 .h-sb-a.typing::after{
  content:'';display:inline-block;width:2px;height:1em;margin-left:2px;
  background:var(--violet-3);vertical-align:-.14em;animation:h-caret 1s steps(1) infinite;
}
@keyframes h-caret{50%{opacity:0}}
html.js .home-v4 .h-serp.anim .h-chip{opacity:0;transform:translateY(6px)}
html.js .home-v4 .h-serp.anim .h-chip.in{
  opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  .home-v4 *,.home-v4 *::before,.home-v4 *::after{
    animation:none!important;transition:none!important;
  }
  .home-v4 .rv,.home-v4 .rv-s{opacity:1!important;transform:none!important}
  .home-v4 .h-kw u::after{width:var(--w)!important}
  .home-v4 .h-step::before{transform:scaleX(1)!important}
  .home-v4 .h-serp .h-chip{opacity:1!important;transform:none!important}
  .home-v4 .h-pan{animation:none!important}
  /* Freeze the headline on its completed form rather than on the first
     platform — 'all six of them' is the sentence the rotation exists to
     arrive at, so a reader who never sees motion should get the conclusion. */
  .home-v4 .h-rot-i{opacity:0!important}
  .home-v4 .h-rot-i.fin{opacity:1!important;transform:none!important}
}

/* ═══════════════ responsive ═══════════════ */

/* `1fr` is `minmax(auto,1fr)`, and `auto` floors at the content's min-content
   width — so a grid track will happily grow past the viewport rather than let
   its contents shrink. The app window's indented rows did exactly that on a
   phone. `minmax(0,1fr)` is the fix; body{overflow-x:hidden} only hid it. */
@media (max-width:1080px){
  .home-v4 .h-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .home-v4 .h-hero .lead{max-width:56ch}
  .home-v4 .h-split{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .home-v4 .h-serp-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .home-v4 .h-flow{grid-template-columns:repeat(3,1fr);row-gap:var(--s-6)}
  .home-v4 .h-flow::before{display:none}
  .home-v4 .h-legend{position:static}
  .home-v4 .h-steps{grid-template-columns:repeat(2,1fr);row-gap:var(--s-6)}
  .home-v4 .h-surf,.home-v4 .h-svc{grid-template-columns:repeat(2,1fr)}
  .home-v4 .h-deliv{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}
@media (max-width:720px){
  .home-v4 .h-hero{padding-top:var(--s-6)}
  .home-v4 h1{font-size:clamp(34px,9vw,46px)}
  .home-v4 .h-pans{min-height:302px}
  .home-v4 .h-eng-list{gap:5px}
  .home-v4 .h-eng-i{font-size:11px;padding:5px 9px}
  .home-v4 .h-serp{padding:12px}
  .home-v4 .h-sb{padding:12px 12px 12px 36px}
  .home-v4 .h-imgs{grid-template-columns:repeat(3,1fr)}
  .home-v4 .h-vids{grid-template-columns:repeat(2,1fr)}
  .home-v4 .h-surf,.home-v4 .h-svc,.home-v4 .h-steps{grid-template-columns:minmax(0,1fr)}
  .home-v4 .h-btns{width:100%}
  .home-v4 .h-btns .h-btn{flex:1 1 auto;justify-content:center}
  .home-v4 .h-flow{grid-template-columns:repeat(2,1fr);row-gap:var(--s-6)}
  .home-v4 .h-flow::before{display:none}
  .home-v4 .h-scan{flex-direction:column;border-radius:var(--r-lg);padding:10px}
  .home-v4 .h-scan input{text-align:center}
  .home-v4 .h-scan .h-btn{width:100%}
  .home-v4 .h-claim{gap:12px}
}