/* ===========================================================================
   RELENTIX — ink: the blue + pink type layer

   The site's type is white on navy, with one word per heading already picked
   out in brand blue. Ink adds the second voice without touching that blue:

   - PATCH (.pt)   one word per statement set on a solid block, tilted 1.5deg,
                   dark navy letters on top. Pink leads, blue answers, and the
                   moving mesh (.pt-mesh) is kept for two or three moments.
   - UNDERLINE     a marker bar under a phrase: pink (.ul-pink), blue
     (.ul)         (.ul-blue), or the signature duo — a blue stroke with a pink
                   one offset beneath it (.ul-duo).
   - STRIKE        a blue line through a word the copy is rejecting.
   - INK           small white labels move to pink; open questions and open
                   steps turn pink; selection and caret are pink.

   Motion: a patch paints left to right like a marker and an underline draws
   in, once, as the phrase reaches the reading area (ink.js adds `.on`).
   A patch carries its own word as `data-t`; the painted copy is a clipped
   ::after laid exactly over the white word, so the ink crosses the letters
   instead of fading them. Without ink.js every mark renders finished.
   =========================================================================== */

:root{
  --ink-blue:#00A3FF;
  --ink-blue-2:#7CCBFF;
  --ink-pink:#FFABEE;      /* brand pink — patch fills and label text   (11.6:1 on navy) */
  --ink-pink-2:#FF7ADB;    /* deeper pink — thin strokes hold on navy    (8.7:1) */
  --ink-on:#020617;        /* letters on a filled patch */
  --ink-paper:#F8FAFC;     /* the white the patch paints over */
  --ink-mesh:
    radial-gradient(at 8% 85%,#FFABEE 0,#0000 58%),
    radial-gradient(at 92% 12%,#00A3FF 0,#0000 56%),
    radial-gradient(at 72% 96%,#FF7ADB 0,#0000 50%),
    radial-gradient(at 34% 4%,#7CCBFF 0,#0000 52%),
    #D9C6FF;
  --ink-ease:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ patch */
.pt{
  --pt-fill:var(--ink-pink);
  position:relative;
  display:inline-block;
  white-space:nowrap;
  padding:0 .2em;
  margin:0 .02em;
  line-height:1.3;
  font-style:normal;
  color:var(--ink-on);
  -webkit-text-fill-color:var(--ink-on);
  background:var(--pt-fill);
  transform:rotate(var(--pt-r,-1.5deg));
  text-shadow:none;
}
/* display headings: hug the capitals so the block never crowds the next line */
h1 .pt,h2 .pt,h3 .pt,.manifesto .pt{line-height:.84;padding:.07em .13em .02em}

.pt-pink{--pt-fill:var(--ink-pink)}
.pt-blue{--pt-fill:var(--ink-blue)}
.pt-mesh{--pt-fill:var(--ink-mesh);background-size:240% 240%;animation:inkMesh 7s ease-in-out infinite alternate}
.pt-tilt{--pt-r:1.2deg}

/* painted version (data-t is written in the markup, so there is no flash) */
.ink .pt[data-t]{
  background:none;
  animation:none;
  color:var(--ink-paper);
  -webkit-text-fill-color:var(--ink-paper);
}
.ink .pt[data-t]::after{
  content:attr(data-t);
  content:attr(data-t) / "";
  position:absolute;inset:0;
  padding:inherit;
  white-space:nowrap;
  background:var(--pt-fill);
  color:var(--ink-on);
  -webkit-text-fill-color:var(--ink-on);
  clip-path:inset(-2px 100% -2px 0);
  transition:clip-path .95s var(--ink-ease) var(--pt-d,.1s);
  pointer-events:none;
}
.ink .pt-mesh[data-t]::after{background-size:240% 240%;animation:inkMesh 7s ease-in-out infinite alternate}
.ink .pt[data-t].on::after{clip-path:inset(-2px 0 -2px 0)}

@keyframes inkMesh{
  0%{background-position:0% 30%}
  100%{background-position:100% 70%}
}

/* the hero lines rise first; the patch lands after them. The patch keeps its
   tilt inside the line's own clip box — the lines' reveal masks are left
   untouched so nothing can paint in the strip above a line. */
.hero .pt,.page-hero .pt{--pt-d:1.1s;--pt-r:-1deg}
.page-hero .pt{--pt-r:-.75deg}
.hero h1 .pt,.page-hero h1 .pt{line-height:.8;padding:.015em .12em .01em}

/* a clipped-text gradient must never wrap a patch (GPU Chrome paints a ghost
   of the line above it). Titles that carry one move their gradient onto the
   plain words instead — see `.sheen` on the home hero. */
.page-title.ink-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink-paper);-webkit-text-fill-color:var(--ink-paper)}
.page-title.ink-title .title-sheen{background:linear-gradient(100deg,#F8FAFC 55%,#7CCBFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* -------------------------------------------------------------- underline */
.ul{
  --ul-c:var(--ink-pink-2);
  --ul-w:max(2px,.075em);
  background:linear-gradient(var(--ul-c),var(--ul-c)) 0 calc(100% - .04em)/100% var(--ul-w) no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.08em;
}
.ul-pink{--ul-c:var(--ink-pink-2)}
.ul-blue{--ul-c:var(--ink-blue)}
/* the signature: blue stroke, pink stroke offset beneath and to the right */
.ul-duo{
  background:
    linear-gradient(var(--ink-blue),var(--ink-blue)) 0 calc(100% - .17em)/100% var(--ul-w) no-repeat,
    linear-gradient(var(--ink-pink-2),var(--ink-pink-2)) .24em calc(100% - .02em)/100% var(--ul-w) no-repeat;
  padding-bottom:.12em;
}
/* headings (Saira Condensed): the inline box ends .44em under the baseline, so
   bars are placed from that edge to sit just under the capitals — close
   enough that a second line of tight display leading never runs into them */
h1 .ul,h2 .ul,h3 .ul{
  --ul-w:max(2px,.065em);
  padding-bottom:0;
  background-position:0 calc(100% - .29em);
}
h1 .ul-duo,h2 .ul-duo,h3 .ul-duo{
  --ul-w:max(2px,.055em);
  background-position:0 calc(100% - .31em),.2em calc(100% - .205em);
}
/* small ruled headings (the principles ledger) need a firmer bar to read as colour */
.led h3 .ul{--ul-w:3px;background-position:0 calc(100% - .14em)}

/* ----------------------------------------------------------------- strike */
.ink-x{
  --x-c:var(--ink-blue);
  background:linear-gradient(var(--x-c),var(--x-c)) 0 58%/100% .085em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* drawn versions */
.ink .ul{background-size:0% var(--ul-w);transition:background-size 1.1s var(--ink-ease) var(--ul-d,.15s)}
.ink .ul-duo{background-size:0% var(--ul-w),0% var(--ul-w)}
.ink .ul.on{background-size:100% var(--ul-w)}
.ink .ul-duo.on{background-size:100% var(--ul-w),100% var(--ul-w)}
.ink .ink-x{background-size:0% .085em;transition:background-size .7s var(--ink-ease) .2s}
.ink .ink-x.on{background-size:100% .085em}
.hero .ul{--ul-d:1.6s}

/* ------------------------------------------------------------ ink in copy */
.tx-pink{color:var(--ink-pink)}
.tx-blue{color:var(--ink-blue-2)}

/* the manifesto fills word by word on scroll; its patch and strike ride the
   same `.on` the fill uses, so they paint and release with the reading */
.manifesto .w.pt{opacity:1}
.manifesto .w.pt[data-t]{color:rgba(248,250,252,.14);-webkit-text-fill-color:rgba(248,250,252,.14)}
.manifesto .w.pt[data-t]::after{transition-duration:.6s;transition-delay:0s}
.manifesto .w.ink-x{transition:opacity .4s,background-size .6s var(--ink-ease)}

/* ----------------------------------------------------------- small labels */
.lp-role,
.info .met span,
.voice figcaption span,
.rail-lbl{color:var(--ink-pink)}

/* "Trusted by": bare type in warm gold, with light running through the
   letters continuously — the one gold mark on the page, so it reads as proof */
.clients-lbl{color:#FFC94D}
.clients-badge{
  display:inline-block;white-space:nowrap;
  font-weight:800;font-size:clamp(15px,1.25vw,18px);letter-spacing:.3em;
  background:linear-gradient(100deg,#FFC23A 0%,#FFD45C 30%,#FFFBEA 45%,#FFD45C 60%,#FFC23A 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:goldFlow 3.6s linear infinite;
}
.clients-badge i{display:none}
@keyframes goldFlow{from{background-position:125% 0}to{background-position:-125% 0}}
@media(prefers-reduced-motion:reduce){.clients-badge{animation:none;background-position:50% 0}}

/* open state reads pink: the question you are reading, the step you opened */
.fq button>span:not(.pl){transition:color .35s var(--ink-ease)}
.fq.on button>span:not(.pl){color:var(--ink-pink)}
.fq:not(.on) button:hover>span:not(.pl){color:#FFD3F5}
.pstep .t{transition:color .35s var(--ink-ease)}
.pstep li.on .t{color:var(--ink-pink)}
.phz-s:hover b{color:var(--ink-pink)}
.phz-s b{transition:color .35s var(--ink-ease)}

/* footer + nav: links warm to pink on hover */
footer .f-legal a:hover,footer .footer-link:hover,footer .f-nav a:hover,footer .f-col a:hover{color:var(--ink-pink)}

/* -------------------------------------------------------- browser surfaces */
::selection{background:var(--ink-pink);color:var(--ink-on);-webkit-text-fill-color:var(--ink-on)}
input,textarea,select{caret-color:var(--ink-pink-2)}

/* ------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .pt-mesh,.ink .pt-mesh[data-t]::after{animation:none}
  .ink .pt[data-t]::after{transition:none;clip-path:inset(-2px 0 -2px 0)}
  .ink .ul{transition:none;background-size:100% var(--ul-w)}
  .ink .ul-duo{background-size:100% var(--ul-w),100% var(--ul-w)}
  .ink .ink-x{transition:none;background-size:100% .085em}
}

/* a promise inside running copy: heavier than the sentence around it */
.ul.ul-strong{font-weight:600;color:#F8FAFC}

/* services: the "What you get" tick — emerald into the brand cyan, with a slow sonar pulse */
/* services: open step's description reads a touch heavier */
.pstep .d p{font-weight:600;color:#D3DDEB}
.outcome>span{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 120% at 30% 22%,#D6F0FF 0%,#4CC2FF 30%,#00A3FF 58%,#0A3D8F 100%);color:#021431;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 3px rgba(2,20,49,.5),0 0 0 1px rgba(0,163,255,.6),0 0 0 6px rgba(0,163,255,.14),0 8px 22px -8px rgba(0,163,255,.8)}
.outcome>span canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;z-index:0;pointer-events:none}
/* metallic sheen band, swept by anime.js (src/metal-tick.js) */
.outcome>span .mt-sheen{position:absolute;inset:-40%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.0) 40deg,rgba(240,250,255,.85) 70deg,rgba(255,255,255,0) 100deg,transparent 200deg,rgba(186,230,255,.5) 250deg,transparent 290deg);mix-blend-mode:soft-light}
.outcome>span svg{position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
/* Play-Store-style progress arc riding the coin's rim (driven in src/metal-tick.js) */
.outcome>span .mt-ring{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 2px rgba(125,211,255,.95)) drop-shadow(0 0 5px rgba(0,163,255,.8))}
.outcome>span{overflow:visible}
.outcome>span canvas,.outcome>span .mt-sheen-wrap{border-radius:50%}
.outcome>span .mt-sheen-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
/* constant blue face; the sheen layer is now a still, soft beam of light */
.outcome>span .mt-sheen{inset:0;background:radial-gradient(70% 70% at 35% 30%,rgba(255,255,255,.55),rgba(125,211,255,.15) 55%,transparent 75%);mix-blend-mode:screen}
.outcome>span>svg:not(.mt-ring){color:#FFFFFF;filter:drop-shadow(0 1px 1px rgba(2,20,49,.6))}

/* ---- tick coin palette: change these five values to retune the colour ---- */
.outcome{
  --tick-face-hi:#8FD3FF;   /* light catching the top-left */
  --tick-face:#1E8FE0;      /* main blue of the coin */
  --tick-face-lo:#0B3A78;   /* deep edge */
  --tick-ring-a:#E6F6FF;    /* moving rim line: head */
  --tick-ring-b:#5CC4FF;    /* moving rim line: body */
  --tick-ring-c:#1E8FE0;    /* moving rim line: tail */
}
.outcome>span{background:radial-gradient(120% 120% at 30% 22%,var(--tick-face-hi) 0%,var(--tick-face) 50%,var(--tick-face-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(2,20,49,.45),0 0 0 1px rgba(30,143,224,.5),0 0 0 6px rgba(30,143,224,.1),0 6px 18px -8px rgba(30,143,224,.6)}
.outcome>span .mt-sheen{background:radial-gradient(60% 60% at 35% 30%,rgba(255,255,255,.35),rgba(143,211,255,.1) 55%,transparent 75%)}
.outcome>span .mt-ring{filter:drop-shadow(0 0 2px rgba(92,196,255,.7))}
/* rim line in the site's pink; coin face stays blue */
.outcome{--tick-ring-a:#FFE3F7;--tick-ring-b:#FFABEE;--tick-ring-c:#FF7ADB}
.outcome>span .mt-ring{filter:drop-shadow(0 0 2px rgba(255,122,219,.75))}
/* deeper pink rim, softer blue face */
.outcome{--tick-ring-a:#FF9BDF;--tick-ring-b:#F062C4;--tick-ring-c:#C93A9E;
  --tick-face-hi:#A9DCFA;--tick-face:#4A9FD8;--tick-face-lo:#1F4F86}
.outcome>span .mt-ring{filter:drop-shadow(0 0 2px rgba(201,58,158,.7))}

/* wavy progress ring (Android 'expressive' style) around the blue coin */
.outcome{--tick-wave:#FF4FB8;--tick-track:rgba(255,79,184,.18)}
.outcome>span .mt-ring{inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);filter:drop-shadow(0 0 3px rgba(255,79,184,.65))}
.outcome>span .mt-track{fill:none;stroke:var(--tick-track);stroke-width:1.6}
.outcome>span .mt-wave{fill:none;stroke:var(--tick-wave);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.outcome>span{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(2,20,49,.45)}