/* Inter, variable, self hosted from the official CDN. Variable means the
   weight axis is continuous, so 550 and 600 are real values rather than
   snapping to the nearest static cut the way the old 750 silently did. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1") format("woff2");
}

/* Corp. Rewritten 2026-08-23, third pass.
 *
 * WHY THE SECOND PASS LOOKED WRONG ON A REAL BROWSER
 * It was designed light and rendered dark navy with inverted text, because the
 * `color-scheme` declaration was dropped in the rewrite and Edge force-darkened
 * the whole page. Never ship without it. It is declared explicitly below so no
 * browser gets to decide.
 *
 * THE PALETTE, Zayah's call: black, white, dark grey, a little silver.
 * Monochrome is easier to make look expensive than colour, because nothing can
 * clash. What makes a dark page read premium rather than cheap is restraint:
 * true near-black rather than navy, hairline borders rather than boxes, one
 * accent used sparingly, and type doing the work instead of decoration.
 *
 * No gradients. No glows. No coloured shadows. Those were the tells.
 */

:root {
  color-scheme: dark;          /* the bug that ruined the last pass */

  --black:      #08090a;
  --near:       #0e1011;       /* raised surfaces */
  --card:       #121415;
  --line:       #1f2224;       /* hairlines, barely there */
  --line-lit:   #2b2f32;
  --silver:     #c8ccd0;       /* the only "accent", used sparingly */
  --white:      #f7f8f8;
  --grey:       #9aa0a6;       /* body copy, 7.1:1 on --black */
  --grey-dim:   #6e757b;       /* 4.7:1, clears AA for large and secondary */

  --t-xs:  0.8125rem; --t-sm:  0.9375rem; --t-md:  1.0625rem;
  --t-lg:  1.25rem;   --t-xl:  1.5rem;    --t-2xl: 2rem;
  --t-3xl: 2.75rem;   --t-4xl: 5.25rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-10: 160px;

  --radius: 10px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
/* scroll-behavior is deliberately absent: Lenis drives the scroll and the
   two fight each other if both are on. The reduced motion block below
   restores native behaviour when Lenis is disabled. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  /* Segoe UI first, because this is Windows and ui-sans-serif resolves
     unpredictably here. Inter if it is present, system stack after. */
  font: var(--t-md)/1.65 "InterVariable", Inter, "Segoe UI", -apple-system,
        BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1;
  font-optical-sizing: auto;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-6); }
.narrow { max-width: 720px; }

a { color: var(--white); text-underline-offset: 4px;
    text-decoration-color: var(--line-lit); }
a:hover { text-decoration-color: var(--silver); }

:focus-visible { outline: 2px solid var(--silver); outline-offset: 4px;
                 border-radius: 3px; }

.skip { position: absolute; left: -9999px; background: var(--white);
        color: var(--black); padding: var(--s-3) var(--s-4); z-index: 30; }
.skip:focus { left: 0; top: 0; }

/* --- type --------------------------------------------------------------- */

h1 {
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 620;
  margin: 0 0 var(--s-5);
  text-wrap: balance;          /* even lines instead of one orphan word */
}
h2 {
  font-size: clamp(1.75rem, 4.5vw, var(--t-3xl));
  line-height: 1.08; letter-spacing: -0.035em; font-weight: 600;
  margin: 0 0 var(--s-5); max-width: 20ch;
}
h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em;
     margin: 0 0 var(--s-2); color: var(--white); }

p { margin: 0 0 var(--s-4); color: var(--grey); max-width: 60ch; }
.lede { font-size: var(--t-lg); color: var(--grey); line-height: 1.55;
        margin: 0 0 var(--s-7); max-width: 46ch; }
.small { font-size: var(--t-sm); color: var(--grey-dim); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey-dim);
  margin: 0 0 var(--s-6);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%;
                background: var(--silver); }

/* --- header ------------------------------------------------------------- */

header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(8,9,10,.72);
  backdrop-filter: saturate(1.2) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
header.site.stuck { border-bottom-color: var(--line); }
header.site .wrap { display: flex; align-items: center; gap: var(--s-6);
                    padding-top: var(--s-4); padding-bottom: var(--s-4); }
