/* ============================================================
   LEADMOVES — "Field Manual"
   A technical-editorial broadsheet. Paper, ink, one accent.
   Type: Newsreader (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
   ============================================================ */

:root{
  --paper:      #0A0B14;   /* navy blue-black brand base */
  --paper-2:    #11131E;   /* recessed band             */
  --card:       #161A28;   /* raised card, slight blue  */
  --card-2:     #1D2132;   /* extra-raised / hover      */
  --ink:        #ECE7D9;   /* cream text                */
  --ink-2:      #9E9A8E;   /* muted warm grey           */
  --ink-3:      #6C695F;   /* tertiary / labels         */
  --line:       rgba(236,231,217,.13);
  --line-2:     rgba(236,231,217,.22);
  --line-soft:  rgba(236,231,217,.06);
  --red:        #F0274E;   /* Leadmoves brand red       */
  --red-ink:    #D11E40;
  --amber:      #E8A24A;   /* warm complement          */
  --green:      #54C083;   /* booked / positive         */
  --blue:       #6FA3EA;   /* signal / data, cool       */
  --ink-panel:  #ECE7D9;   /* the one CREAM contrast panel */
  --ink-panel-2:#E2DCCB;
  --cream:      #ECE7D9;
  --cream-ink:  #14140F;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.28);
  --shadow:     0 4px 14px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);

  --display: "Anton", "Arial Narrow", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Schibsted Grotesk", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --r-lg: 20px;
  --r: 13px;
  --r-sm: 9px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
#book{ scroll-margin-top:80px; }
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  background-image:
    radial-gradient(125% 80% at 50% -10%, rgba(40,46,78,.5), transparent 56%),
    radial-gradient(100% 60% at 50% 112%, rgba(240,39,78,.07), transparent 60%),
    linear-gradient(180deg,#0C0E1A 0%, #0A0B14 55%, #07080F 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:440;
  line-height:1.62;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--ink); color:var(--paper); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p{ margin:0; }

/* faint film-grain texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:screen; opacity:.6;
}

/* ---------- layout primitives ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); position:relative; z-index:1; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.section{ padding-block:clamp(84px,10vw,156px); border-top:1px solid var(--line); position:relative; z-index:1; }
.section:first-of-type{ border-top:0; }

/* tonal rhythm — dark bands step between base & raised */
.tone-raise{ background:linear-gradient(180deg, rgba(236,231,217,.035), rgba(236,231,217,.01) 60%, transparent); }
.tone-deep{ background:linear-gradient(180deg, #07080F, #050610); box-shadow:inset 0 1px 0 rgba(0,0,0,.5); }
.tone-deep + .section, .tone-raise + .section{ border-top-color:var(--line-soft); }

/* brand devices */
.hl{ background:var(--red); color:var(--cream); padding:.03em .14em .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.kick .idx::before, .meta .idx::before{ content:"\25B8  "; color:var(--red); }

/* mono kicker / index labels */
.kick{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px;
}
.kick .idx{ color:var(--red); }
.tick{ width:22px; height:1px; background:var(--line-2); display:inline-block; }

/* section header: mono index gutter + editorial head */
.shead{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; margin-bottom:clamp(48px,6vw,80px); }
.shead .lead{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:start; }
.shead .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1.9; }
.shead .meta b{ color:var(--ink); font-weight:600; }
.shead h2{ font-family:var(--display); font-weight:400; font-size:clamp(32px,4.4vw,54px); line-height:1.02; letter-spacing:.002em; text-transform:none; text-wrap:balance; }
.shead h2 em{ font-style:normal; color:var(--red); font-weight:400; }
.shead .dek{ margin-top:18px; max-width:54ch; color:var(--ink-2); font-size:clamp(16px,1.4vw,18.5px); font-weight:480; }
@media(max-width:760px){ .shead .lead{ grid-template-columns:1fr; gap:14px; } }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap;
  padding:13px 20px; border:1px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn svg{ width:15px; height:15px; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-fill{ background:var(--red); border-color:var(--red); color:#fdf3ef; }
.btn-fill:hover{ background:var(--red-ink); border-color:var(--red-ink); color:#fff; transform:translateY(-1px); }
.btn-lg{ padding:16px 26px; font-size:14px; }
.tlink{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .18s; }
.tlink:hover{ border-color:var(--ink); }

/* workflows-style arrow-box CTA: text + accent square */
.btn-arrow{ border:0; padding:9px 14px 9px 18px; gap:11px; background:var(--red); color:#fff; border-radius:12px; box-shadow:0 4px 18px rgba(240,39,78,.38); transition:background .2s, box-shadow .2s, transform .15s; }
.btn-arrow:hover{ background:var(--red-ink); color:#fff; box-shadow:0 6px 26px rgba(240,39,78,.5); transform:translateY(-1px); }
.btn-arrow .ab{ width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.btn-arrow .ab svg{ width:14px; height:14px; color:#fff; }
.btn-arrow:hover .ab{ transform:translate(2px,-2px); }

/* ===========================================================
   NAV
   =========================================================== */
/* ===========================================================
   TOP CREDENTIAL TICKER — thin strip at the very top
   =========================================================== */
.topcreds{ position:relative; z-index:40; overflow:hidden; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(236,231,217,.025), rgba(236,231,217,.005)); }
.topcreds-track{ display:flex; width:max-content; animation:tcrScroll 42s linear infinite; }
.topcreds:hover .topcreds-track{ animation-play-state:paused; }
.tcr-set{ display:flex; align-items:center; flex:none; }
.tcr-item{ display:inline-flex; align-items:center; gap:6px; padding:8px 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.tcr-k{ color:var(--ink); font-weight:500; }
.tcr-sep{ color:var(--red); opacity:.7; margin:0 22px; font-size:8px; }
@keyframes tcrScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .topcreds-track{ animation:none; } }

/* ===========================================================
   NAV — floating glass capsule
   =========================================================== */
.nav{ position:sticky; top:0; z-index:50; background:transparent; border:0; padding:14px var(--gut) 0; pointer-events:none; }
.nav.scrolled .nav-in{ background:rgba(14,16,26,.9); box-shadow:var(--shadow-lg); }
.nav-in{ pointer-events:auto; max-width:max-content; margin:0 auto; display:flex; align-items:center; gap:clamp(16px,3vw,40px); height:auto; padding:9px 9px 9px 22px; border-radius:16px;
  background:rgba(16,19,30,.7); backdrop-filter:blur(16px) saturate(1.2); border:1px solid var(--line-2); box-shadow:var(--shadow); transition:background .3s, box-shadow .3s; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:22px; letter-spacing:.02em; text-transform:uppercase; }
.brand .mk{ width:13px; height:13px; background:var(--red); display:inline-block; transform:rotate(45deg); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a.nl{ position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); transition:color .15s; white-space:nowrap; }
.nav-links a.nl::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background:#fff; transform:scaleX(0); transform-origin:left center; transition:transform .17s cubic-bezier(.4,0,.2,1); }
.nav-links a.nl:hover{ color:var(--ink); }
.nav-links a.nl:hover::after{ transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .nav-links a.nl::after{ transition:none; } }
@media(max-width:820px){ .nav-links .nl{ display:none; } }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(52px,7vw,88px); }

/* hero credential badges — floating, scattered, not aligned */
.hero-creds{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hc-badge{ position:absolute; pointer-events:auto; width:248px; display:flex; align-items:center; gap:13px; background:rgba(22,26,40,.66); backdrop-filter:blur(10px) saturate(1.1); border:1px solid var(--line-2); border-radius:13px; padding:12px 14px; box-shadow:0 14px 38px rgba(0,0,0,.4); transition:transform .25s, border-color .25s; }
.hc-badge.b1{ top:clamp(130px,15vw,190px); right:22%; rotate:-4deg; animation:hcFloat 7s ease-in-out infinite; }
.hc-badge.b2{ top:clamp(240px,28vw,310px); right:30%; rotate:3deg; animation:hcFloat 8.4s ease-in-out -2.4s infinite; }
.hc-badge.b3{ top:clamp(305px,35vw,390px); right:21%; rotate:-2.5deg; animation:hcFloat 7.8s ease-in-out -4.8s infinite; }
.hc-badge:hover{ border-color:var(--line-2); transform:scale(1.03); z-index:2; }
@property --hc-ang{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
.hc-badge::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  background:conic-gradient(from var(--hc-ang), transparent 0deg, transparent 248deg, rgba(236,231,217,.45) 300deg, #fff 330deg, rgba(236,231,217,.45) 352deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none; }
.hc-badge:hover::after{ opacity:1; animation:hcTrace 2.4s linear infinite; }
@keyframes hcTrace{ to{ --hc-ang:360deg; } }
@media(prefers-reduced-motion:reduce){ .hc-badge:hover::after{ animation:none; opacity:.5; } }
@keyframes hcFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -11px; } }
@media(prefers-reduced-motion:reduce){ .hc-badge{ animation:none; } }
.hc-logo{ width:58px; height:44px; border-radius:9px; background:var(--cream); display:grid; place-items:center; flex:none; overflow:hidden; }
.hc-logo img{ height:26px; width:auto; max-width:46px; object-fit:contain; display:block; }
.hc-logo.sl-icon{ background:none; padding:0; }
.hc-logo.sl-icon img{ width:44px; height:44px; object-fit:cover; border-radius:9px; }
.hc-logo.clay-icon{ background:none; }
.hc-logo.clay-icon img{ height:40px; width:auto; max-width:54px; }
.hc-logo.seal{ background:rgba(240,39,78,.13); color:var(--red); border:1px solid rgba(240,39,78,.42); }
.hc-logo.seal svg{ width:24px; height:24px; }
.hc-txt{ display:flex; flex-direction:column; min-width:0; }
.hc-t{ font-weight:600; font-size:13.5px; letter-spacing:-.01em; }
.hc-s{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.01em; margin-top:2px; }
@media(max-width:1120px){ .hero-creds{ display:none; } }
.hero .dateline{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; margin-bottom:clamp(28px,4vw,44px); }
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,9vw,118px); line-height:.97; letter-spacing:.004em;
  text-transform:uppercase; text-wrap:balance; max-width:15ch; padding-bottom:.1em;
}
.hero h1 em{ font-style:normal; color:var(--red); }
.hero h1 .uline{ background-image:linear-gradient(var(--red),var(--red)); background-size:100% 2px; background-position:0 92%; background-repeat:no-repeat; padding-bottom:.04em; }
.hero-row{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:end; margin-top:clamp(46px,5.5vw,68px); }
.hero-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.9vw,24px); color:var(--ink-2); max-width:42ch; line-height:1.4; font-weight:420; }
.hero-sub b{ color:var(--ink); font-weight:600; font-style:italic; }
.hero-cta{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.hero-cta .row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
@media(max-width:820px){ .hero-row{ grid-template-columns:1fr; align-items:start; } }

/* hero ledger — measured spec strip, not glowing cards */
.ledger{ margin-top:clamp(44px,6vw,72px); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); display:grid; grid-template-columns:repeat(2,1fr); }
.ledger .col{ padding:22px clamp(14px,2vw,26px); border-left:1px solid var(--line); }
.ledger .col:first-child{ border-left:0; padding-left:0; }
.ledger .n{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.01em; }
.ledger .n .u{ font-size:.42em; color:var(--ink-3); }
.ledger .red{ color:var(--red); }
.ledger .l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; }
@media(max-width:680px){ .ledger{ grid-template-columns:1fr 1fr; } .ledger .col{ border-left:1px solid var(--line); } .ledger .col:nth-child(odd){ border-left:0; padding-left:0; } .ledger .col:nth-child(n+3){ border-top:1px solid var(--line); } }

/* client credit line — typeset, not logo soup */
.clients{ padding-block:24px; display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,56px); align-items:baseline; }
.clients .cl-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.clients .cl-names{ display:flex; flex-wrap:wrap; gap:6px 46px; font-family:var(--serif); font-size:clamp(18px,2.1vw,26px); color:var(--ink); }
.clients .cl-names span{ position:relative; }
.clients .cl-names span+span::before{ content:"·"; position:absolute; left:-13px; color:var(--ink-3); }
/* real client logos: normalized to a consistent optical envelope, uniform white */
.clients .cl-names{ display:flex; flex-wrap:nowrap; align-items:center; gap:0 clamp(44px,4.5vw,68px); }
.clients .cl-names .cl-logo-img{ max-height:26px; max-width:118px; width:auto; height:auto; object-fit:contain; display:block; opacity:.8; flex:none; transition:opacity .25s; filter:brightness(0) invert(1); }
.clients .cl-names .cl-logo-img:hover{ opacity:1; }
/* emblem logos (stacked icon + wordmark) need extra height to match wordmark presence */
.clients .cl-names img[alt="Generali"]{ max-height:42px; max-width:52px; }
.clients .cl-names img[alt="TikTok"]{ max-height:27px; max-width:118px; }
.clients .cl-names img[alt="GoPro"]{ max-height:32px; }
.clients .cl-names img[alt="Canon"]{ max-width:96px; }
.clients .cl-names .cl-logo::before{ content:none !important; }
@media(max-width:680px){ .clients{ grid-template-columns:1fr; gap:12px; } }

/* ===========================================================
   PROBLEM
   =========================================================== */
.prob-grid{ display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,56px); align-items:start; }
.prob-stand{ font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1.18; letter-spacing:-.01em; color:var(--ink); }
.prob-list{ display:flex; flex-direction:column; }
.prob-item{ display:grid; grid-template-columns:46px 1fr; gap:8px clamp(18px,2.5vw,34px); padding:26px 0; border-top:1px solid var(--line); }
.prob-item:first-child{ border-top:0; padding-top:0; }
.prob-num{ font-family:var(--mono); font-size:13px; color:var(--red); padding-top:6px; }
.prob-h{ font-family:var(--serif); font-size:clamp(20px,2vw,25px); font-weight:600; letter-spacing:-.015em; line-height:1.14; }
.prob-p{ color:var(--ink-2); margin-top:8px; max-width:48ch; }
.prob-q{ grid-column:2; margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--ink); border-left:2px solid var(--red); padding:4px 0 4px 14px; line-height:1.5; }
.prob-q .who{ display:block; color:var(--ink-3); margin-top:6px; letter-spacing:.04em; }
@media(max-width:760px){ .prob-grid{ grid-template-columns:1fr; gap:28px; } }