.brand { font-weight: 600; font-size: var(--t-md); color: var(--white);
         text-decoration: none; letter-spacing: -.02em; margin-right: auto; }
.brand .mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  margin-right: var(--s-2); border: 1px solid var(--line-lit);
  border-radius: 6px; font-size: var(--t-xs); font-weight: 600;
  color: var(--silver); vertical-align: -5px;
}
nav.site { display: flex; gap: var(--s-6); }
nav.site a { color: var(--grey); text-decoration: none; font-size: var(--t-sm);
             font-weight: 400; transition: color .2s var(--ease); }
nav.site a:hover { color: var(--white); }

.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  background: var(--white); color: var(--black);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-weight: 500; font-size: var(--t-sm);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}
.btn:hover { background: var(--silver); color: var(--black); }
.btn.big { padding: var(--s-4) var(--s-6); font-size: var(--t-md); }
.btn.quiet { background: transparent; color: var(--white);
             border-color: var(--line-lit); }
.btn.quiet:hover { background: var(--near); border-color: var(--silver);
                   color: var(--white); }

/* --- sections ----------------------------------------------------------- */

section { padding: var(--s-9) 0; }
section > .wrap > h2 { margin-bottom: var(--s-7); }
section.tight { padding: var(--s-8) 0; }
section + section { border-top: 1px solid var(--line); }

.hero {
  padding: var(--s-9) 0 var(--s-8);
  min-height: 82vh;
  display: grid; place-items: center;
  text-align: center;
  position: relative;
}
/* One soft pool of light behind the headline. Not three coloured blobs; a
   single low-contrast vignette so the black has depth instead of being flat. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 38%,
              rgba(255,255,255,.055), transparent 70%);
}
.hero .wrap { position: relative; }
.hero h1 { max-width: none; margin-left: auto; margin-right: auto;
  white-space: nowrap; font-size: clamp(2rem, 6.2vw, 4.6rem); }
@media (max-width: 560px) { .hero h1 { white-space: normal; max-width: 14ch; } }
.hero .lede { margin-left: auto; margin-right: auto; text-align: center; }
.hero .row { justify-content: center; }
.hero .hero-note { text-align: center; margin-left: auto; margin-right: auto;
  max-width: 46ch; }

/* The approval card. Hairline, not a shadow box. */
.panel { background: var(--near); border: 1px solid var(--line);
         border-radius: var(--radius-lg); padding: var(--s-5); }
.panel-head { display: flex; align-items: center; gap: var(--s-2);
              padding-bottom: var(--s-4); margin-bottom: var(--s-4);
              border-bottom: 1px solid var(--line); }
.panel-head .tag { font-size: var(--t-xs); letter-spacing: .08em;
                   text-transform: uppercase; color: var(--grey-dim); }
.panel-head .live { margin-left: auto; font-size: var(--t-xs);
                    color: var(--silver); }
.quote { font-size: var(--t-sm); color: var(--grey-dim);
         padding-left: var(--s-4); border-left: 1px solid var(--line-lit);
         margin: 0 0 var(--s-5); }
.reply { font-size: var(--t-sm); color: var(--grey); margin: 0 0 var(--s-5); }
.reply strong { color: var(--white); font-weight: 500; }
.panel .btn { font-size: var(--t-xs); padding: var(--s-2) var(--s-4); }

/* --- marquee ------------------------------------------------------------ */

.marquee { border-block: 1px solid var(--line); padding: var(--s-7) 0;
           overflow: hidden; background: var(--black); }
.marquee .label { text-align: center; margin: 0 0 var(--s-6); max-width: none;
                  font-size: var(--t-xs); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--grey-dim); }
.track { display: flex; width: max-content; animation: slide 28s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track .item { display: flex; align-items: center; gap: var(--s-3);
               padding: 0 var(--s-7); font-size: var(--t-md); font-weight: 500;
               color: var(--grey-dim); white-space: nowrap;
               transition: color .25s var(--ease); }
.track .item:hover { color: var(--silver); }
.track .item svg { width: 19px; height: 19px; flex: none; }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
                   mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* --- cards -------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-3); }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Hairline dividers instead of gaps. Reads as one object, not scattered boxes. */
.grid > * { background: var(--black); padding: var(--s-6);
            border: 1px solid var(--line); border-radius: var(--radius-lg);
            transition: background .3s var(--ease), border-color .3s var(--ease); }
.grid > *:hover { background: var(--near); border-color: var(--line-lit); }
.grid p:last-child { margin-bottom: 0; }
.step { display: block; font-size: var(--t-xs); letter-spacing: .1em;
        text-transform: uppercase; color: var(--grey-dim);
        margin-bottom: var(--s-4); }

.stat { display: block; font-size: clamp(2rem, 5vw, var(--t-3xl));
        font-weight: 600; letter-spacing: -.04em; line-height: 1;
        margin-bottom: var(--s-3); color: var(--white); }

/* --- price -------------------------------------------------------------- */

.price { border: 1px solid var(--line-lit); border-radius: var(--radius-lg);
         padding: var(--s-7); background: var(--near); }
.figure { font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 600;
          letter-spacing: -.045em; line-height: 1; margin: 0;
          color: var(--white); }
.per { font-size: var(--t-md); font-weight: 400; color: var(--grey-dim);
       letter-spacing: -.01em; }
.price ul { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.price li { padding-left: var(--s-6); position: relative;
            margin-bottom: var(--s-3); color: var(--grey); font-size: var(--t-sm); }
.price li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border-left: 1.5px solid var(--silver);
  border-bottom: 1.5px solid var(--silver); transform: rotate(-45deg); }

/* --- footer ------------------------------------------------------------- */

footer.site { border-top: 1px solid var(--line); padding: var(--s-8) 0;
              color: var(--grey-dim); font-size: var(--t-sm); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--s-5);
                    justify-content: space-between; }
footer.site a { color: var(--grey); text-decoration: none; }
footer.site a:hover { color: var(--white); }

/* --- prose pages -------------------------------------------------------- */

.prose { padding: var(--s-8) 0 var(--s-9); max-width: 46em; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-8); max-width: none; }
.prose ul { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); color: var(--grey); }
.prose code { background: var(--near); border: 1px solid var(--line);
              padding: 2px 6px; border-radius: 5px; font-size: .9em;
              color: var(--silver); }
.updated { color: var(--grey-dim); font-size: var(--t-sm);
           margin-bottom: var(--s-7); }
.note { background: var(--near); border-left: 2px solid var(--silver);
        padding: var(--s-5); border-radius: 0 var(--radius) var(--radius) 0; }

/* --- reveal ------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px);
          transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  h1 { max-width: 100%; }
}
@media (max-width: 760px) {
  :root { --s-10: 80px; --s-9: 64px; --s-8: 52px; --s-7: 36px; }
  .wrap { padding: 0 var(--s-5); }
  header.site .wrap { flex-wrap: wrap; gap: var(--s-3); }
  nav.site { order: 3; width: 100%; overflow-x: auto; gap: var(--s-5);
             padding-bottom: var(--s-1); -webkit-overflow-scrolling: touch;
             scrollbar-width: none; }
  nav.site::-webkit-scrollbar { display: none; }
  .grid > * { padding: var(--s-5); }
  .price { padding: var(--s-5); }
  .track .item { padding: 0 var(--s-5); font-size: var(--t-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .track { animation: none; }
}

/* --- the closing guarantee ---------------------------------------------- */
/* The strongest claim on the page, so it gets the most room and the least
   decoration. Centred, larger than a normal section heading, nothing competing
   with it. */
.guarantee { padding: var(--s-10) 0; text-align: center; position: relative; }
.guarantee::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 45%,
              rgba(255,255,255,.05), transparent 72%);
}
.guarantee .wrap { position: relative; }
.guarantee h2 {
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  line-height: 1.06; letter-spacing: -.04em; max-width: none;
  margin: 0 auto var(--s-6);
}
.guarantee .lede { margin-left: auto; margin-right: auto; color: var(--silver); }
.guarantee p { margin-left: auto; margin-right: auto; max-width: 48ch; }
.guarantee .row { justify-content: center; }
@media (max-width: 620px) {
  .guarantee h2 br { display: none; }
  /* Desktop tracking is set for one wide line. Once it wraps it needs room. */
  .guarantee h2 { line-height: 1.18; letter-spacing: -.025em;
                  max-width: 15ch; text-wrap: balance; }
}