/* ===========================================================
   SYSTEM / FLOW GRAPH (blueprint schematic)
   =========================================================== */
.fg-hint{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); margin-bottom:18px; }
.fg-hint svg{ width:15px; height:15px; }
.fg-hint b{ color:var(--ink); font-weight:600; }

.flowwrap{ border:1px solid var(--line-soft); background:transparent; border-radius:var(--r-lg); box-shadow:none; position:relative; }
.flowwrap::before,.flowwrap::after{ display:none; }
.flowwrap::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.flowwrap::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.fg-scroll{ overflow:hidden; position:relative; }
.fg-dotgrid{ position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; background-position:13px 13px; opacity:0; display:none; }
.fg-stage{ position:relative; transform-origin:top center; margin:0 auto; }
.fg-edges{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.fg-edge-base{ fill:none; stroke:rgba(236,231,217,.32); stroke-width:1.3; }
.fg-edge-flow{ fill:none; stroke:rgba(236,231,217,.85); stroke-width:1.7; stroke-linecap:round; stroke-dasharray:13 200; filter:drop-shadow(0 0 3px rgba(236,231,217,.4)); animation:fgflow 2.8s linear infinite; }
.fg-edge-flow.cool{ stroke:var(--green); filter:drop-shadow(0 0 3px rgba(84,192,121,.5)); }
@keyframes fgflow{ from{ stroke-dashoffset:226; } to{ stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce){ .fg-edge-flow{ animation:none; } }

.fg-node{ position:absolute; background-color:#e9e4d7; background-image:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); border:1px solid rgba(20,22,32,.16); padding:13px 15px; cursor:grab; user-select:none; touch-action:none;
  display:flex; flex-direction:column; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.34); transition:border-color .15s, box-shadow .15s, transform .15s; }
.fg-node:hover{ border-color:rgba(20,22,32,.42); box-shadow:0 10px 28px rgba(0,0,0,.44); transform:translateY(-1px); }
.fg-node.dragging{ cursor:grabbing; border-color:#16192a; box-shadow:0 14px 36px rgba(0,0,0,.5); z-index:5; }
.fg-node.key{ border-color:var(--red); background-color:#f2ddd8; box-shadow:0 0 0 1px rgba(240,39,78,.3), 0 6px 22px rgba(240,39,78,.26); }
.fg-node.out{ border-color:var(--green); background-color:#dcebde; box-shadow:0 0 0 1px rgba(87,184,121,.3), 0 6px 22px rgba(87,184,121,.22); }
.fg-ic{ position:absolute; top:11px; right:13px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(20,22,32,.06); border:1px solid rgba(20,22,32,.18); color:#3a3c46; }
.fg-ic svg{ width:15px; height:15px; }
.fg-ic.tint-red{ color:var(--red); border-color:rgba(240,39,78,.5); background:rgba(240,39,78,.13); }
.fg-ic.tint-green{ color:#2f8a52; border-color:rgba(47,138,82,.45); background:rgba(47,138,82,.13); }
.fg-ic.tint-amber{ color:#3a3c46; border-color:rgba(20,22,32,.18); background:rgba(20,22,32,.06); }
.fg-t{ font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:-.005em; padding-right:30px; color:#16192a; }
.fg-s{ font-family:var(--mono); font-size:11px; color:#5d5a50; margin-top:5px; line-height:1.45; letter-spacing:.01em; padding-right:6px; }
.fg-tag{ position:absolute; top:-9px; left:13px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; background:var(--paper-2); padding:2px 7px; border:1px solid var(--line-2); color:var(--ink-2); }
.fg-node.key .fg-tag{ color:var(--red); border-color:rgba(190,58,43,.4); }
.fg-node.out .fg-tag{ color:var(--green); border-color:rgba(63,107,71,.4); }
.fg-meta{ position:absolute; bottom:10px; right:13px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:#6b6860; }
.fg-live{ display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; }
.fg-live .d{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(190,58,43,.5); animation:fgpulse 2s ease-out infinite; }
@keyframes fgpulse{ 0%{box-shadow:0 0 0 0 rgba(190,58,43,.45);} 70%{box-shadow:0 0 0 7px rgba(190,58,43,0);} 100%{box-shadow:0 0 0 0 rgba(190,58,43,0);} }
.fg-num{ font-family:var(--serif); font-size:18px; }
.fg-num.green{ color:var(--green); }
.fg-port{ display:none; }
.fg-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:14px 16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.fg-legend .lg-i{ display:inline-flex; align-items:center; gap:8px; }
.fg-legend .lg-dot{ width:18px; height:2px; background:rgba(236,231,217,.8); }
.fg-legend .lg-dot.cool{ background:var(--green); }
.fg-legend .lg-stat{ margin-left:auto; color:var(--ink); }
.fg-legend .lg-stat .red{ color:var(--red); }

/* stack rail under the system */
.stack-rail{ margin-top:clamp(36px,4vw,52px); border-top:1px solid var(--line); padding-top:26px; }
.stack-rail .sr-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; }
.stack-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.sk{ padding:0 clamp(12px,2vw,22px); border-left:1px solid var(--line); }
.sk:first-child{ border-left:0; padding-left:0; }
.sk .step{ font-family:var(--mono); font-size:11px; color:var(--red); letter-spacing:.1em; }
.sk .verb{ font-family:var(--serif); font-size:20px; margin:6px 0 4px; letter-spacing:-.01em; }
.sk .tool{ font-weight:600; font-size:15px; }
.sk .role{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px; line-height:1.4; }
@media(max-width:760px){ .stack-grid{ grid-template-columns:1fr 1fr; gap:18px 0; } .sk{ border-left:1px solid var(--line); padding-left:18px; } .sk:nth-child(odd){ border-left:0; padding-left:0; } }

/* ===========================================================
   PROOF / RESULTS
   =========================================================== */
.feat{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; border:1px solid var(--line-2); }
.feat .left{ padding:clamp(28px,3.5vw,48px); }
.feat .right{ padding:clamp(28px,3.5vw,48px); border-left:1px solid var(--line-2); background:var(--paper-2); display:flex; flex-direction:column; justify-content:center; }
.feat .ftag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:8px; }
.feat .fbig{ font-family:var(--display); font-weight:400; font-size:clamp(60px,8.4vw,108px); line-height:.9; letter-spacing:.004em; margin-top:18px; }
.feat .fsub{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.feat .fstory{ color:var(--ink-2); margin-top:22px; max-width:42ch; }
.feat .fpills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.pill{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:6px 11px; border:1px solid var(--line-2); color:var(--ink-2); }
.feat .fquote{ font-family:var(--serif); font-style:italic; font-weight:440; font-size:clamp(20px,2.2vw,27px); line-height:1.4; letter-spacing:-.008em; }
.feat .fquote b{ font-weight:600; font-style:italic; color:var(--ink); }
.feat .fperson{ display:flex; align-items:center; gap:13px; margin-top:24px; }
.feat .fav{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--mono); font-size:13px; flex:none; }
.feat .fav img{ width:100%; height:100%; object-fit:cover; }
.feat .pn{ font-weight:600; font-size:15px; }
.feat .pr{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
@media(max-width:760px){ .feat{ grid-template-columns:1fr; } .feat .right{ border-left:0; border-top:1px solid var(--line-2); } }

/* unified case-study grid — all studies side by side */
.csgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(26px,3vw,40px); }
.cscard{ display:flex; flex-direction:column; gap:14px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-lg); padding:22px 22px 18px; transition:border-color .2s, transform .2s, box-shadow .2s; }
.cscard:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.cscard.is-feat{ border-color:rgba(240,39,78,.5); box-shadow:0 0 0 1px rgba(240,39,78,.18), 0 14px 40px rgba(240,39,78,.1); background:linear-gradient(180deg, rgba(240,39,78,.05), transparent 60%), var(--card); }
.cs-head{ display:flex; align-items:center; justify-content:space-between; gap:11px; min-height:24px; }
.cs-logo{ height:21px; width:auto; max-width:148px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
.cs-av{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--paper-2); flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:0; color:var(--ink-2); }
.cs-av img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.cs-id{ min-width:0; flex:1; }
.cs-co{ font-weight:600; font-size:15px; letter-spacing:-.01em; }
.cs-cat{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; margin-top:2px; }
.cs-badge{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); border:1px solid rgba(240,39,78,.4); border-radius:5px; padding:3px 7px; align-self:flex-start; }
.cs-hero{ display:flex; flex-direction:column; gap:3px; padding:6px 0 2px; border-top:1px solid var(--line); }
.cs-big{ font-family:var(--display); font-weight:400; font-size:clamp(34px,3.6vw,46px); line-height:.95; letter-spacing:.004em; color:var(--ink); }
.cscard.is-feat .cs-big{ color:var(--red); }
.cs-bsub{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.01em; }
.cs-desc{ font-size:13.5px; line-height:1.5; color:var(--ink-2); margin:0; }
.cs-stats{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.cs-stat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-3); background:rgba(236,231,217,.05); border:1px solid var(--line); border-radius:6px; padding:5px 9px; white-space:nowrap; }
.cs-stat b{ color:var(--ink); font-weight:500; }
.cs-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid var(--line); }
.cs-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.cs-meta{ min-width:0; }
.cs-face{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; background:var(--paper-2); }
.cs-face img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.cs-who .nm{ font-weight:600; font-size:13px; }
.cs-who .rl{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:1px; }
.cs-watch{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:6px 11px; white-space:nowrap; transition:border-color .2s, background .2s; }
.cs-watch svg{ width:11px; height:11px; color:var(--red); }
.cs-watch:hover{ border-color:var(--red); background:rgba(240,39,78,.08); }
.cs-running{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-3); }
.cs-running .d{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.cscard{ position:relative; }
.cs-cover{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.cscard > .cs-video, .cscard .cs-foot{ position:relative; z-index:2; }
.cs-read{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:5px 11px; white-space:nowrap; transition:border-color .18s, background .18s; }
.cs-read svg{ width:12px; height:12px; color:var(--red); transition:transform .18s; }
.cs-read:hover{ border-color:var(--red); background:rgba(240,39,78,.08); }
.cscard:hover .cs-read svg{ transform:translateX(3px); }

/* ROI calculator */
.roi{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:820px){ .roi{ grid-template-columns:1fr; } }
.roi-inputs{ border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); background:var(--card); display:flex; flex-direction:column; gap:clamp(26px,3vw,38px); justify-content:center; }
.roi-field{ display:flex; flex-direction:column; gap:15px; }
.roi-label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.roi-val{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,30px); color:var(--ink); letter-spacing:.004em; }
.roi-field input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--red) var(--p,25%), rgba(236,231,217,.16) var(--p,25%)); outline:none; cursor:pointer; }
.roi-field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--red); cursor:pointer; box-shadow:0 2px 9px rgba(0,0,0,.45); transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease; }
.roi-field input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--red); cursor:pointer; box-shadow:0 2px 9px rgba(0,0,0,.45); transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease; }
.roi-field input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.14); }
.roi-field input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.22); box-shadow:0 3px 16px rgba(240,39,78,.55); }
.roi-field input[type=range]:hover::-moz-range-thumb{ transform:scale(1.14); }
.roi-field input[type=range]:active::-moz-range-thumb{ transform:scale(1.22); box-shadow:0 3px 16px rgba(240,39,78,.55); }
.roi-big, .rs-n{ font-variant-numeric:tabular-nums; }
.roi-assume{ font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-3); display:flex; align-items:center; gap:9px; line-height:1.5; }
.roi-assume b{ color:var(--ink); font-weight:500; }
.roi-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
.roi-out{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); background:var(--card); display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.06); }
.roi-head{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.roi-big{ font-family:var(--display); font-weight:400; font-size:clamp(44px,6.4vw,78px); line-height:1; letter-spacing:.004em; color:var(--red); margin-top:14px; }
.roi-sub{ color:var(--ink-2); font-size:14px; margin-top:9px; }
.roi-funnel{ display:flex; align-items:stretch; gap:10px; margin:clamp(22px,3vw,30px) 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.roi-step{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.rs-n{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.3vw,30px); color:var(--ink); line-height:1; letter-spacing:.004em; }
.rs-n.red{ color:var(--red); }
.rs-l{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.roi-arrow{ align-self:center; color:var(--ink-3); font-family:var(--mono); font-size:14px; }
.roi-out .btn{ margin-top:4px; justify-content:center; }
.roi-fine{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:14px; line-height:1.5; }
@media(max-width:900px){ .csgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .csgrid{ grid-template-columns:1fr; } }

/* results table */
.rtable{ margin-top:clamp(28px,3vw,40px); border-top:1px solid var(--line-2); }
.rrow{ display:grid; grid-template-columns:54px 1.4fr 1fr 1.6fr; gap:clamp(14px,2.5vw,34px); align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); }
.rrow .rmark{ font-family:var(--mono); font-size:12px; color:var(--ink); border:1px solid var(--line-2); width:34px; height:34px; display:grid; place-items:center; }
.rrow .rco{ font-family:var(--serif); font-size:clamp(19px,1.9vw,23px); letter-spacing:-.01em; }
.rrow .rco .rcat{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.rrow .rstat{ font-family:var(--serif); font-size:clamp(24px,3vw,34px); line-height:1; letter-spacing:-.01em; }
.rrow .rstat .u{ font-size:.42em; color:var(--ink-3); }
.rrow .rdesc{ color:var(--ink-2); font-size:15px; }
@media(max-width:760px){ .rrow{ grid-template-columns:40px 1fr; gap:6px 16px; } .rrow .rstat{ grid-column:2; margin-top:8px; } .rrow .rdesc{ grid-column:2; } }

/* live snapshot */
.snap{ margin-top:clamp(28px,3vw,40px); border:1px solid var(--line-2); }
.snap-head{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.snap-head .st{ color:var(--ink); }
.snap-head .when{ margin-left:auto; }
.snap-head .live{ display:inline-flex; align-items:center; gap:6px; color:var(--green); }
.snap-head .live .d{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.snap-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.snap-grid .box{ padding:22px 18px; border-left:1px solid var(--line); }
.snap-grid .box:first-child{ border-left:0; }
.snap-grid .num{ font-family:var(--serif); font-size:clamp(26px,3vw,38px); line-height:1; }
.snap-grid .box.pos .num{ color:var(--green); }
.snap-grid .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
@media(max-width:680px){ .snap-grid{ grid-template-columns:1fr 1fr 1fr; } .snap-grid .box{ border-top:1px solid var(--line); } }

/* ===========================================================
   APPROACH (operating principles + credentials)
   =========================================================== */
.appr-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.appr{ padding:clamp(24px,3vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.appr .ai{ width:30px; height:30px; color:var(--ink); display:grid; place-items:center; margin-bottom:18px; }
.appr .ai svg{ width:22px; height:22px; }
.appr .an{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--red); }
.appr h4{ font-family:var(--serif); font-weight:430; font-size:clamp(19px,1.9vw,23px); letter-spacing:-.01em; margin:8px 0 10px; line-height:1.12; }
.appr p{ color:var(--ink-2); font-size:15px; max-width:42ch; }
@media(max-width:680px){ .appr-grid{ grid-template-columns:1fr; } }

.creds{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:clamp(32px,4vw,48px); }
.cred{ display:flex; align-items:center; gap:11px; border:1px solid var(--line-2); padding:13px 16px; }
.cred .cb{ width:26px; height:26px; display:grid; place-items:center; color:var(--red); border:1px solid rgba(190,58,43,.4); flex:none; }
.cred .cb svg{ width:15px; height:15px; }
.cred .ct{ font-weight:600; font-size:14px; }
.cred .cs{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em; }

/* ===========================================================
   MANIFESTO break (the one ink panel)
   =========================================================== */
.manifesto{ background:var(--ink-panel); color:var(--cream-ink); border:0; border-radius:var(--r-lg); }
.manifesto .wrap{ padding-block:clamp(80px,11vw,150px); }
.manifesto .mk{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8a7f6c; display:flex; align-items:center; gap:10px; }
.manifesto .mk .tick{ background:rgba(27,24,19,.3); }
.manifesto h2{ font-family:var(--display); font-weight:400; font-size:clamp(38px,5.6vw,76px); line-height:1.0; letter-spacing:.002em; text-transform:none; margin-top:30px; max-width:18ch; text-wrap:balance; }
.manifesto h2 .ghost{ color:#bcae99; }
.manifesto h2 em{ font-style:normal; color:var(--red); }
.manifesto p{ color:#5a5246; max-width:52ch; margin-top:38px; font-size:clamp(16px,1.5vw,19px); }

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ max-width:880px; margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:clamp(18px,2.2vw,26px) 16px; margin-inline:-16px; border-radius:12px; transition:color .25s ease, background-color .3s ease, padding .25s ease; }
.faq-item summary:hover{ background-color:rgba(236,231,217,.04); }
.faq-item[open] summary{ background-color:rgba(236,231,217,.03); }
.faq-item summary::-webkit-details-marker{ display:none; }
.fq-q{ flex:1; font-family:var(--display); font-weight:400; font-size:clamp(18px,1.9vw,23px); letter-spacing:.004em; line-height:1.15; color:var(--ink); transition:color .2s; }
.faq-item:hover .fq-q{ color:var(--ink); }
.fq-ic{ position:relative; width:18px; height:18px; flex:none; }
.fq-ic::before,.fq-ic::after{ content:""; position:absolute; background:var(--red); border-radius:2px; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease; }
.fq-ic::before{ top:8px; left:0; width:18px; height:2px; }
.fq-ic::after{ top:0; left:8px; width:2px; height:18px; }
.faq-item[open] .fq-ic::after{ transform:rotate(90deg); opacity:0; }
.fq-a{ overflow:hidden; }
.fq-a p{ margin:0; padding:0 56px clamp(20px,2.4vw,28px) 4px; color:var(--ink-2); font-size:clamp(14px,1.25vw,16px); line-height:1.6; max-width:64ch; }
.fq-a p:has(+ .fq-list){ padding-bottom:12px; }
.fq-list{ margin:0 0 clamp(20px,2.4vw,28px); padding:0 56px 0 24px; max-width:64ch; color:var(--ink-2); font-size:clamp(14px,1.25vw,16px); line-height:1.55; display:flex; flex-direction:column; gap:8px; }
.fq-list li{ list-style:disc; padding-left:4px; }
.fq-list li::marker{ color:var(--red); }
.faq-item[open] .fq-a p{ animation:faqOpen .5s ease .08s both; }
@keyframes faqOpen{ from{ opacity:0; } to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .faq-item[open] .fq-a{ animation:none; } }

/* ===========================================================
   FINAL CTA + FOOTER
   =========================================================== */
.final{ text-align:left; }
.final .badge{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.final .badge .d{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.final h2{ font-family:var(--display); font-weight:400; font-size:clamp(42px,6.2vw,86px); line-height:.98; letter-spacing:.002em; text-transform:none; margin:24px 0; max-width:17ch; text-wrap:balance; }
.final h2 em{ font-style:normal; color:var(--red); font-weight:400; }
.final p{ color:var(--ink-2); max-width:50ch; font-size:clamp(16px,1.5vw,19px); }
.final .frow{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:34px; }
.final .fnote{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }

.footer{ border-top:1px solid var(--line); padding-block:30px; }
.footer-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); }
.footer-in .brand{ font-family:var(--display); font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ color:var(--ink-2); border-bottom:1px solid transparent; padding-bottom:1px; }
.footer-links a:hover{ border-color:var(--ink-2); }

/* ---------- reveal (JS-gated so content is never hidden without JS) ---------- */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ===========================================================
   MOTION LAYER — "signals flying through the system"
   =========================================================== */
.signal-field{ position:absolute; top:0; left:0; right:0; height:108vh; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 92%); mask-image:linear-gradient(180deg,#000 58%,transparent 92%); }
.sig{ position:absolute; color:var(--ink); display:block; will-change:transform; }
.sig svg{ width:100%; height:100%; display:block; }
.sig.red{ color:var(--red); }
.sig.blue{ color:var(--blue); }
.sig.amber{ color:var(--amber); }
.sig.green{ color:var(--green); }
@keyframes sig-bob{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(var(--dx,16px),var(--dy,-22px),0) rotate(var(--dr,8deg)); }
  100%{ transform:translate3d(0,0,0) rotate(0deg); }
}
@keyframes sig-stream{
  0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  8%{ opacity:var(--op,.12); }
  92%{ opacity:var(--op,.12); }
  100%{ transform:translate3d(var(--travel,118vw),var(--rise,-8vh),0) rotate(var(--dr,20deg)); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .sig{ animation:none !important; } }

/* breathing glow behind the hero — single restrained light source */
.hero{ overflow:visible; }
.hero .wrap{ isolation:isolate; }
.hero-glow{ position:absolute; inset:-200px 0 auto 0; height:760px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 100% at 50% -4%, rgba(70,82,130,.32), transparent 62%),
    radial-gradient(44% 70% at 26% 30%, rgba(240,39,78,.1), transparent 72%);
  filter:blur(6px); animation:breathe 12s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.04); } }
@media(prefers-reduced-motion:reduce){ .hero-glow{ animation:none; } }

/* animated draw of the hero underline */
.js .hero h1 .uline{ background-size:0% 2px; transition:background-size 1.1s cubic-bezier(.7,0,.3,1) .5s; }
.js .hero h1.in .uline{ background-size:100% 2px; }

/* the red diamond mark gently pulses */
.brand .mk{ animation:mkpulse 4.5s ease-in-out infinite; }
@keyframes mkpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,35,78,0);} 50%{ box-shadow:0 0 14px 1px rgba(231,35,78,.6);} }
@media(prefers-reduced-motion:reduce){ .brand .mk{ animation:none; } }

/* client names: slow marquee for life */
.cl-track-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.cl-track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.cl-track:hover{ animation-play-state:paused; }
.cl-track .cl-names{ flex:none; padding-right:46px; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .cl-track{ animation:none; transform:none; } }

/* hover life on cards / rows */
.appr{ transition:background .25s ease, transform .25s ease; }
.appr:hover{ background:var(--paper-2); transform:translateY(-2px); }
.appr:hover .ai{ color:var(--red); }
.appr .ai{ transition:color .25s ease; }
.rrow{ transition:background .2s ease; }
.rrow:hover{ background:rgba(20,20,15,.025); }
.rrow:hover .rmark{ border-color:var(--red); color:var(--red); }
.rrow .rmark{ transition:border-color .2s, color .2s; }
.cred{ transition:border-color .2s, transform .2s; }
.cred:hover{ border-color:var(--red); transform:translateY(-2px); }
.btn-fill{ position:relative; overflow:hidden; }
.btn-arrow{ position:relative; overflow:hidden; }
/* c3.ai-style glowing sweep across CTAs on hover */
.btn-fill::after, .btn-arrow::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none; z-index:0;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.28) 62%, transparent 100%);
  filter:blur(2px); }