/* --- the tool list ------------------------------------------------------ */
/* Sixteen cards in a grid was a wall. A list of hairline rows that open on
   click reads as one object and lets somebody scan the names first.
   Built on <details> so it works with no JavaScript and a screen reader
   already understands it. */

.tools { border-top: 1px solid var(--line); }

.tool { border-bottom: 1px solid var(--line); }

.tool summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-2);
  font-size: var(--t-md); font-weight: 500; color: var(--grey);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary:hover { color: var(--white); padding-left: var(--s-4); }
.tool[open] summary { color: var(--white); }

/* The chevron. Rotates rather than swapping glyphs. */
.tool summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--grey-dim);
  border-bottom: 1.5px solid var(--grey-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.tool[open] summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
  border-color: var(--silver);
}
.tool summary:hover::after { border-color: var(--silver); }

/* Height animation without knowing the height: a grid row from 0fr to 1fr.
   max-height with a guessed pixel value either clips long copy or eases at the
   wrong speed, and this does neither. */
.tool-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.tool[open] .tool-body { grid-template-rows: 1fr; opacity: 1; }
.tool-body > div { overflow: hidden; }
.tool-body p {
  margin: 0; padding: 0 var(--s-7) var(--s-5) var(--s-2);
  color: var(--grey); font-size: var(--t-sm); line-height: 1.7;
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .tool-body { transition: none; }
  .tool summary, .tool summary::after { transition: none; }
}

/* --- the headline value figure ------------------------------------------ */
/* The biggest claim on the page, so it stands alone above the breakdown that
   supports it. The three cards underneath are the answer to "how", which is
   the first thing anybody sensible asks. */
.value { text-align: center; margin-bottom: var(--s-8); }
.value-num {
  display: block;
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 620; letter-spacing: -.05em; line-height: 1;
  color: var(--white);
}
.value-cap {
  margin: var(--s-4) auto 0; max-width: none;
  font-size: var(--t-lg); color: var(--grey);
}

/* --- figures row -------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(3, 1fr);
           gap: var(--s-6); text-align: center; }
.figures div { display: flex; flex-direction: column; gap: var(--s-2); }
.figures span { font-size: clamp(1.6rem, 4vw, var(--t-3xl)); font-weight: 620;
                letter-spacing: -.04em; color: var(--white); line-height: 1; }
.figures em { font-style: normal; font-size: var(--t-sm); color: var(--grey-dim); }

/* --- featured tools ----------------------------------------------------- */
/* The thin accordion read as a settings menu. These are the argument for the
   whole company, so they get numbers, room, and a rule between them. */
.feats { display: grid; gap: 0; }
.feat {
  display: grid; grid-template-columns: 68px 1fr;
  gap: var(--s-5); align-items: start;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.feat:last-of-type { border-bottom: 1px solid var(--line); }
.feat:hover { background: linear-gradient(90deg, rgba(255,255,255,.028), transparent 70%); }
.feat-n {
  font-size: var(--t-sm); font-weight: 500; color: var(--grey-dim);
  letter-spacing: .12em; padding-top: 6px;
  transition: color .3s var(--ease);
}
.feat:hover .feat-n { color: var(--silver); }
.feat h3 { font-size: clamp(1.25rem, 2.6vw, var(--t-xl)); margin-bottom: var(--s-3);
           letter-spacing: -.025em; }
.feat p { margin: 0; max-width: 58ch; }

/* --- the rest ----------------------------------------------------------- */
.more { margin-top: var(--s-8); }
.more-lead { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
             color: var(--grey-dim); margin: 0 0 var(--s-5); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chips span {
  border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--grey);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.chips span:hover { border-color: var(--line-lit); color: var(--white); }

@media (max-width: 760px) {
  .figures { grid-template-columns: 1fr; gap: var(--s-5); }
  .feat { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-6) 0; }
  .feat-n { padding-top: 0; }
}

/* Exactly two across, so four items make a clean 2x2 and there is never an
   orphan cell exposing the grid background. auto-fit fitted three and left the
   fourth alone with a grey gap beside it. */
.grid.pairs { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid.pairs { grid-template-columns: 1fr; } }

/* --- the tool grid, behind a button ------------------------------------- */
.run-head { display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: var(--s-5); }
.run-head h2 { margin: 0; max-width: 18ch; }

.run-grid { display: grid; grid-template-rows: 1fr; overflow: hidden;
            transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease);
            margin-top: var(--s-8); }
.run-grid.collapsed { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
.run-grid > .tgrid { min-height: 0; }
.no-js .run-grid { grid-template-rows: 1fr; opacity: 1; }
.no-js #runToggle { display: none; }

.tgrid { display: grid; gap: var(--s-3); background: none; border: 0;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tcard { background: var(--black); padding: var(--s-6);
         border: 1px solid var(--line); border-radius: var(--radius-lg);
         transition: background .3s var(--ease), border-color .3s var(--ease); }
.tcard:hover { border-color: var(--line-lit); }
.tcard:hover { background: var(--near); }
.tcard svg { width: 22px; height: 22px; color: var(--silver);
             margin-bottom: var(--s-4); display: block; }
.tcard h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.tcard p { font-size: var(--t-sm); margin: 0; color: var(--grey); }

@media (prefers-reduced-motion: reduce) { .run-grid { transition: none; } }

/* --- the tools page ----------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: var(--s-2);
        margin-top: var(--s-6); color: var(--grey); text-decoration: none;
        font-size: var(--t-sm); transition: color .2s var(--ease); }
.back:hover { color: var(--white); }
.back svg { width: 16px; height: 16px; }
.tools-h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--s-4); }

/* --- the tools page ----------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: var(--s-2);
        margin-top: var(--s-6); color: var(--grey); text-decoration: none;
        font-size: var(--t-sm); transition: color .2s var(--ease); }
.back:hover { color: var(--white); }
.back svg { width: 16px; height: 16px; }
.tools-h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--s-4); }

/* --- the enquiry form --------------------------------------------------- */
.talk { margin-top: var(--s-6); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
          margin-bottom: var(--s-4); }
.talk label { display: block; }
.talk label span { display: block; font-size: var(--t-sm); color: var(--grey-dim);
                   margin-bottom: var(--s-2); }
.talk input[type=text], .talk input[type=email], .talk textarea {
  width: 100%; font: inherit; font-size: var(--t-md);
  background: var(--near); color: var(--white);
  border: 1px solid var(--line-lit); border-radius: var(--radius);
  padding: var(--s-4);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.talk textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.talk input:focus, .talk textarea:focus {
  outline: none; border-color: var(--silver); background: #14171a;
}
.talk input::placeholder, .talk textarea::placeholder { color: #4d545b; }
.talk .full { margin-bottom: var(--s-5); }
.talk button { width: auto; }
.talk button[disabled] { opacity: .55; cursor: default; }

/* Off screen rather than display:none, because some bots skip hidden fields. */
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px;
          overflow: hidden; }

.talk-note { margin: var(--s-4) 0 0; font-size: var(--t-sm); min-height: 1.4em; }
.talk-note.ok { color: var(--silver); }
.talk-note.bad { color: #e0a2a2; }

@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }

/* --- the proof line ----------------------------------------------------- */
/* Directly under the hero, above everything else. The claim is that none of
   this is a demo, so it gets its own band rather than becoming a bullet. */
.proofline { border-top: 1px solid var(--line); padding: var(--s-7) 0; }
.proofline p {
  margin: 0 auto; max-width: 46ch; text-align: center;
  font-size: var(--t-lg); line-height: 1.5; color: var(--white);
  letter-spacing: -.015em;
}
@media (max-width: 620px) { .proofline p { font-size: var(--t-md); } }

/* --- the tools page ----------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: var(--s-2);
        margin-top: var(--s-6); color: var(--grey); text-decoration: none;
        font-size: var(--t-sm); transition: color .2s var(--ease); }
.back:hover { color: var(--white); }
.back svg { width: 16px; height: 16px; }
.tools-h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--s-4); }

/* --- the tools page ----------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: var(--s-2);
        margin-top: var(--s-6); color: var(--grey); text-decoration: none;
        font-size: var(--t-sm); transition: color .2s var(--ease); }
.back:hover { color: var(--white); }
.back svg { width: 16px; height: 16px; }
.tools-h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--s-4); }


/* Log in, top right. Quiet by default and solid on hover: a visitor who is not
   a client yet should read the headline first, and a client who is looking for
   the way in should find it exactly where every other product puts it. */
.signin {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 50;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.72);
  backdrop-filter: blur(10px);
  color: #e8ecf1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.signin:hover {
  background: #3d5bd9;
  border-color: #3d5bd9;
  color: #fff;
}
@media (max-width: 560px) {
  /* Absolute, not fixed. A pill that hovers over body copy for the whole
     scroll is worse than one you have to scroll back up for. */
  .signin { position: absolute; top: 12px; right: 12px; padding: 8px 15px;
            font-size: 13px; }
}

/* The dashboard, shown rather than described.
   A prospect reading "you get a dashboard" pictures nothing in particular, so
   this section is mostly photograph. The frames are deliberately plain: a
   browser chrome mockup around a screenshot dates badly and adds nothing, while
   a soft border and a real shadow read as a window into the product. */
.shots { padding: 96px 0 40px; }
.shots h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; margin: 0 0 12px; }
.shots .lede { max-width: 560px; margin: 0 0 44px; }

.shot { margin: 0 0 22px; }

/* Glass around the screenshot, and only around the screenshot.
   Deliberately almost invisible. The job is to make the image look like it is
   floating a little off the page, not to draw a frame somebody notices. That is
   one hairline of light along the top edge, a very thin pane of padding, and a
   large soft shadow underneath doing most of the work. Anything heavier and the
   frame competes with the thing it is framing. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
}

.pane {
  position: relative;
  padding: 3px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 34px 80px rgb(0 0 0 / 50%),
    0 4px 14px rgb(0 0 0 / 30%);
  backdrop-filter: blur(2px);
}

/* The sheen. Fades out by a third of the way down, so it reads as light landing
   on the top edge rather than as a gradient laid over the picture. */
.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 28%);
  pointer-events: none;
}