.btn-fill:hover::after, .btn-arrow:hover::after{ transform:translateX(280%) skewX(-18deg); transition:transform .85s cubic-bezier(.22,.61,.36,1); }
.btn-arrow > *{ position:relative; z-index:1; }

/* stack rail icons */
.sk-ic{ width:30px; height:30px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); margin-bottom:14px; transition:border-color .25s, color .25s, transform .25s; }
.sk-ic svg{ width:17px; height:17px; }
.sk:hover .sk-ic{ border-color:var(--red); color:var(--red); transform:translateY(-2px); }

/* small icon chip in section meta */
.sec-ic{ display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid var(--line-2); color:var(--red); margin-bottom:10px; }
.sec-ic svg{ width:15px; height:15px; }

/* ===========================================================
   PROOF EXTRAS — watch links · video case studies · testimonials
   =========================================================== */

/* watch chip (inline, e.g. in results rows) */
.watch{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); padding:5px 10px; transition:color .2s, border-color .2s; white-space:nowrap; }
.watch:hover{ color:var(--red); border-color:var(--red); }
.watch .pl{ width:0; height:0; border-left:7px solid currentColor; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }

/* featured case — right-side stat ledger (replaces duplicate quote) */
.fledger{ display:flex; flex-direction:column; width:100%; }
.fle-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
.fle-row:last-child{ border-bottom:0; }
.fle-row .v{ font-family:var(--serif); font-size:clamp(28px,3.2vw,44px); line-height:1; letter-spacing:-.01em; }
.fle-row .v .red{ color:var(--red); }
.fle-row .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:right; max-width:15ch; line-height:1.5; }