.shot { margin: 0 0 22px; }

.shot figcaption {
  margin-top: 14px;
  padding: 0 4px;
  color: #8b95a4;
  font-size: 14px;
  max-width: 520px;
}

/* The pair. `align-items: start` stops a two line caption on one side
   stretching that column's pane taller than its neighbour, and the fixed aspect
   ratio guarantees both pictures are the same height whatever the shots happen
   to be. */
.shot-row {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: 34px;
}
.shot-row .pane img { display: block; width: 100%; height: auto; }

/* The ask-for-a-tool pitch, with the phone beside it, because the thing that
   makes this believable is that it is one tap from where they already are. */
.ask {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
  margin-top: 64px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(61, 91, 217, 0.10), rgba(61, 91, 217, 0.02));
}
.ask h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin: 0 0 12px; }
.ask p { margin: 0; max-width: 460px; }
.shot-phone { margin: 0; }
.shot-phone img {
  display: block;
  width: 250px;
  height: auto;
  border-radius: 21px;
}

/* Same pane, sized for a phone. */
.pane-phone {
  padding: 3px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 30px 70px rgb(0 0 0 / 50%);
  backdrop-filter: blur(2px);
  width: max-content;
}

.shot-phone { margin: 0; }

/* The phone, at its own radius. This block used to live INSIDE the media query
   below: a regex rewrite replaced the rule in place and its closing brace ended
   up closing the media query instead of the rule, so every rule after it was
   swallowed into a max-width 820px block and simply never applied on a desktop.
   That is what kept the three column section rendering as two, and then as one. */
.shot-phone img {
  display: block;
  width: 250px;
  height: auto;
  border-radius: 21px;
}

@media (max-width: 820px) {
  .shots { padding: 64px 0 24px; }
  .shot-row { grid-template-columns: 1fr; }
  .ask { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .shot-phone { justify-self: center; }
  .shot-phone img { width: 210px; }
}

/* The three tools that carry the most work.
   Three across on a wide screen, stacked below. These replaced a headline that
   just counted the tools, which told a prospect nothing about whether any of
   them was the one they needed. */
.grid.three-up { grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.big-tool {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent);
}
.big-tool h3 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 10px; }
.big-tool p { margin: 0; color: #8b95a4; font-size: 15px; line-height: 1.65; }

@media (max-width: 900px) {
  .grid.three-up { grid-template-columns: 1fr; gap: 16px; }
  .big-tool { padding: 20px; }
}

/* The ladder.
   Three rungs, and the first two say Free in the same place the third says a
   number. Reading down it, the ask goes up only after the value has already
   been handed over twice, which is the whole point of the shape. */
.ladder { display: grid; gap: 18px; margin-top: 32px; }
.rung {
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
.rung-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d7684;
  margin-bottom: 10px;
}
.rung-price {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.rung-price .per { font-size: 15px; font-weight: 500; color: #8b95a4; letter-spacing: 0; }
.rung h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
.rung p { margin: 0; color: #8b95a4; font-size: 15px; line-height: 1.65; }

/* The last rung is the only one that costs anything, so it is the only one that
   draws attention to itself. */
.rung:last-child {
  border-color: rgba(61, 91, 217, 0.30);
  background: linear-gradient(180deg, rgba(61, 91, 217, 0.10), rgba(61, 91, 217, 0.02));
}

.hero-note {
  margin-top: 18px;
  color: #8b95a4;
  font-size: 15px;
}

@media (min-width: 860px) {
  .ladder { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Equal height cards, with the text left at the top of each.
   Pushing the paragraph down with `margin-top: auto` did equalise the cards,
   but it opened a gap under the two shorter headings that read as a mistake.
   The cards match height because the grid stretches them; the copy just starts
   where it starts. */
.ladder { align-items: stretch; }
.rung { display: flex; flex-direction: column; }

/* Everything we run.
   Twenty five tools as one long list is a wall nobody reads. Grouped by what
   somebody is actually trying to do, with a count on each group so the eye can
   skip to the section that matters, and one card per tool with the service it
   signs into named on its face. */
.tools-h1 { margin-bottom: 10px; }

/* These are <section> elements, so the global `section { padding: var(--s-9) 0 }`
   was adding its own vertical padding on top of this margin and putting half a
   screen of nothing between one group and the next. The border between adjacent
   sections goes too: each group already has its own rule under the heading. */
section.tgroup { padding: 0; margin: 0 0 54px; border-top: 0; }
.tgroup-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 22px;
}
.tgroup-head h2 { font-size: 21px; letter-spacing: -0.02em; margin: 0; }
.tgroup-head p { margin: 0; color: #6d7684; font-size: 14px; flex: 1 1 260px; }
.tgroup-n {
  font-size: 12px;
  font-weight: 700;
  color: #8b95a4;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  padding: 3px 10px;
}

.tgrid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }

.tcard {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  transition: border-color .18s ease, transform .18s ease;
}
.tcard:hover { border-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.tcard h3 { font-size: 16px; margin: 12px 0 6px; letter-spacing: -0.01em; }
.tcard p { margin: 0 0 14px; color: #8b95a4; font-size: 14px; line-height: 1.6; }

/* A coloured dot per service rather than a logo. Nine third party marks on one
   page is a wall of other people's branding, and the colour alone is enough to
   group them once the name is written underneath. */
.tdot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.tdot i { width: 9px; height: 9px; border-radius: 50%; display: block; }

.tconn {
  font-size: 12px;
  color: #6d7684;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  padding-top: 11px;
  display: block;
}

.tfoot { color: #8b95a4; margin: 0 0 18px; }

@media (max-width: 980px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .tgrid { grid-template-columns: 1fr; }
  .tgroup { margin-bottom: 38px; }
}

/* The intro on the tools page. `.tight` stacked its own bottom padding on top
   of the grid wrapper's and left about 300px of empty page between the lede
   and the first group. */
.tools-top { padding: 8px 0 0; }
.tools-top .lede { max-width: 46ch; margin-bottom: 44px; }

/* What we have actually done.
   This replaced a grid of twenty five tools, thirteen of which were labelled
   "still building". That page was a menu for a product Corp does not sell.
   Corp is a service, so the page is evidence: a real figure per card, and then
   the only question that matters. */
.dgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.dcard {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}
.dfig {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.dcard h3 { font-size: 16px; margin: 0 0 8px; letter-spacing: -0.01em; color: #e8ecf1; }
.dcard p { margin: 0; color: #8b95a4; font-size: 14px; line-height: 1.6; }

.askbox {
  margin: 56px 0 20px;
  padding: 40px;
  border: 1px solid rgba(61, 91, 217, 0.30);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(61, 91, 217, 0.10), rgba(61, 91, 217, 0.02));
}
.askbox h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; margin: 0 0 12px; }
.askbox p { max-width: 560px; margin: 0 0 22px; }

@media (max-width: 760px) {
  .dgrid { grid-template-columns: 1fr; }
  .askbox { padding: 26px; margin-top: 38px; }
}

/* Who we are, said once.
   Three lines and a short paragraph, in the gap between the evidence above and
   the detail below, because that is the moment somebody is deciding what kind
   of company this is. Big enough to be the answer, short enough to be read. */
.who { padding: 96px 0; }
.who-line {
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
}
.who-sub { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.65; color: #8b95a4; }
@media (max-width: 760px) { .who { padding: 62px 0; } }

/* The payoff line.
   The three big lines are process. Somebody reading them gets to the end and
   asks what it does for them, so the answer sits immediately underneath at a
   size that reads as part of the statement rather than as small print. */
.who-pay {
  max-width: 620px;
  margin: 30px 0 0;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #cdd3d9;
}

/* The punch.
   Four strengths, each one a sentence somebody could repeat to a business
   partner from memory. Security sits among them rather than in a footer,
   because the first thing anybody thinks when handing over a mailbox is who
   else can see it, and answering that late reads as an afterthought. */
.punch {
  display: grid;
  gap: 34px 30px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pnum {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: #f2f4f6;
}
.pitem p { margin: 0; color: #8b95a4; font-size: 14px; line-height: 1.6; }
@media (max-width: 1080px) {
  .punch { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
}
@media (max-width: 560px) {
  .punch { grid-template-columns: 1fr; gap: 26px; margin-top: 40px;
           padding-top: 32px; }
  .pnum { font-size: 18px; }
  .pitem p { font-size: 15px; }
}

/* The human line.
   Everything above it is what the work does. This is who picks up the phone,
   and it closes the section because it is the note somebody should be left on
   before they read a price. */
.who-hand {
  max-width: 640px;
  margin: 52px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #9aa1a9;
}

/* Control and security, on their own line.
   Tacking these onto the end of a sentence about work buries the two things a
   person actually needs to hear before handing over a mailbox. Given their own
   line with a quiet accent, they read as a promise rather than a caveat. */
.who-safe {
  max-width: 620px;
  margin: 30px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(47, 212, 167, 0.55);
  font-size: 15px;
  line-height: 1.65;
  color: #8b95a4;
}

/* What "we build" actually means.
   Two words on their own invite the wrong picture. This names the shape of the
   work once, right underneath, so nobody has to guess whether we turn up with a
   shovel. */


/* "running now" on a showcase card.
   The page mixes what is live with what we would build, and a reader who cannot
   tell them apart discounts both. Small, green, and set apart from the heading
   so it reads as a fact about the card rather than part of its name. */
.dcard h3 .live {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(47, 212, 167, 0.32);
  background: rgba(47, 212, 167, 0.08);
  color: #2fd4a7;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}


/* The live waiting list line. Empty until the portal answers, and it collapses
   to nothing rather than reserving blank space, because a gap where a number
   should be reads as broken. */
.spots {
  margin: -18px 0 30px;
  font-size: 14px;
  color: #8b95a4;
  letter-spacing: -0.005em;
}
.spots:empty { display: none; }
.spots b { color: #2fd4a7; font-weight: 700; }