/* intro film (VSL) */
.film{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(28px,4.5vw,68px); align-items:center; }
.film-rail .film-h{ font-family:var(--display); font-weight:400; font-size:clamp(34px,3.7vw,52px); line-height:1.0; letter-spacing:.004em; text-transform:uppercase; margin-top:18px; }
.film-rail .film-h em{ font-style:normal; color:var(--red); }
.film-rail .film-dek{ margin-top:16px; color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); max-width:34ch; line-height:1.5; }
.film-rail .tlink{ display:inline-block; margin-top:24px; }
.film-frame{ position:relative; aspect-ratio:16/9; border:1px solid var(--line-2); overflow:hidden; background:#000; box-shadow:0 18px 50px rgba(0,0,0,.34); }
.film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media(max-width:820px){ .film{ grid-template-columns:1fr; gap:26px; } }

/* video case studies */
.videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vcard{ position:relative; display:block; border:1px solid var(--line-2); background:var(--card); overflow:hidden; transition:border-color .2s, transform .2s; }
.vcard:hover{ border-color:var(--red); transform:translateY(-3px); }
.vthumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.vthumb img{ width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .25s, transform .5s; }
.vcard:hover .vthumb img{ opacity:1; transform:scale(1.04); }
.vplay{ position:absolute; inset:0; display:grid; place-items:center; }
.vplay i{ width:52px; height:52px; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 6px 22px rgba(231,35,78,.45); transition:transform .2s; }
.vcard:hover .vplay i{ transform:scale(1.08); }
.vplay i::after{ content:""; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.vmeta{ padding:16px 18px 18px; }
.vmeta .vco{ font-family:var(--serif); font-size:20px; letter-spacing:-.01em; }
.vmeta .vstat{ font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:.04em; margin-top:5px; }
.vmeta .vwho{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:9px; letter-spacing:.04em; }
@media(max-width:760px){ .videos{ grid-template-columns:1fr; } }

/* smartlead credential bar */
.slbar{ display:flex; align-items:center; gap:16px; border:1px solid var(--line-2); padding:16px 20px; margin-top:18px; transition:border-color .2s; }

/* featured webinar (Smartlead Masterclass) */
.webfeat{ display:grid; grid-template-columns:1.06fr 1fr; margin-top:22px; border:1px solid var(--line-2); overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.30); }
.wf-media{ position:relative; display:block; aspect-ratio:16/9; background:#000; overflow:hidden; }
.wf-media img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:opacity .25s, transform .5s; }
.webfeat:hover .wf-media img{ opacity:1; transform:scale(1.03); }
.wf-play{ position:absolute; inset:0; display:grid; place-items:center; }
.wf-play i{ width:64px; height:64px; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 8px 26px rgba(231,35,78,.5); transition:transform .2s; }
.webfeat:hover .wf-play i{ transform:scale(1.08); }
.wf-play i::after{ content:""; border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.wf-live{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(10,11,20,.66); backdrop-filter:blur(6px); border:1px solid var(--line-2); padding:5px 10px; }
.wf-live .d{ width:6px; height:6px; border-radius:50%; background:var(--red); }
.wf-body{ padding:clamp(24px,3vw,42px); border-left:1px solid var(--line-2); background:var(--paper-2); display:flex; flex-direction:column; justify-content:center; }
.wf-eyebrow{ display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.wf-chip{ display:inline-grid; place-items:center; background:var(--cream); padding:5px 9px; border-radius:6px; overflow:hidden; }
.wf-chip img{ height:13px; width:auto; display:block; }
.wf-chip.sl-icon{ background:none; padding:0; }
.wf-chip.sl-icon img{ width:26px; height:26px; object-fit:cover; border-radius:6px; }
.wf-h{ font-family:var(--display); font-weight:400; font-size:clamp(25px,2.5vw,37px); line-height:1.02; letter-spacing:.004em; text-transform:uppercase; margin-top:16px; }
.wf-h em{ font-style:normal; color:var(--red); }
.wf-p{ color:var(--ink-2); margin-top:14px; font-size:clamp(14px,1.2vw,16px); line-height:1.5; max-width:46ch; }
.wf-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; flex-wrap:wrap; }
.wf-host{ display:flex; align-items:center; gap:11px; }
.wf-av{ width:40px; height:40px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-2); flex:none; }
.wf-who{ display:flex; flex-direction:column; line-height:1.3; }
.wf-who b{ font-weight:600; font-size:14px; }
.wf-who span{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.wf-cta{ font-family:var(--mono); font-size:12px; color:var(--ink); display:inline-flex; align-items:center; gap:9px; white-space:nowrap; border-bottom:1px solid var(--red); padding-bottom:3px; }
.wf-cta .pl{ width:7px; height:7px; border-top:2px solid var(--red); border-right:2px solid var(--red); transform:rotate(45deg); display:inline-block; }
@media(max-width:820px){ .webfeat{ grid-template-columns:1fr; } .wf-body{ border-left:0; border-top:1px solid var(--line-2); } }
.wf-lockup{ display:inline-flex; align-items:center; gap:9px; }
.wf-mk{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#fff; }
.wf-mk img{ width:18px; height:18px; object-fit:contain; display:block; }
.wf-x{ color:var(--ink-3); font-size:12px; }

/* case-study video interviews (inside Case studies) */
.cs-interviews{ margin-top:clamp(28px,3.4vw,44px); }
.csi-lab{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }

/* certification seals (cream) */
.cert-lab{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:clamp(34px,4.5vw,54px); margin-bottom:16px; }
.certs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cert{ display:flex; align-items:center; gap:20px; background:var(--cream); color:var(--cream-ink); padding:22px 26px; border-radius:var(--r-lg); box-shadow:0 14px 40px rgba(0,0,0,.28); transition:transform .2s; }
.cert:hover{ transform:translateY(-2px); }
.cert-logo{ display:grid; place-items:center; flex:none; height:30px; }
.cert-logo img{ height:26px; width:auto; display:block; }
.cert-txt{ display:flex; flex-direction:column; line-height:1.25; border-left:1px solid rgba(20,20,15,.16); padding-left:20px; }
.cert-t{ font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:.012em; text-transform:uppercase; }
.cert-s{ font-family:var(--mono); font-size:11px; color:rgba(20,20,15,.58); letter-spacing:.02em; margin-top:4px; }
.certwrap .creds{ margin-top:14px; }
@media(max-width:680px){ .certs{ grid-template-columns:1fr; } }
.slbar:hover{ border-color:var(--red); }
.slbar .sla{ width:42px; height:42px; border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-2); flex:none; }
.slbar .slt{ flex:1; min-width:0; }
.slbar .sle{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.slbar .sltitle{ font-size:16px; margin-top:3px; }
.slbar .sltitle b{ font-weight:600; }
.slbar .slcta{ font-family:var(--mono); font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
@media(max-width:620px){ .slbar .slcta span{ display:none; } }

/* testimonials — drifting marquee of quote cards */
.tmarq{ display:block; overflow:hidden; width:100%; max-width:1780px; margin:0 auto; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%); }
.tmarq-row{ display:flex; gap:16px; width:max-content; will-change:transform; }
.tmarq-row + .tmarq-row{ margin-top:16px; }
.tmarq-row.a{ animation:tmarqL 64s linear infinite; }
.tmarq-row.b{ animation:tmarqR 74s linear infinite; }
.tmarq:hover .tmarq-row{ animation-play-state:paused; }
@keyframes tmarqL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tmarqR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media(prefers-reduced-motion:reduce){ .tmarq-row{ animation:none; } .tmarq{ overflow-x:auto; } }
.tcard{ flex:none; width:358px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-lg); padding:24px 26px 22px; display:flex; flex-direction:column; gap:18px; box-shadow:0 14px 40px rgba(0,0,0,.26); transition:border-color .2s, transform .2s; }
.tcard:hover{ border-color:var(--red); transform:translateY(-3px); }
.tc-q{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:16.5px; line-height:1.5; letter-spacing:-.005em; color:var(--ink); margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.tc-q::before{ content:"\201C"; color:var(--red); margin-right:1px; }
.tc-by{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.tc-av{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--paper-2); flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:0; color:var(--ink-2); }
.tc-av img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.tc-meta{ display:flex; flex-direction:column; min-width:0; }
.tc-n{ font-weight:600; font-size:14px; letter-spacing:-.01em; }
.tc-r{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; margin-top:2px; }
@media(max-width:600px){ .tcard{ width:290px; } }

/* trusted-by client strip */
.trustby{ display:flex; flex-direction:column; align-items:center; gap:18px; margin:6px auto 30px; }
.tb-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.tb-names{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px clamp(28px,3.6vw,52px); }
.tb-names span{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,21px); letter-spacing:.005em; color:var(--ink); opacity:.62; transition:opacity .25s; }
.tb-names span:hover{ opacity:1; }
.tb-names .tb-logo{ display:inline-flex; align-items:center; }
.tb-names .tb-logo img{ height:24px; width:auto; filter:brightness(0) invert(1); opacity:.7; }
.tb-names .tb-logo:hover img{ opacity:1; }
.tb-wall{ display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; max-width:1040px; margin:8px auto 2px; }
.tb-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px clamp(34px,4.2vw,58px); }
.tb-wall img{ width:auto; opacity:.92; transition:opacity .25s; }
.tb-wall img:hover{ opacity:1; }
.tb-names.sm{ max-width:900px; }
.tb-names.sm span{ font-family:var(--display); font-weight:500; font-size:clamp(13px,1.2vw,15px); letter-spacing:.012em; opacity:.46; }

/* ===========================================================
   MID-PAGE CTA — recurring "Book a call" prompt
   =========================================================== */
.midcta{ display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; margin:clamp(46px,6vw,76px) auto 0; }
.midcta .mc-line{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:9px; }
.midcta .mc-line .tick{ width:22px; }
.midcta .mc-line .mc-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 0 0 rgba(84,192,121,.6); animation:mcBreathe 2.4s ease-in-out infinite; }
@keyframes mcBreathe{ 0%,100%{ transform:scale(1); opacity:.85; box-shadow:0 0 0 0 rgba(84,192,121,.5); } 50%{ transform:scale(1.18); opacity:1; box-shadow:0 0 0 7px rgba(84,192,121,0); } }
@media(prefers-reduced-motion:reduce){ .midcta .mc-line .mc-dot{ animation:none; } }
.midcta .btn-arrow{ font-size:16px; padding:15px 18px 15px 28px; gap:14px; border-radius:14px; }
.midcta .btn-arrow .ab{ width:38px; height:38px; border-radius:10px; }
.midcta .btn-arrow .ab svg{ width:17px; height:17px; }

/* ===========================================================
   CASE-STUDY VIDEO — featured social proof
   =========================================================== */
.cs-video{ position:relative; display:block; width:calc(100% + 44px); margin:-22px -22px 4px; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line-2); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--paper-2); cursor:pointer; }
.cs-video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1), filter .3s; filter:saturate(.92) brightness(.82); }
.cs-video:hover img{ transform:scale(1.045); filter:saturate(1) brightness(.92); }
.cs-video::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,20,0) 40%, rgba(10,11,20,.5)); pointer-events:none; }
.cs-vplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:var(--red); display:grid; place-items:center; z-index:2; box-shadow:0 6px 24px rgba(240,39,78,.5); transition:transform .25s cubic-bezier(.16,1,.3,1); }
.cs-video:hover .cs-vplay{ transform:translate(-50%,-50%) scale(1.08); }
.cs-vplay::before{ content:""; width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:3px; }
.cs-vlabel{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.cs-vlabel .d{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(240,39,78,.6); animation:fgpulse 2s ease-out infinite; }

/* co-brand lockup panel (placeholder when no interview is on file) */
.cs-cobrand{ position:relative; display:grid; place-items:center; width:calc(100% + 44px); margin:-22px -22px 4px; aspect-ratio:16/9; overflow:hidden;
  border-bottom:1px solid var(--line-2); border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:radial-gradient(120% 140% at 50% 0%, rgba(236,231,217,.05), rgba(10,11,20,0) 60%), var(--paper-2); }
.cs-cobrand::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,20,0) 55%, rgba(10,11,20,.4)); pointer-events:none; }
.cb-lock{ display:flex; align-items:center; gap:clamp(12px,2vw,20px); padding:0 22px; }
.cb-lm{ display:inline-flex; align-items:center; gap:9px; }
.cb-lm img{ height:21px; width:auto; display:block; }
.cb-lm span{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.7vw,21px); letter-spacing:.01em; color:var(--ink); line-height:1; }
.cb-x{ font-family:var(--display); font-weight:300; font-size:clamp(15px,1.5vw,19px); color:var(--ink-2); opacity:.7; }
.cb-hp{ height:23px; width:auto; display:block; opacity:.96; }
.cb-word{ font-family:var(--display); font-weight:600; font-size:clamp(18px,1.9vw,23px); letter-spacing:-.01em; color:var(--ink); line-height:1; }
.cb-seodr{ height:30px; }

/* internal case-study screenshot panel (user-fillable) */
.cs-shot{ position:relative; width:calc(100% + 44px); margin:-22px -22px 4px; aspect-ratio:16/9; overflow:hidden;
  border-bottom:1px solid var(--line-2); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--paper-2); }
.cs-shot image-slot{ border-radius:0 !important; }
/* built internal mini-dashboard */
.dash{ position:absolute; inset:0; padding:18px 20px 34px; display:flex; flex-direction:column; background:
  linear-gradient(180deg, rgba(236,231,217,.04), rgba(10,11,20,0) 70%), var(--paper-2); }
.dash-top{ display:flex; align-items:baseline; justify-content:space-between; }
.dash-ttl{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.dash-rng{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink-3); }
.dash-big{ font-family:var(--display); font-weight:600; font-size:34px; line-height:1; color:var(--ink); margin-top:8px; }
.dash-big span{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.04em; color:var(--green); margin-left:4px; }
.dash-bars{ margin-top:auto; display:flex; align-items:flex-end; gap:5px; height:46%; }
.dash-bars span{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(180deg, rgba(240,39,78,.85), rgba(240,39,78,.35)); }
.dash-bars span:last-child{ background:linear-gradient(180deg, var(--green), rgba(84,192,121,.45)); box-shadow:0 0 14px rgba(84,192,121,.4); }
.cs-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,20,0) 55%, rgba(10,11,20,.4)); pointer-events:none; z-index:1; }
.cs-shotlabel{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:7px; pointer-events:none; }
.cs-shotlabel .d{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(84,192,121,.6); animation:fgpulse 2s ease-out infinite; }
.cs-av-lm{ background:var(--paper-2); }
.cs-av-lm img{ width:24px; height:24px; object-fit:contain; }

/* Calendly inline embed */
.cal-embed{ margin:clamp(22px,3vw,34px) auto 0; max-width:1040px; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; background:#ffffff; box-shadow:0 24px 60px rgba(0,0,0,.34); }
.cal-embed .calendly-inline-widget{ width:100%; }

/* video lightbox */
.vidlb{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); }
.vidlb.open{ display:flex; }
.vidlb-bg{ position:absolute; inset:0; background:rgba(6,7,13,.82); backdrop-filter:blur(8px); animation:lbFade .25s ease; }
.vidlb-box{ position:relative; width:min(1040px,100%); aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6); border:1px solid var(--line-2); animation:lbRise .3s cubic-bezier(.16,1,.3,1); background:#000; }
.vidlb-frame{ position:absolute; inset:0; }
.vidlb-box iframe{ width:100%; height:100%; border:0; display:block; }
.vidlb-x{ position:absolute; top:-44px; right:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:rgba(22,26,40,.7); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s, border-color .2s; z-index:2; }
.vidlb-x:hover{ background:var(--red); border-color:var(--red); color:#fff; }
@keyframes lbFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lbRise{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

/* ===========================================================
   ORBIT — the stack circling the engine (custom diagram)
   =========================================================== */
.orbit-wrap{ display:grid; grid-template-columns:230px 1fr; gap:clamp(20px,4vw,56px); align-items:center; margin-top:clamp(56px,8vw,104px); padding-top:clamp(48px,6vw,80px); border-top:1px solid var(--line-soft); }
.orbit-copy .ob-k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
.orbit-copy h3{ font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.0; letter-spacing:.005em; }
.orbit-copy p{ color:var(--ink-2); font-size:15px; margin-top:14px; max-width:30ch; }
.orbit{ position:relative; width:clamp(300px,42vw,540px); aspect-ratio:1; margin:0 auto; justify-self:center; }
.orbit-ring{ position:absolute; inset:0; margin:auto; border:1px dashed var(--line-2); border-radius:50%; }
.orbit-ring.r-a{ width:100%; height:100%; --r:clamp(150px,21vw,240px); }
.orbit-ring.r-b{ width:64%; height:64%; --r:clamp(116px,16vw,178px); }
.orbit-rot{ position:absolute; inset:0; }
.r-a .orbit-rot{ animation:orbit-cw 50s linear infinite; }
.r-b .orbit-rot{ animation:orbit-ccw 36s linear infinite; }
@keyframes orbit-cw{ to{ transform:rotate(360deg); } }
@keyframes orbit-ccw{ to{ transform:rotate(-360deg); } }
.ochip{ position:absolute; top:50%; left:50%; transform:rotate(var(--a,0deg)) translate(var(--r,200px)) rotate(calc(-1 * var(--a,0deg))); }
.r-a .oc-spin{ animation:orbit-ccw 50s linear infinite; }
.r-b .oc-spin{ animation:orbit-cw 36s linear infinite; }
.oc{ transform:translate(-50%,-50%); }
.oc .pill2{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink); background:var(--card); border:1px solid var(--line-2); padding:7px 12px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.oc .pill2 .d{ width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none; }
.oc .pill2.red .d{ background:var(--red); }
.oc .pill2.green .d{ background:var(--green); }
.orbit-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26%; height:26%; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 38%, rgba(231,35,78,.22), var(--card) 70%); border:1px solid var(--red); box-shadow:0 0 0 6px rgba(231,35,78,.06), 0 10px 40px rgba(231,35,78,.2); }
.orbit-hub .hb-mk{ width:12px; height:12px; background:var(--red); transform:rotate(45deg); margin:0 auto 8px; }
.orbit-hub .hb-t{ font-family:var(--display); text-transform:uppercase; font-size:clamp(13px,1.5vw,18px); letter-spacing:.02em; line-height:1; }
.orbit-hub .hb-s{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.orbit-pulse{ position:absolute; top:50%; left:50%; width:26%; height:26%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--red); animation:obpulse 3.4s ease-out infinite; pointer-events:none; }
@keyframes obpulse{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.5; } 100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; } }
@media(prefers-reduced-motion:reduce){ .orbit-rot,.oc-spin,.orbit-pulse{ animation:none !important; } }
@media(max-width:760px){ .orbit-wrap{ grid-template-columns:1fr; gap:30px; } }

/* ===========================================================
   CASE-STUDY CAROUSEL (rotating proof)
   =========================================================== */
.candid{ display:flex; gap:14px; align-items:flex-start; border-left:2px solid var(--amber); padding:6px 0 6px 18px; margin:clamp(28px,3vw,40px) 0; max-width:64ch; }
.candid .ct{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.9vw,24px); line-height:1.4; letter-spacing:-.005em; color:var(--ink); }
.carousel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
.carousel-head .ch-l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.carousel-head .ch-nav{ display:flex; gap:8px; }
.cnav{ width:38px; height:38px; border:1px solid var(--line-2); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s; }
.cnav:hover{ border-color:var(--red); color:var(--red); }
.cnav svg{ width:16px; height:16px; }
.ccarousel{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; padding-bottom:4px; }
.ccarousel::-webkit-scrollbar{ display:none; }
.ccarousel.dragging{ cursor:grabbing; scroll-snap-type:none; }
.ccard{ flex:0 0 clamp(280px,82%,372px); scroll-snap-align:start; border:1px solid var(--line-2); background:var(--card); padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; transition:border-color .2s; }
.ccard:hover{ border-color:var(--line-2); }
.cc-top{ display:flex; align-items:center; gap:12px; }
.cc-av{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; background:var(--paper-2); display:grid; place-items:center; font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.cc-av img{ width:100%; height:100%; object-fit:cover; }
.cc-co{ font-family:var(--serif); font-size:20px; line-height:1; letter-spacing:-.01em; }
.cc-cat{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; margin-top:4px; }
.cc-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.cc-m .v{ font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1; color:var(--amber); }
.cc-m .v.red{ color:var(--red); }
.cc-m .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; line-height:1.4; }
.cc-desc{ color:var(--ink-2); font-size:14px; flex:1; }
.cc-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.cc-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); padding:4px 9px; }
.cc-foot{ display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.cc-foot .nm{ font-weight:600; font-size:13px; }
.cc-foot .rl{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }

/* ===========================================================
   PREMIUM CRAFT — lead form · pill badge · depth · gloss
   =========================================================== */
.badge{ display:inline-flex; align-items:center; gap:9px; padding:6px 15px 6px 7px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); box-shadow:0 6px 20px rgba(0,0,0,.3); white-space:nowrap; }
.badge .bi{ width:22px; height:22px; border-radius:50%; background:var(--red); display:grid; place-items:center; flex:none; }
.badge .bi svg{ width:12px; height:12px; color:#fff; }

.leadform{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:14px; background:var(--card); max-width:600px; margin-top:30px; box-shadow:var(--shadow); overflow:hidden; }
.hero .leadform{ width:fit-content; max-width:none; }
.leadform .lf-field{ flex:1; display:flex; align-items:center; border-right:1px solid var(--line); min-width:0; }
.leadform input{ width:100%; background:transparent; border:0; outline:0; padding:0 20px; height:58px; color:var(--ink); font-family:var(--mono); font-size:13px; letter-spacing:.04em; }
.leadform input::placeholder{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.leadform .btn{ border:0; padding:0 26px; height:58px; flex:none; }
@media(max-width:600px){ .leadform{ flex-direction:column; max-width:none; } .leadform .lf-field{ border-right:0; border-bottom:1px solid var(--line); } .leadform .btn{ width:100%; justify-content:center; } }

/* soft depth on key cards (workflows-grade layering) */
.feat, .snap, .ccard, .vcard, .tq, .flowwrap, .appr-grid{ box-shadow:0 18px 50px rgba(0,0,0,.30); }
.slbar{ box-shadow:0 12px 36px rgba(0,0,0,.28); }

/* node gloss on the schematic */
.fg-node{ background-image:linear-gradient(165deg, rgba(240,39,78,.12), rgba(240,39,78,.02) 55%, rgba(240,39,78,0)); }
.orbit-hub, .oc .pill2{ background-image:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%); }

/* final CTA horizon glow */
.cta-glow{ position:absolute; top:-150px; left:50%; transform:translateX(-50%); width:120%; height:560px; z-index:0; pointer-events:none;
  background:radial-gradient(56% 100% at 50% 0%, rgba(231,35,78,.07), transparent 66%); filter:blur(8px); }
.final .wrap{ position:relative; z-index:1; }

/* ===========================================================
   PREMIUM / CLEAN PASS — rounded geometry, calm surfaces, air
   =========================================================== */
/* soft rounded cards */
.flowwrap, .feat, .snap, .ccard, .vcard, .tq, .cred, .slbar, .leadform, .appr, .film-frame, .webfeat{ border-radius:var(--r-lg); }
.btn, .pill, .cc-tag, .watch, .cnav, .fg-node, .fg-ic, .rmark, .sec-ic, .oc .pill2, .vthumb, .snap-grid .box, .ledger{ border-radius:var(--r); }
.fg-ic, .sec-ic, .cnav, .badge .bi{ border-radius:var(--r-sm); }
.leadform .lf-field:first-child{ border-top-left-radius:var(--r-lg); border-bottom-left-radius:var(--r-lg); }
.feat, .snap, .vcard, .vthumb, .ccard, .tq{ overflow:hidden; }

/* kill the sharp registration ticks on the schematic frame (cleaner) */
.flowwrap::before, .flowwrap::after{ display:none; }

/* operating principles: from hairline grid -> calm gapped cards */
.appr-grid{ border:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.appr{ border:1px solid var(--line); }
.appr:hover{ border-color:var(--line-2); box-shadow:0 18px 50px rgba(0,0,0,.34); }
@media(max-width:680px){ .appr-grid{ grid-template-columns:1fr; } }

/* calmer borders + a touch more interior air on cards */
.ccard{ padding:clamp(24px,2.6vw,32px); }
.vmeta{ padding:18px 20px 20px; }
.tq{ padding:28px clamp(24px,2.6vw,32px) 26px; }

/* buttons: slightly softer, smoother */
.btn{ transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-fill{ box-shadow:0 4px 20px rgba(240,39,78,.28); }
.btn-fill:hover{ box-shadow:0 8px 30px rgba(240,39,78,.5); }
.btn-arrow{ box-shadow:0 4px 20px rgba(240,39,78,.42) !important; }
.btn-arrow:hover{ box-shadow:0 8px 30px rgba(240,39,78,.62) !important; }

/* lighter, calmer hairline rules between sections */
.section{ border-top-color:var(--line-soft); }

/* refine the hero ledger into a calm rounded panel */
.ledger{ border:1px solid var(--line); border-radius:14px; padding:6px clamp(10px,2vw,20px); background:var(--card); box-shadow:var(--shadow-sm); }
.ledger .col:first-child{ padding-left:clamp(14px,2vw,26px); }
/* final-CTA form is a lone button — shrink-wrap & center it */
.final .leadform{ width:fit-content; max-width:none; margin-left:auto; margin-right:auto; }

/* brand logo mark — color logo on a light chip so it reads on dark */
.brand-chip{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); flex:none; }
.brand-chip img{ width:24px; height:24px; object-fit:contain; display:block; }
.footer .brand-chip{ width:26px; height:26px; border-radius:7px; }
.footer .brand-chip img{ width:21px; height:21px; }

/* signature mono "old way vs Leadmoves" card */
.codecard{ font-family:var(--mono); font-size:13px; line-height:1.7; border:1px solid var(--line-2); border-radius:12px; background:rgba(8,9,16,.5); overflow:hidden; max-width:480px; }
.codecard .cc-h{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:11px 16px; border-bottom:1px solid var(--line); }
.codecard .cc-old{ padding:12px 16px 4px; color:var(--ink-3); }
.codecard .cc-old s{ text-decoration-color:var(--red); text-decoration-thickness:1.5px; }
.codecard .cc-new{ padding:4px 16px 14px; color:var(--ink); }
.codecard .cc-new b{ color:var(--red); font-weight:500; }

/* ===========================================================
   LIVE BOOKING CONSOLE
   =========================================================== */
.liveconsole{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:0.86fr 1.14fr; gap:clamp(28px,4vw,60px); align-items:center; }
.lc-aside .lc-k{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.lc-aside .lc-k::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(47,158,91,.5); animation:lcPulse 2.2s ease-out infinite; }
@keyframes lcPulse{ 0%{box-shadow:0 0 0 0 rgba(47,158,91,.45);} 70%{box-shadow:0 0 0 7px rgba(47,158,91,0);} 100%{box-shadow:0 0 0 0 rgba(47,158,91,0);} }
.lc-h{ font-family:var(--sans); font-weight:600; font-size:clamp(26px,3vw,38px); line-height:1.06; letter-spacing:-.022em; margin:16px 0 14px; text-wrap:balance; }
.lc-h em{ font-style:normal; color:var(--red); }
.lc-p{ color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); max-width:42ch; }
.lc-stat{ display:flex; align-items:baseline; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.lc-num{ font-family:var(--display); font-size:clamp(40px,5vw,62px); line-height:.9; color:var(--red); display:inline-block; }
.lc-num.pop{ animation:lcPop .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes lcPop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.lc-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); max-width:12ch; line-height:1.4; }

.lc-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.lc-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--card-2); }
.lc-brand{ display:flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.lc-hash{ color:var(--ink-3); font-weight:600; }
.lc-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:none; color:var(--ink-3); }
.lc-live .d{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(47,158,91,.5); animation:lcPulse 2.2s ease-out infinite; }
.lc-feed{ padding:8px 0; display:flex; flex-direction:column; gap:0; background:var(--card);
  min-height:340px; max-height:340px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent); }

/* slack message rows */
.sk-msg{ display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:start; padding:7px 16px;
  animation:lcIn .5s cubic-bezier(.16,1,.3,1) both;
  transition:background .15s ease, opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
.sk-msg:hover{ background:rgba(236,231,217,.035); }
@keyframes lcIn{ from{ transform:translateY(-10px); } to{ transform:none; } }
.sk-msg.leave{ opacity:0; transform:translateY(6px); }
@media(prefers-reduced-motion:reduce){ .sk-msg{ animation:none; } }
.sk-av{ width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:16px; color:#fff; flex:none; }
.sk-av.calendly{ background:#0a66ff; }
.sk-av.smartlead{ background:#5b5bf5; }
.sk-av.clay{ background:#16b8a6; }
.sk-main{ min-width:0; }
.sk-line{ display:flex; align-items:center; gap:7px; }
.sk-name{ font-weight:700; font-size:14px; color:var(--ink); letter-spacing:-.01em; }
.sk-app{ font-family:var(--sans); font-weight:600; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); background:rgba(236,231,217,.09); border-radius:3px; padding:1px 4px; line-height:1.5; }
.sk-time{ font-family:var(--sans); font-size:11px; color:var(--ink-3); }
.sk-text{ display:block; font-size:13.5px; line-height:1.45; color:var(--ink-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-text b{ color:var(--ink); font-weight:600; }
.sk-emoji{ font-style:normal; }
@media(max-width:820px){ .liveconsole{ grid-template-columns:1fr; gap:28px; } }

/* schematic output node booking ping */
.fg-node.out.ping{ animation:fgPing .9s cubic-bezier(.16,1,.3,1); }
@keyframes fgPing{ 0%{ box-shadow:0 0 0 0 rgba(47,158,91,.45); } 60%{ box-shadow:0 0 0 14px rgba(47,158,91,0); } 100%{ box-shadow:0 0 0 0 rgba(47,158,91,0); } }

/* ===========================================================
   HERO TOAST — Slack desktop notification
   =========================================================== */
.hero-toast{ display:none !important; position:absolute; top:clamp(110px,15vw,146px); right:clamp(8px,2vw,28px); z-index:3;
  width:304px; max-width:42vw; display:flex; align-items:flex-start; gap:11px;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:12px 13px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-10px) scale(.96); pointer-events:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.hero-toast.show{ opacity:1; transform:none; }
.ht-slk{ width:34px; height:34px; border-radius:9px; background:#4A154B; display:grid; place-items:center; flex:none; }
.ht-slk .hash{ color:#fff; font-weight:700; font-size:18px; line-height:1; }
.ht-body{ min-width:0; flex:1; }
.ht-line{ display:flex; align-items:center; gap:6px; }
.ht-line b{ font-weight:700; font-size:13.5px; color:var(--ink); letter-spacing:-.01em; }
.ht-app{ font-weight:600; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); background:rgba(236,231,217,.09); border-radius:3px; padding:1px 4px; }
.ht-ch{ font-size:11.5px; color:var(--ink-3); }
.ht-msg{ display:block; font-size:12.5px; line-height:1.4; color:var(--ink-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ht-msg b{ color:var(--ink); font-weight:600; }
.ht-now{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); align-self:flex-start; }
@media(max-width:720px){ .hero-toast{ display:none; } }