/* World D · Signal in the noise: the Tenra site. Night violet ground; every picture on the page is drawn in points.
   Every page uses this sheet: Home, Services, the case studies, Careers, Contact, Privacy and Terms. */
:root {
  --ground: #0F082F;
  --ground-2: #170D43;
  --ink: #F6F3FF;
  --body: #C5BDEE;
  --accent: #C9B8FF;
  --pale: #EEE9FC;
  --warm: #F5B689;
  --panel: rgba(23, 15, 62, 0.8);
  --hair: rgba(201, 184, 255, 0.33);
  --pill-bg: #C9C0FA;
  --pill-ink: #170D43;
  --nav-ink: #F6F3FF;
  --label: #C9B8FF;
  --nav-h: 72px;
  --night:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .75  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 112%, rgba(58, 36, 150, 0.42) 0%, rgba(58, 36, 150, 0) 62%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
}

html { background: var(--ground); scroll-behavior: smooth; }
html.locked { overflow: hidden; }                       /* the contact form is open: the page behind it stays where it is */
section { scroll-margin-top: 40px; }
body::before {            /* the fixed night gradient, with a barely visible grain */
  content: ''; position: fixed; inset: 0; z-index: -1; background: var(--night);
}

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; }
main { position: relative; z-index: 2; }
.nav { z-index: 50; height: var(--nav-h); transition: opacity 0.3s; }
.nav::before {            /* a veil of the night ground, so page content fades out under the nav instead of colliding with it */
  content: ''; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; opacity: var(--veil, 0);
  background: linear-gradient(180deg, rgba(15, 8, 47, 0.96) 0%, rgba(15, 8, 47, 0.86) 58%, rgba(15, 8, 47, 0) 100%);
}
.nav a.link[aria-current='page'] { opacity: 1; color: var(--accent); }     /* the page you are on */
.nav-links { display: contents; }
.nav-toggle { display: none; }
/* a link that leaves the site says so with a small arrow */
.nav a.out::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 6px; background: currentColor; opacity: 0.8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 8 2M3.4 2H8v4.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 8 2M3.4 2H8v4.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the cursor: a small hollow ring; the points part around it */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0;
  transition: opacity 0.3s, width 0.22s, height 0.22s, margin 0.22s, background 0.22s;
}
.cursor.on { opacity: 1; }
.cursor.link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(201, 184, 255, 0.14); }
@media (pointer: fine) { html.ring, html.ring * { cursor: none !important; } }
@media (pointer: coarse) { .cursor { display: none; } }

:is(h1, h2).title { font-size: clamp(32px, min(4.5vw, 8.4vh), 78px); font-weight: 480; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
:is(h1, h2).title.long { font-size: clamp(27px, min(3.75vw, 7.2vh), 66px); line-height: 1.08; text-wrap: balance; }    /* a title that is a whole sentence */
.sentence { display: inline-block; max-width: 100%; }
section header { text-align: center; width: min(92vw, 1130px); margin: 0 auto clamp(36px, 6.4vh, 68px); }
section header.wide { width: min(92vw, 1480px); }

/* ---------------------------------------------------------------- the opening: the headline and the button on the left, the mark forming on the right, the clients' logos along the foot */
.hero { position: relative; height: 100vh; min-height: 460px; --say: clamp(15px, min(1.32vw, 2.7vh), 21px); --band: clamp(64px, 13.5vh, 112px); }
.hero-copy { position: absolute; left: clamp(22px, 4.9vw, 78px); top: calc(50% + (var(--nav-h) - var(--band)) / 2); transform: translateY(-50%); }
/* sized against both the width and the height of the window; 12.3em holds each sentence's longest line, so the
   heading is three lines at every size and ends well short of the mark */
.hero h1 { max-width: 12.3em; font-size: min(4.8vw, 9.8vh); font-weight: 480; line-height: 1.04; letter-spacing: -0.04em; color: var(--ink); }
.hero h1 .soft { color: var(--accent); }
.hero-acts { margin-top: clamp(18px, 4.4vh, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 2.2vw, 34px); }
.hero-acts .go { font-size: var(--say); }
.hero .pill { margin-top: 0; height: clamp(44px, 7.8vh, 56px); padding: 0 clamp(22px, 2.2vw, 34px); font-size: var(--say); }
/* the logo banner: a strip across the foot of the screen with a hairline above it. The mark's stem fades out at it.
   The logos slide slowly to the left for ever, fading in and out at the strip's ends; under the pointer the strip stops
   and the logo you are on brightens. The logos are pictures, not links. */
.proof { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: var(--band); padding-left: clamp(22px, 4.9vw, 78px); border-top: 1px solid var(--hair); display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); font-size: var(--say); color: var(--body); }
.proof-label { flex: none; white-space: nowrap; }
.logos { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%); }
.logos-track { display: flex; width: max-content; animation: logos-run 34s linear infinite; }
.logos:hover .logos-track { animation-play-state: paused; }
.logos-set, .also-logos ul { list-style: none; margin: 0; padding: 0 clamp(44px, 6vw, 104px) 0 0; display: flex; align-items: center; gap: clamp(44px, 6vw, 104px); }
.logo { --lh: clamp(23px, 4.6vh, 34px); display: grid; place-items: center; height: calc(var(--lh) + 18px); }
.logo img { width: auto; height: var(--lh); opacity: 0.62; transition: opacity 0.25s, transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.logo:hover img { opacity: 1; transform: translateY(-1px); }
/* matched by eye, so every logo carries the same weight: AIL's letters leave room in their height, TFG's three lines
   fill theirs, RAZOR is a wide heavy word, ALIPH a wide thin one, REQUUS CAPITAL two heavy lines beside its mark */
.logo.tfg { --lh: clamp(21px, 4.2vh, 31px); }
.logo.razor { --lh: clamp(14px, 2.8vh, 21px); }
.logo.aliph { --lh: clamp(17px, 3.4vh, 25px); }
.logo.requus { --lh: clamp(16px, 3.2vh, 24px); }
@keyframes logos-run { to { transform: translateX(-50%); } }
/* on a wide window the five logos fit in one row, so they stand still, spread along the strip, shown once */
@media (min-width: 1100px) {
  .logos { -webkit-mask-image: none; mask-image: none; padding-right: clamp(22px, 4.9vw, 78px); }
  .logos-track { animation: none; width: 100%; }
  .logos-set { flex: 1; justify-content: space-between; gap: 24px; padding: 0; }
  .logos-set[aria-hidden] { display: none; }
}

/* ---------------------------------------------------------------- the problem and who answers it: noise, the mark, the mark holding */
.beats { position: relative; height: 360vh; }
.stage { position: sticky; top: 0; height: 100vh; }
.beat { position: absolute; left: 50%; width: min(92vw, 1120px); transform: translateX(-50%); text-align: center; opacity: 0; will-change: opacity; }
.beat h2 { color: var(--ink); font-weight: 480; letter-spacing: -0.03em; line-height: 1.08; }
.beat .words { display: inline-block; }
.b1 { top: 50%; translate: 0 -50%; }
.b1 h2 { font-size: clamp(32px, 4.5vw, 78px); }
.mark-slot { position: absolute; left: 50%; top: 13vh; height: 45vh; aspect-ratio: 83 / 68; transform: translateX(-50%); }
.b2, .b3 { top: 69vh; }
.b2 h2 { font-size: clamp(32px, 4.5vw, 78px); }
/* the third line is a whole sentence: a size smaller, so it sits in two calm lines in the room under the mark */
.b3 { width: min(92vw, 1500px); }
.b3 h2 { max-width: 25em; font-size: clamp(23px, min(3.3vw, 6.4vh), 58px); line-height: 1.12; text-wrap: balance; }

/* ---------------------------------------------------------------- what we do: three rows divided by hairlines, each fed by one strand */
#what { padding: 14vh 0 10vh; }
#what .pin { display: grid; justify-items: center; }
.offers { list-style: none; margin: 0; padding: 0; width: min(92vw, 1320px); border-top: 1px solid var(--hair); }
/* a row: the number, the name with its phrase, the sentence with its chips, and at the far end the small mark */
.offer {
  display: grid; grid-template-columns: clamp(34px, 4.6vw, 70px) minmax(0, 0.82fr) minmax(0, 1.5fr) auto; align-items: center; column-gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(10px, 2.5vh, 28px) clamp(4px, 0.8vw, 14px); border-bottom: 1px solid var(--hair);
  opacity: 0.38; transition: opacity 0.6s ease, background-color 0.3s ease;
}
.offer.on { opacity: 1; }                               /* its stream has arrived */
.offers:hover .offer.on:not(:hover) { opacity: 0.6; }   /* the row under the pointer stands out, the other two step back a little */
.offer:hover { background: rgba(201, 184, 255, 0.055); }
.number { font-size: clamp(13px, min(1.25vw, 2.7vh), 22px); line-height: 1; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--accent); }
.offer .number { align-self: start; padding-top: 0.5em; font-size: clamp(12.5px, min(1.05vw, 2.4vh), 17px); }
.offer h3 { font-size: clamp(22px, min(2.9vw, 5.8vh), 52px); font-weight: 480; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.offer h3 a { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1.5px no-repeat; transition: background-size 0.35s cubic-bezier(.2, .8, .2, 1); }   /* to the stage's column on the Services page */
.offer h3 a:hover { background-size: 100% 1.5px; }
.offer .phrase { margin-top: clamp(3px, 0.9vh, 9px); font-size: clamp(13px, min(1.2vw, 2.6vh), 20px); line-height: 1.3; color: var(--accent); }
.offer .text { max-width: 36em; font-size: clamp(13.5px, min(1.2vw, 2.6vh), 20px); line-height: 1.45; color: var(--body); }
.chips { list-style: none; margin: clamp(6px, 1.5vh, 14px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px clamp(5px, 0.6vw, 9px); }
.chips li { padding: 0.32em 0.85em; border-radius: 999px; border: 1px solid rgba(201, 184, 255, 0.42); font-size: clamp(11.5px, min(0.92vw, 2.1vh), 14.5px); line-height: 1.3; white-space: nowrap; color: var(--pale); }
.strand-slot { flex: none; width: clamp(50px, min(7vw, 13.5vh), 132px); aspect-ratio: 83 / 68; }      /* the small mark, drawn in points */
.also { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px clamp(16px, 2vw, 30px); margin-top: clamp(14px, 3.4vh, 34px); padding: 0 4vw; font-size: clamp(15px, 1.16vw, 20px); color: var(--body); text-align: center; }
/* a text link: to the Services page */
.go { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 600; color: var(--ink); border-bottom: 1px solid rgba(201, 184, 255, 0.6); padding-bottom: 2px; transition: border-color 0.2s, color 0.2s; }
.go::after { content: ''; width: 6px; height: 6px; border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.go:hover { border-color: var(--accent); }
.go:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------------------------------------------------------------- clients: two case studies, each card the link to its page */
#clients { padding: 13vh 0 12vh; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); width: min(92vw, 1320px); margin: 0 auto; }
.case { --pad: clamp(22px, 2.6vw, 40px); background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: var(--pad); display: flex; flex-direction: column; transition: border-color 0.25s, background-color 0.25s, transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.case:hover { border-color: rgba(201, 184, 255, 0.62); background: rgba(31, 21, 80, 0.86); transform: translateY(-2px); }
.case:hover .more { background: rgba(201, 184, 255, 0.16); border-color: var(--accent); }
.case:hover .more::after { transform: translateX(3px) rotate(45deg); }
/* the larger cards of the Case studies page open with the first screenshot of the tool */
.case-pic { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) clamp(20px, 3.6vh, 32px); aspect-ratio: 16 / 7.4; overflow: hidden; border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--hair); }
.case-pic img { width: 100%; height: auto; transform-origin: 50% 0; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.case:hover .case-pic img { transform: scale(1.025); }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case .client-logo { height: 38px; width: auto; }
.case h3 { margin-top: clamp(18px, 3.6vh, 30px); font-size: clamp(20px, 1.75vw, 27px); font-weight: 480; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.case .line { margin-top: clamp(5px, 1.1vh, 10px); font-size: clamp(14px, 1.16vw, 18px); line-height: 1.45; color: var(--body); }
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(16px, 3.2vh, 28px); padding-top: clamp(14px, 2.8vh, 26px); border-top: 1px solid var(--hair); }
.impact .fig { font-size: clamp(20px, 1.75vw, 27px); letter-spacing: -0.015em; color: var(--pale); }
.impact .txt { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--body); }
/* "Read the case study": drawn like a button, inside the card that is the link */
.more {
  flex: none; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid rgba(201, 184, 255, 0.6); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.25s cubic-bezier(.2, .8, .2, 1);
}
.more::after { content: ''; width: 6px; height: 6px; border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }

/* ---------------------------------------------------------------- what we believe: four numbered beliefs on the calm grid */
#believe { padding: 12vh 0 12vh; }
.beliefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px); width: min(92vw, 1400px); margin: 0 auto; }
.belief { background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: clamp(18px, 2vw, 32px); }
.belief h3 { margin-top: clamp(14px, 3vh, 30px); font-size: clamp(18px, min(1.7vw, 3.6vh), 29px); font-weight: 480; line-height: 1.18; letter-spacing: -0.018em; text-wrap: balance; color: var(--ink); }
.belief .text { margin-top: clamp(8px, 1.7vh, 16px); font-size: clamp(13.5px, min(1.14vw, 2.5vh), 19px); line-height: 1.5; color: var(--body); }

/* ---------------------------------------------------------------- the AI Maturity Index: the words, and its four levels drawn in points */
#index { box-sizing: border-box; width: min(90vw, 1320px); margin: 0 auto; padding: 12vh 0 6vh; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 5vw, 90px); }
.index-small { margin-top: clamp(10px, 2.2vh, 20px); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.3; letter-spacing: 0.02em; color: var(--accent); }
.index-text { margin-top: clamp(10px, 2.2vh, 20px); max-width: 30em; font-size: clamp(15px, min(1.3vw, 2.8vh), 21px); line-height: 1.5; color: var(--body); }
#index .pill { margin-top: clamp(18px, 4vh, 38px); height: clamp(44px, 7.6vh, 54px); padding: 0 clamp(22px, 2vw, 32px); font-size: clamp(15px, 1.25vw, 18px); white-space: nowrap; }
/* the scale: four squares in a row, each level's points in its square (scattered at the first, an even grid at the last) */
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 28px); }
.levels li { display: grid; justify-items: center; gap: clamp(8px, 1.8vh, 18px); }
.level-slot { width: 100%; max-width: 170px; aspect-ratio: 1; }
.levels p { padding-top: clamp(7px, 1.4vh, 13px); border-top: 1px solid var(--hair); width: 100%; text-align: center; font-size: clamp(12.5px, 1.1vw, 17px); line-height: 1.25; color: var(--ink); }

/* ---------------------------------------------------------------- Services: the title, its sentence, and the three stages as columns */
#how { box-sizing: border-box; padding: calc(var(--nav-h) + 9vh) 0 9vh; }
#how header { margin-bottom: clamp(26px, 5.4vh, 60px); }
.how-line { width: min(88vw, 52em); margin: clamp(14px, 2.6vh, 24px) auto 0; font-size: clamp(15px, min(1.25vw, 2.7vh), 20px); line-height: 1.5; text-wrap: balance; color: var(--body); }
.stages-wrap { width: min(92vw, 1400px); margin: 0 auto; }
.how-track { height: clamp(18px, 3.6vh, 30px); }        /* where the stream of points runs, from the first stage to the third */
.stages { list-style: none; margin: clamp(6px, 1.4vh, 14px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: clamp(18px, 2.6vw, 44px); }
/* the columns share their rows (number, name, phrase, sentence, what it includes), so the three lists start level */
.stage-col { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
.stage-col .number { opacity: 0.55; transition: opacity 0.5s; }
.stage-col.on .number { opacity: 1; }                   /* the run of light has reached this stage */
.stage-col h2 { margin-top: clamp(8px, 1.6vh, 14px); font-size: clamp(26px, min(2.8vw, 5.6vh), 48px); font-weight: 480; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.stage-col .phrase { margin-top: clamp(4px, 0.9vh, 8px); font-size: clamp(14px, min(1.2vw, 2.6vh), 19px); line-height: 1.3; color: var(--accent); }
.stage-col .text { margin-top: clamp(10px, 2vh, 18px); font-size: clamp(14.5px, min(1.15vw, 2.5vh), 18px); line-height: 1.55; color: var(--body); }
.acts { list-style: none; margin: clamp(16px, 3vh, 28px) 0 0; padding: 0; border-top: 1px solid var(--hair); }
.acts li { padding: clamp(10px, 1.9vh, 16px) 0; border-bottom: 1px solid var(--hair); }
.acts h3 { font-size: clamp(15px, min(1.2vw, 2.6vh), 19px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.acts p { margin-top: 4px; font-size: clamp(13.5px, min(1.02vw, 2.3vh), 16px); line-height: 1.5; color: var(--body); }
.stages-wrap .also { margin-top: clamp(24px, 4.6vh, 46px); }
.cases-band { padding: 12vh 0; }

/* ---------------------------------------------------------------- the 90-day roadmap, in points and hairlines */
#roadmap { padding: 12vh 0 12vh; }
@media (min-height: 561px) { .rm { --lane-h: max(clamp(40px, 8.6vh, 96px), calc(var(--rm-task) * 2.32 + 15px)); --pad: clamp(4px, 1.5vh, 18px); } }   /* two rows, not four: each lane taller */
.rm {
  --rm-ink: var(--ink); --rm-muted: var(--body); --rm-ground: #130B3A;
  --rm-rule: rgba(201, 184, 255, 0.3); --rm-hair: rgba(201, 184, 255, 0.09);
  --rm-task-bg: rgba(42, 31, 112, 0.92); --rm-task-line: rgba(201, 184, 255, 0.5); --rm-task-ink: var(--ink);
  --rm-wait-line: rgba(201, 184, 255, 0.3); --rm-wait-ink: var(--body);
  --rm-key-bg: var(--accent); --rm-key-line: var(--accent); --rm-key-ink: #170D43;
  --rm-ring: var(--accent); --rm-gate-text: var(--warm);
}
.rm-top .title { flex: 1; font-size: clamp(27px, min(3.3vw, 6.2vh), 62px); text-align: center; }
/* in this world "now" is a falling line of points, and the rail under the week names is drawn on the canvas */
.rm .rm-now { width: 7px; margin-left: -3.5px; background: radial-gradient(circle, var(--pale) 1.35px, transparent 1.75px) 0 0 / 7px 9px repeat-y; animation: rm-fall 0.75s linear infinite; }
@keyframes rm-fall { to { background-position: 0 9px; } }

/* ---------------------------------------------------------------- the closing screen: what to do next, and the drawing */
/* Stacked by default (narrow windows): the words first, the drawing after them. */
.end { position: relative; padding: calc(var(--nav-h) + 6vh) 0 0; }
.end .pin { display: grid; justify-items: start; gap: clamp(34px, 6vh, 60px); width: min(88vw, 1320px); margin: 0 auto; padding-bottom: 28px; }
/* a long sentence: sized against the window's width and height and set as one even block */
.end h2 { max-width: 15.6em; font-size: clamp(27px, min(3.3vw, 6.5vh), 62px); font-weight: 480; letter-spacing: -0.032em; line-height: 1.08; text-wrap: balance; color: var(--ink); }
/* what happens next, as three small numbered steps */
.end-steps { list-style: none; margin: clamp(14px, 3vh, 30px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px clamp(12px, 1.5vw, 24px); font-size: clamp(15px, min(1.32vw, 2.7vh), 21px); line-height: 1.3; color: var(--body); }
.end-steps li { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.end-steps li + li::before { content: ''; width: clamp(8px, 1.3vw, 20px); height: 1px; margin-right: clamp(4px, 0.6vw, 10px); background: rgba(201, 184, 255, 0.45); }
.end-steps b { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid rgba(201, 184, 255, 0.55); font-size: 0.8em; font-weight: 600; color: var(--accent); transition: background-color 0.45s, border-color 0.45s, color 0.45s; }
.end-steps li { transition: color 0.45s; }
.end-steps li.on { color: var(--ink); }                   /* the step the points are drawing */
.end-steps li.on b { background: var(--accent); border-color: var(--accent); color: var(--pill-ink); }
.end-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(16px, 1.8vw, 26px); margin-top: clamp(18px, 4vh, 38px); }
.end-act .pill { height: clamp(44px, 7.6vh, 52px); padding: 0 clamp(22px, 2vw, 30px); font-size: clamp(15px, 1.25vw, 17px); white-space: nowrap; }
/* the address, for the many people whose mail button does nothing: it can be selected and copied, and is a link too */
.mail { white-space: nowrap; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink); border-bottom: 1px solid rgba(201, 184, 255, 0.6); padding-bottom: 2px; user-select: all; transition: border-color 0.2s; }
.mail:hover { border-color: var(--accent); }
/* who the address reaches, under it */
.end-who { margin-top: clamp(16px, 3.4vh, 32px); }
.end-who .name { font-size: clamp(15px, 1.2vw, 18px); color: var(--ink); letter-spacing: -0.01em; }
.end-who .role { margin-left: 0.6em; padding-left: 0.6em; border-left: 1px solid var(--hair); font-size: 0.86em; color: var(--accent); }
.end-who .note { margin-top: clamp(3px, 0.7vh, 6px); max-width: 40em; font-size: clamp(13px, 1vw, 15px); line-height: 1.4; color: var(--body); }
/* the drawing: a square the points draw in, with no box; above a logo, the label the logos carry */
.drawn { margin: 0; display: grid; justify-items: center; justify-self: center; }
.frame { position: relative; width: min(78vw, 340px); aspect-ratio: 1; }
.drawn-cap { position: absolute; left: 0; right: 0; top: 25%; text-align: center; font-size: clamp(13px, 1.02vw, 15.5px); line-height: 1.3; color: var(--accent); opacity: 0; transition: opacity 0.5s, top 0.9s cubic-bezier(.4, 0, .2, 1); }
.drawn-cap.on { opacity: 1; }
.end .foot { grid-column: 1 / -1; width: 100%; margin-top: 4px; padding: 14px 0 0; }

/* ---------------------------------------------------------------- a client's page: the head, the showcase, the story */
.case-head { padding: calc(var(--nav-h) + 8vh) 0 5vh; }
.case-head-in { width: min(90vw, 1240px); margin: 0 auto; display: grid; justify-items: start; }
/* back to all case studies, a small link with its arrow pointing back */
.back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(22px, 4.4vh, 40px); font-size: 14px; font-weight: 600; color: var(--body); transition: color 0.2s; }
.back::before { content: ''; width: 6px; height: 6px; border: solid var(--accent); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.back:hover { color: var(--ink); }
.back:hover::before { transform: translateX(-3px) rotate(45deg); }
.case-head .client-logo { width: auto; height: clamp(30px, 5.6vh, 42px); }
.case-head h1 { margin-top: clamp(16px, 3.2vh, 28px); }
.case-summary { margin-top: clamp(10px, 2vh, 18px); max-width: 38em; font-size: clamp(16px, min(1.4vw, 3vh), 22px); line-height: 1.5; color: var(--body); }
/* the facts in a row on a hairline: the name small, the value under it */
.facts { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4.6vw, 72px); margin: clamp(22px, 4.4vh, 40px) 0 0; padding-top: clamp(16px, 3vh, 26px); border-top: 1px solid var(--hair); }
.facts dt { font-size: 13px; line-height: 1.3; color: var(--accent); }
.facts dd { margin: 5px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; color: var(--ink); }
.case-head .chips { margin-top: clamp(16px, 3vh, 26px); }

/* the showcase: the list of features at the left, the deck at the right */
.built { padding: 5vh 0 9vh; }
.built header { width: min(90vw, 1240px); margin-bottom: clamp(4px, 1.6vh, 20px); text-align: left; }
.show {
  --cw: min(54vw, calc((100vh - 270px) * 1.6), 900px);    /* the card: as large as the window allows */
  position: relative; box-sizing: border-box; width: min(90vw, 1240px); margin: 0 auto;
  display: grid; grid-template-columns: clamp(236px, 24vw, 380px) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 3.4vw, 64px);
}
.show-note { margin-top: clamp(12px, 2.4vh, 20px); font-size: 12.5px; line-height: 1.3; color: var(--body); }   /* so nobody reads the numbers as a client's */
.feats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.feats li { position: relative; display: grid; grid-template-rows: auto 0fr; padding-left: 16px; border-bottom: 1px solid var(--hair); transition: grid-template-rows 0.45s cubic-bezier(.2, .8, .2, 1); }
.feats li.on { grid-template-rows: auto 1fr; }
.feats li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.feats li.on::before { transform: scaleY(var(--wait, 0)); }                     /* fills while it waits to move on */
.feat { display: block; width: 100%; padding: clamp(8px, 1.6vh, 14px) 0; text-align: left; font-size: clamp(14px, 1.22vw, 18px); font-weight: 500; line-height: 1.25; color: var(--body); transition: color 0.3s; }
.feat:hover, .feats li.on .feat { color: var(--ink); }
.feat-line { min-height: 0; overflow: hidden; visibility: hidden; font-size: clamp(13px, 1.02vw, 15.5px); line-height: 1.45; color: var(--body); opacity: 0; transition: opacity 0.35s, visibility 0s 0.35s; }
.feats li.on .feat-line { padding-bottom: clamp(9px, 1.7vh, 15px); visibility: visible; opacity: 1; transition: opacity 0.35s 0.1s, visibility 0s; }

.show-stage { position: relative; display: grid; place-items: center; min-height: calc(var(--cw) / var(--ar, 1.6) + var(--cw) * 0.2); perspective: 2400px; perspective-origin: 40% 46%; }
/* the deck turned a little away, so the cards behind show their edges up and to the right */
.deck { position: relative; width: var(--cw); aspect-ratio: var(--ar, 1.6); transform: translate3d(-6%, 4%, 0) rotateY(-4deg) rotateX(1.4deg); transform-style: preserve-3d; touch-action: pan-y; }
.shot { position: absolute; inset: 0; margin: 0; transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; cursor: pointer; }
.shot.front { cursor: default; }
/* the screenshots are light interfaces: a thin edge and a soft shadow seat them on the night ground */
.shot-face { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #1B1250; box-shadow: 0 0 0 1px rgba(201, 184, 255, 0.38), 0 34px 80px -26px rgba(4, 2, 20, 0.95), 0 6px 18px -8px rgba(4, 2, 20, 0.55); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.shot-shade { position: absolute; inset: 0; background: #0F082F; opacity: var(--dim, 0); pointer-events: none; }
/* the feature's frame: an outline that draws itself, the rest dimmed a little, the name attached */
.shot-dim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.shot-dim i { position: absolute; background: rgba(15, 8, 47, 0.3); }
.shot-focus { position: absolute; border-radius: 8px; pointer-events: none; }
.shot-focus svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shot-focus rect { fill: none; stroke: #7C4DFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.25s ease; }
.shot-chip {
  position: absolute; left: 0; bottom: calc(100% + 8px); padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  background: #6B3DF0; color: #fff; font-size: clamp(12px, 0.98vw, 14.5px); font-weight: 600; line-height: 1.3;
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.shot-focus.end .shot-chip { left: auto; right: 0; }
.shot-focus.in .shot-chip { bottom: auto; top: 10px; left: 10px; }
.shot.lit .shot-dim { opacity: 1; transition: opacity 0.6s ease 0.1s; }
.shot.lit .shot-focus rect { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s cubic-bezier(.3, .6, .2, 1) 0.1s; }
.shot.lit .shot-chip { opacity: 1; transform: none; transition: opacity 0.4s ease 0.5s, transform 0.5s cubic-bezier(.2, .8, .2, 1) 0.5s; }
.shot figcaption { display: none; }

/* reduced motion: the cards do not move; one cross-fades into the next */
.show.still .shot { opacity: 0 !important; transform: none !important; transition: opacity 0.5s ease; }
.show.still .shot.front { opacity: 1 !important; }
.show.still .shot-dim, .show.still .shot-focus rect, .show.still .shot-chip { transition: none; }

/* small windows and phones: a row of cards to swipe, each with its feature's name and line under it */
.show.row { display: flex; flex-direction: column; align-items: stretch; width: 100%; }   /* stretched, not centred: centring would size the row to all its cards */
.show.row .show-info { order: 2; padding: 0 6vw; }
.show.row .feats { display: none; }
.show.row .show-note { margin-top: 14px; }
.show.row .show-stage { display: block; min-height: 0; perspective: none; }   /* centring would shrink-wrap the row and push its first cards off the screen */
.show.row .deck { box-sizing: border-box; width: 100%; aspect-ratio: auto; transform: none; display: flex; gap: 14px; padding: 0 6vw 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: auto; }
.show.row .deck::-webkit-scrollbar { display: none; }
.show.row .shot { position: relative; inset: auto; flex: 0 0 min(84vw, 560px); scroll-snap-align: center; opacity: 1; transform: none !important; cursor: auto; }
.show.row .shot-face { position: relative; inset: auto; aspect-ratio: var(--ar, 1.6); }
.show.row .shot-focus rect { stroke-dashoffset: 0; }
.show.row .shot-chip { display: none; }
.show.row .shot figcaption { display: grid; gap: 5px; margin-top: 14px; }
.show.row .shot figcaption b { font-size: 16px; font-weight: 600; color: var(--ink); }
.show.row .shot figcaption span { font-size: 14px; line-height: 1.45; color: var(--body); }

/* the story under the showcase: the challenge, what we did beside the outcomes, the results, the next case study */
.case-story { box-sizing: border-box; width: min(90vw, 1240px); margin: 0 auto; padding: 4vh 0 12vh; display: grid; gap: clamp(52px, 10vh, 110px); }
.case-story h2 { font-size: clamp(24px, min(2.4vw, 4.8vh), 40px); font-weight: 480; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.challenge { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: 14px clamp(20px, 4vw, 70px); align-items: start; }
.challenge p { font-size: clamp(17px, min(1.5vw, 3.2vh), 24px); line-height: 1.55; color: var(--pale); }
.did-out { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 84px); }
.col ol { list-style: none; margin: clamp(16px, 3vh, 26px) 0 0; padding: 0; border-top: 1px solid var(--hair); }
.col li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 10px; padding: clamp(12px, 2.2vh, 18px) 0; border-bottom: 1px solid var(--hair); }
.col li b { padding-top: 0.2em; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.col li p { font-size: clamp(14.5px, 1.12vw, 17.5px); line-height: 1.55; color: var(--body); }
.col.outs li p { color: var(--pale); }
.case-impact { padding: clamp(24px, 3vw, 46px); border: 1px solid var(--hair); border-radius: 16px; background: var(--panel); }
.case-impact .impact { margin-top: 0; padding-top: 0; border-top: 0; }
.case-impact .fig { font-size: clamp(26px, 2.6vw, 44px); }
.case-impact .txt { font-size: clamp(14px, 1.05vw, 16px); }
.result { margin-top: clamp(20px, 3.6vh, 34px); padding-top: clamp(16px, 3vh, 26px); border-top: 1px solid var(--hair); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; color: var(--ink); }
/* the next case study: a wide link between two hairlines */
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 2.4vw, 36px); padding: clamp(18px, 3.4vh, 30px) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transition: background-color 0.25s; }
.next > span { font-size: 14px; color: var(--accent); }
.next .client-logo { width: auto; height: 28px; }
.next b { flex: 1; font-size: clamp(18px, 1.6vw, 26px); font-weight: 480; letter-spacing: -0.015em; color: var(--ink); }
.next::after { content: ''; width: 9px; height: 9px; margin-right: 8px; border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.next:hover { background: rgba(201, 184, 255, 0.05); }
.next:hover::after { transform: translateX(4px) rotate(45deg); }

/* ---------------------------------------------------------------- the Case studies page */
.cases-page { padding: calc(var(--nav-h) + 9vh) 0 10vh; }
.cases.big { width: min(92vw, 1400px); }
.cases.big .case h3 { font-size: clamp(22px, 2vw, 32px); }
.cases-note { width: min(92vw, 1400px); margin: 14px auto 0; font-size: 12.5px; color: var(--body); }
.also-logos { width: min(92vw, 1400px); margin: clamp(48px, 9vh, 90px) auto 0; padding-top: clamp(20px, 4vh, 34px); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(28px, 4vw, 60px); }
.also-logos p { font-size: clamp(15px, 1.25vw, 19px); color: var(--body); }
.also-logos ul { padding: 0; flex-wrap: wrap; row-gap: 14px; }

/* ---------------------------------------------------------------- the FAQ (Home): the title at the left, the questions at the right */
#faq { padding: 12vh 0 14vh; }
.faq-wrap { box-sizing: border-box; width: min(90vw, 1320px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 20px clamp(28px, 5vw, 96px); align-items: start; }
#faq header { position: sticky; top: calc(var(--nav-h) + 4vh); width: auto; margin: 0; text-align: left; }
.faq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: clamp(15px, 2.7vh, 25px) 0; text-align: left; font-size: clamp(16px, min(1.35vw, 2.9vh), 22px); font-weight: 500; line-height: 1.3; color: var(--ink); }
/* a plus that turns into a minus */
.faq-q i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(201, 184, 255, 0.5); transition: background-color 0.2s, border-color 0.2s; }
.faq-q i::before, .faq-q i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--accent); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.open .faq-q i::after { transform: rotate(0deg); }
.faq-q:hover i { background: rgba(201, 184, 255, 0.14); border-color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(.2, .8, .2, 1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.45s; }
.faq-item.open .faq-a > div { visibility: visible; transition: visibility 0s; }
.faq-a p { max-width: 44em; padding: 0 3.2em clamp(16px, 3vh, 26px) 0; font-size: clamp(14.5px, min(1.15vw, 2.5vh), 18px); line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------- pages of words: Careers, Contact, Privacy, Terms */
.page-head { padding: calc(var(--nav-h) + 10vh) 0 6vh; text-align: center; }
.page-head > div { width: min(90vw, 1000px); margin: 0 auto; }
.page-line { margin-top: clamp(12px, 2.4vh, 22px); font-size: clamp(16px, min(1.4vw, 3vh), 22px); line-height: 1.5; text-wrap: balance; color: var(--body); }
.careers { box-sizing: border-box; width: min(90vw, 1240px); margin: 0 auto; padding: 2vh 0 12vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px clamp(28px, 5vw, 96px); align-items: start; }
.careers h2 { font-size: clamp(22px, min(2vw, 4.2vh), 32px); font-weight: 480; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.role p { margin-top: 14px; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6; color: var(--body); }
.role p:first-of-type { color: var(--pale); }
.how5 { margin-top: clamp(36px, 7vh, 64px); }
.how5 ol { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.how5 li { display: flex; align-items: baseline; gap: 16px; padding: clamp(12px, 2.2vh, 16px) 0; border-bottom: 1px solid var(--hair); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.35; color: var(--ink); }
.how5 li b { flex: none; width: 1.8em; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.apply { position: sticky; top: calc(var(--nav-h) + 20px); }
.book-panel.inline { width: 100%; max-height: none; overflow: visible; }
.book-panel.inline h2 { padding-right: 0; }
.contact-page { box-sizing: border-box; min-height: calc(100vh - 70px); width: min(90vw, 1240px); margin: 0 auto; padding: calc(var(--nav-h) + 7vh) 0 7vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px clamp(28px, 5vw, 96px); align-items: center; }
.contact-words .page-line { max-width: 21em; text-wrap: pretty; }
.contact-words .end-steps { margin-top: clamp(20px, 4vh, 36px); flex-direction: column; align-items: flex-start; gap: 12px; }   /* one step to a line, so none starts with a dash */
.contact-words .end-steps li + li::before { display: none; }
.contact-page .apply { position: static; }
.legal { padding: calc(var(--nav-h) + 9vh) 0 10vh; }
.legal-in { width: min(88vw, 760px); margin: 0 auto; }
.legal .updated { margin-top: 12px; font-size: 14px; color: var(--accent); }
.legal section { margin-top: clamp(28px, 5vh, 44px); }
.legal h2 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 560; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--accent); }
.legal b { font-weight: 600; color: var(--ink); }
.legal a { color: var(--ink); border-bottom: 1px solid rgba(201, 184, 255, 0.6); }
/* About Tenra: the same reading column, a question to a section */
.about .page-line { text-align: left; }
.about .qa { padding-top: clamp(24px, 4.4vh, 40px); border-top: 1px solid var(--hair); }
.about .qa:first-of-type { margin-top: clamp(32px, 6vh, 56px); }
.about h2 { font-size: clamp(21px, 1.8vw, 28px); font-weight: 480; letter-spacing: -0.015em; }
.about h3 { margin-top: 18px; font-size: 18px; font-weight: 560; line-height: 1.3; color: var(--ink); }
.about .qa-case + .qa-case { margin-top: 22px; }
.about a.go { display: inline-flex; margin-top: 12px; border-bottom-color: rgba(201, 184, 255, 0.6); }
.about > .legal-in > .updated { margin-top: clamp(32px, 6vh, 56px); }

/* ---------------------------------------------------------------- the foot of every page */
.foot { box-sizing: border-box; width: min(88vw, 1320px); margin: 0 auto; padding: 22px 0 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.4; color: var(--body); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--body); transition: color 0.2s; }
.foot a:hover { color: var(--ink); }
.foot a.out::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 5px; background: currentColor; opacity: 0.8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 8 2M3.4 2H8v4.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 8 2M3.4 2H8v4.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the close button of the contact form */
.show-close {
  position: absolute; z-index: 3; top: clamp(14px, 2.6vh, 26px); right: clamp(18px, 3.2vw, 48px);
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid rgba(201, 184, 255, 0.6); background: rgba(15, 8, 47, 0.6); font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s;
}
.show-close::after { content: ''; width: 11px; height: 11px; background: linear-gradient(45deg, transparent 44%, var(--accent) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--accent) 44% 56%, transparent 56%); }
.show-close:hover { background: rgba(201, 184, 255, 0.16); border-color: var(--accent); }

/* ---------------------------------------------------------------- the contact form: one dialog behind every "Book a call" */
.book { position: fixed; inset: 0; z-index: 80; box-sizing: border-box; display: grid; place-items: center; padding: 14px; outline: 0; opacity: 0; transition: opacity 0.28s ease; }
.book.open { opacity: 1; }
.book[hidden] { display: none !important; }
.book-scrim { position: absolute; inset: 0; background: rgba(10, 5, 34, 0.8); }       /* the page and its points stay dimly in view behind */
.book-panel {
  position: relative; box-sizing: border-box; width: min(100%, 580px); max-height: calc(100vh - 28px); overflow-y: auto; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(9px, 2.2vh, 18px) 16px; padding: clamp(18px, 4.2vh, 36px) clamp(18px, 3vw, 36px);
  border-radius: 18px; background: #170F3E; border: 1px solid var(--hair); box-shadow: 0 40px 90px -30px rgba(4, 2, 20, 0.95);
}
.book-panel > * { grid-column: 1 / -1; }
.book-panel h2 { padding-right: 112px; font-size: clamp(24px, min(2.5vw, 5.4vh), 36px); font-weight: 480; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.book-panel .show-close { top: clamp(12px, 3.2vh, 28px); right: clamp(14px, 2.6vw, 30px); }
.book-field { display: grid; gap: 6px; font-size: 14px; line-height: 1.3; color: var(--body); }
.book-field.half { grid-column: auto / span 1; }   /* name and company side by side */
.book-field input, .book-field textarea {
  box-sizing: border-box; width: 100%; height: clamp(40px, 7.4vh, 48px); padding: 0 14px; border-radius: 10px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(201, 184, 255, 0.4); transition: border-color 0.2s, background-color 0.2s;
}
.book-field textarea { height: clamp(58px, 13vh, 96px); padding: 10px 14px; line-height: 1.4; resize: none; }
.book-field input:focus, .book-field textarea:focus { outline: 0; border-color: var(--accent); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(201, 184, 255, 0.22); }
.book-panel .pill { justify-self: start; height: clamp(44px, 7.6vh, 52px); padding: 0 28px; font-size: 16px; }
.book-or { font-size: 13.5px; line-height: 1.4; color: var(--body); }
.book-or a, .book-sent a { color: var(--ink); border-bottom: 1px solid rgba(201, 184, 255, 0.6); }
.book-sent { padding: 11px 14px; border-radius: 10px; background: rgba(201, 184, 255, 0.12); border: 1px solid rgba(201, 184, 255, 0.42); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.book-sent[hidden] { display: none; }
@media (max-width: 520px) { .book-field.half { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- the pinned stages: wide and tall enough, motion allowed */
@media (min-width: 860px) and (min-height: 460px) and (prefers-reduced-motion: no-preference) {
  #what, #roadmap, .end { padding: 0; scroll-margin-top: 0; }
  #what { height: 160vh; }
  .pin { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: calc(var(--nav-h) + 1vh) 0 3vh; }
  .pin header { margin-bottom: clamp(14px, 3.6vh, 44px); }
  #what .pin { align-content: center; }
  .rm-top .title { flex: none; text-align: left; }
}
/* the closing screen side by side whenever the window is wide and tall enough, moving or not: the words at the left,
   the drawing large at the right, taking whatever height the window gives it */
@media (min-width: 860px) and (min-height: 460px) {
  .end .pin {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 0 clamp(28px, 5vw, 100px);
    box-sizing: border-box; min-height: 100vh; padding: calc(var(--nav-h) + 1vh) 0 clamp(10px, 2.4vh, 26px);
  }
  .drawn { grid-template-rows: minmax(0, 1fr); height: 100%; max-height: 720px; align-content: center; justify-self: end; }
  .frame { width: auto; height: 100%; max-height: min(56vh, 480px); min-height: 150px; align-self: center; }
  .end .foot { margin-top: clamp(4px, 1.2vh, 12px); }
}
@media (max-height: 560px) and (min-width: 860px) {      /* short windows: a slimmer top bar leaves the stages more room */
  :root { --nav-h: clamp(54px, 11.6vh, 64px); }
  .rm-top .title { font-size: clamp(24px, 5.6vh, 31px); line-height: clamp(30px, 6.6vh, 36px); }
}

/* ---------------------------------------------------------------- small screens: the words first, the mark after them */
@media (max-width: 859px) {
  /* the links fold away behind a menu button; the button that opens the contact form stays in the bar */
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 -6px; }
  .nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { display: block; width: 20px; height: 1.6px; border-radius: 1px; background: var(--ink); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), opacity 0.2s; }
  .nav-toggle i { position: relative; }
  .nav-toggle i::before, .nav-toggle i::after { content: ''; position: absolute; left: 0; }
  .nav-toggle i::before { top: -6.5px; } .nav-toggle i::after { top: 6.5px; }
  .nav.open .nav-toggle i { background: transparent; }
  .nav.open .nav-toggle i::before { transform: translateY(6.5px) rotate(45deg); } .nav.open .nav-toggle i::after { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; left: 12px; right: 12px; top: calc(var(--nav-h) - 4px); padding: 4px 20px; border-radius: 14px; background: #170F3E; border: 1px solid var(--hair); box-shadow: 0 30px 60px -24px rgba(4, 2, 20, 0.95); }
  .nav.open .nav-links { display: block; }
  .nav.open::after { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(10, 5, 34, 0.66); }      /* the page dims behind the open menu */
  .nav-links a.link { display: block; padding: 15px 0; font-size: 17px; opacity: 1; }
  .nav-links a.link + a.link { border-top: 1px solid rgba(201, 184, 255, 0.18); }
  .beliefs { grid-template-columns: 1fr 1fr; }
  .end-steps { flex-direction: column; align-items: flex-start; gap: 10px; }      /* one step to a line, so none starts with a dash */
  .end-steps li + li::before { display: none; }
  .how-track { display: none; }
  .stages { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 44px; }
  .stage-col { grid-row: auto; grid-template-rows: none; }
  #how { padding-top: calc(var(--nav-h) + 6vh); }
  .hero { height: auto; min-height: 100vh; padding: calc(var(--nav-h) + 3vh) 0 clamp(300px, 44vh, 420px); box-sizing: border-box; --say: 16px; --band: 76px; }
  .hero-copy { position: static; transform: none; padding: 0 6vw; }
  .hero h1 { max-width: none; font-size: clamp(33px, 10vw, 64px); }
  .proof { position: static; margin-top: 30px; padding: 0 0 0 6vw; gap: 18px; }      /* the banner comes straight after the button; the mark forms under it */
  .proof-label { font-size: 14px; }
  .mark-slot { top: 15vh; height: auto; width: min(70vw, 340px); }
  .b2, .b3 { top: 64vh; }
  /* "what we do": each row stacks, the small mark beside the number */
  .offer { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 22px 0; }
  .offer .number { grid-column: 1; grid-row: 1; align-self: center; padding: 0; }
  .offer .strand-slot { grid-column: 2; grid-row: 1 / 3; width: 76px; align-self: start; }
  .offer-name { grid-column: 1; grid-row: 2; }
  .offer-say { grid-column: 1 / -1; grid-row: 3; }
  .chips li { white-space: normal; }
  #index { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .cases { grid-template-columns: 1fr; }
  .impact { grid-template-columns: 1fr; gap: 16px; }
  /* the FAQ, the case studies' story, Careers and Contact: one column */
  .faq-wrap, .careers, .contact-page { grid-template-columns: minmax(0, 1fr); }
  #faq header { position: static; }
  .faq-a p { padding-right: 0; }
  .challenge, .did-out { grid-template-columns: minmax(0, 1fr); }
  .apply { position: static; }
  .contact-page { min-height: 0; align-items: start; }
  .page-head { text-align: left; padding-top: calc(var(--nav-h) + 6vh); }
  .case-head { padding-top: calc(var(--nav-h) + 5vh); }
  .built { padding-top: 2vh; }
  .foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1099px) and (min-width: 860px) { .beliefs { grid-template-columns: 1fr 1fr; width: min(92vw, 900px); } }

/* ---------------------------------------------------------------- phones: the same site laid out for one hand
   The opening is one screen (the mark at the top, the headline and its button in the lower half where the thumb is,
   the logo banner along the foot); the problem takes half the scroll; the case studies and the beliefs are cards
   that swipe sideways with the next one showing at the edge; the closing drawing comes before its words; and no
   running text is smaller than 15px. */
@media (max-width: 599px) {
  .hero { height: 100svh; min-height: 560px; padding: var(--nav-h) 0 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-copy { padding: 0 6vw; margin-bottom: clamp(18px, 3.4svh, 30px); }
  .hero h1 { font-size: clamp(30px, min(9.6vw, 5.1svh), 44px); line-height: 1.06; }
  .hero .pill { margin-top: clamp(16px, 2.8svh, 26px); height: 50px; padding: 0 26px; font-size: 16px; }
  .proof { margin-top: 0; height: 72px; flex: none; }
  .proof-label { font-size: 14px; }
  .logo { --lh: 24px; } .logo.tfg { --lh: 22px; } .logo.razor { --lh: 15px; } .logo.aliph { --lh: 18px; } .logo.requus { --lh: 17px; }

  .beats { height: 250vh; }
  .b1 h2, .b2 h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .b3 h2 { font-size: clamp(22px, 6.2vw, 27px); line-height: 1.18; }

  section header { margin-bottom: 26px; }
  :is(h1, h2).title { font-size: clamp(30px, 8.6vw, 38px); }
  :is(h1, h2).title.long { font-size: clamp(25px, 7vw, 31px); }
  #what { padding: 9vh 0 7vh; }
  .offer { padding: 20px 0; }
  .offer h3 { font-size: 27px; }
  .offer .number { font-size: 13px; }
  .offer .phrase { font-size: 15px; }
  .offer .text { font-size: 15.5px; line-height: 1.5; }
  .chips li { font-size: 13px; }
  .also { font-size: 15.5px; }

  /* cards that swipe: full-bleed rows, each card most of the width, the next one peeking in */
  .cases, .beliefs {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84vw; gap: 12px;
    width: 100vw; margin: 0; padding: 2px 6vw 6px; box-sizing: border-box;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 6vw; scrollbar-width: none;
  }
  .cases::-webkit-scrollbar, .beliefs::-webkit-scrollbar { display: none; }
  .case, .belief { scroll-snap-align: start; }
  .case:hover { transform: none; }
  .case { --pad: 20px; }
  .case .client-logo { height: 32px; }
  .case .more { height: 38px; padding: 0 14px 0 15px; font-size: 13px; }
  .case h3 { font-size: 21px; }
  .case .line { font-size: 15.5px; }
  /* the results: the figure beside its words, one to a row */
  .impact { gap: 12px; }
  .impact > div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .impact .fig { font-size: 19px; }
  .impact .txt { margin: 0; font-size: 14.5px; line-height: 1.45; }
  #clients, #believe { padding: 9vh 0; }
  .belief { padding: 20px; }
  .belief h3 { font-size: 20px; }
  .belief .text { font-size: 15px; }

  #index { padding: 9vh 0; gap: 32px; }
  .index-text { font-size: 16px; }
  .levels p { font-size: 13px; }
  #faq { padding: 9vh 0 10vh; }
  .faq-q { font-size: 17px; padding: 17px 0; }
  .faq-a p { font-size: 15.5px; }

  /* the closing screen: the drawing first, then the words whose steps it lights */
  .end { padding-top: calc(var(--nav-h) + 3vh); }
  .end .pin { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .end .drawn { order: -1; align-self: center; }
  .end .frame { width: min(66vw, 300px); }
  .end h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .end-steps { font-size: 16px; }
  .end-act { margin-top: 22px; }
  .end-act .pill { height: 50px; font-size: 16px; }
  .end-who .note { font-size: 14px; }
  .foot { font-size: 14px; }

  .stage-col .text, .acts p { font-size: 15.5px; }
  .acts h3 { font-size: 16.5px; }
  .how-line { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rm .rm-now { animation: none; }
  .go::after, .more, .more::after, .offer, .case, .case-pic img, .faq-a, .feats li { transition: none; }
  .logos-track { animation: none; }                       /* the banner holds still; its second copy is not needed */
  .logos-set[aria-hidden] { display: none; }
  .logos { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- the AI Maturity Index (/ai-maturity-assessment/)
   Three views of one page (assess.js): the opening and what the index measures; one question to a screen; the result.
   On a phone a question stands at the top and its answers sit low, where the thumb is. */
.ax-hero { box-sizing: border-box; min-height: 100vh; min-height: 100svh; width: min(90vw, 1320px); margin: 0 auto; padding: calc(var(--nav-h) + 6vh) 0 8vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(28px, 5vw, 96px); }
.ax-words .title { max-width: 12em; }
.ax-words .page-line { max-width: 31em; text-wrap: pretty; }
.ax-go { margin-top: clamp(22px, 4.4vh, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ax-go .pill, .ax-again .pill { height: clamp(46px, 7.6vh, 56px); padding: 0 clamp(24px, 2.2vw, 34px); font-size: clamp(15px, 1.25vw, 18px); }
.ax-note { font-size: 14px; line-height: 1.4; color: var(--body); }
.ax-demo { margin: 0; justify-self: center; width: min(100%, 54vh, 460px); display: grid; gap: 16px; }
.ax-demo-in { aspect-ratio: 1; }
.ax-demo-slot { width: 100%; height: 100%; }
.ax-cap { display: flex; justify-content: center; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: clamp(16px, 1.4vw, 22px); color: var(--ink); }
.ax-cap b { font-size: 0.78em; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--accent); }

.ax-dims, .ax-levels { padding: 10vh 0; }
.ax-dims header .page-line, .ax-levels header .page-line { max-width: 40em; margin-left: auto; margin-right: auto; }
.ax-dimlist { list-style: none; margin: 0 auto; padding: 0; width: min(90vw, 1180px); border-top: 1px solid var(--hair); }
.ax-dimlist li { display: grid; grid-template-columns: clamp(34px, 4.6vw, 70px) minmax(0, 0.8fr) minmax(0, 1.5fr); column-gap: clamp(14px, 2.4vw, 40px); align-items: baseline; padding: clamp(16px, 3vh, 28px) 4px; border-bottom: 1px solid var(--hair); }
.ax-dimlist h3 { font-size: clamp(21px, min(2.2vw, 4.6vh), 38px); font-weight: 480; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.ax-dimlist .text { max-width: 38em; font-size: clamp(15px, min(1.15vw, 2.5vh), 19px); line-height: 1.55; color: var(--body); }
.ax-levellist { list-style: none; margin: 0 auto; padding: 0; width: min(90vw, 1320px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.ax-levellist li { display: grid; align-content: start; gap: 18px; }
.ax-levellist .level-slot { max-width: none; width: 76%; margin: 0 auto; }
.ax-level-words { padding-top: 14px; border-top: 1px solid var(--hair); }
.ax-level-words h3 { margin-top: 8px; font-size: clamp(20px, min(1.8vw, 3.8vh), 30px); font-weight: 480; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.ax-level-words .text { margin-top: 10px; font-size: clamp(14.5px, min(1.08vw, 2.4vh), 17.5px); line-height: 1.55; color: var(--body); }
.ax-again { display: flex; justify-content: center; margin-top: clamp(36px, 7vh, 64px); }

/* the three views */
.ax-quiz, .ax-result { display: none; }
body.ax-in-quiz :is(.ax-hero, .ax-dims, .ax-levels, .foot), body.ax-in-result :is(.ax-hero, .ax-dims, .ax-levels) { display: none; }
body.ax-in-quiz .ax-quiz { display: flex; }
body.ax-in-result .ax-result { display: grid; }
.ax-ghost { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(201, 184, 255, 0.45); background: rgba(15, 8, 47, 0.55); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background-color 0.2s, border-color 0.2s; }
.ax-ghost:hover { background: rgba(201, 184, 255, 0.14); border-color: var(--accent); }
.ax-back::before { content: ''; width: 6px; height: 6px; border: solid var(--accent); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.ax-ghost[hidden] { display: none; }

/* a question */
.ax-quiz { box-sizing: border-box; min-height: 100vh; min-height: 100svh; width: min(90vw, 820px); margin: 0 auto; padding: calc(var(--nav-h) + 3vh) 0 4vh; flex-direction: column; }
.ax-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.ax-progress { display: grid; gap: 8px; }
.ax-count { font-size: 13px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; text-align: center; color: var(--accent); }
.ax-prog { display: flex; gap: 6px; }
.ax-prog i { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(201, 184, 255, 0.18); }
.ax-prog i:first-child { flex: 0.5; }
.ax-prog b { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.45s cubic-bezier(.2, .8, .2, 1); }
.ax-prog i.now { box-shadow: 0 0 10px rgba(201, 184, 255, 0.45); }
.ax-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 5vh, 64px) 0 clamp(12px, 3vh, 28px); transition: opacity 0.16s ease, transform 0.16s ease; }
.ax-card.swap { opacity: 0; transform: translateY(-10px); }
.ax-area { font-size: clamp(13.5px, 1.05vw, 16px); line-height: 1.3; letter-spacing: 0.02em; color: var(--accent); }
.ax-q { margin-top: clamp(6px, 1.4vh, 12px); font-size: clamp(26px, min(3.4vw, 6vh), 52px); font-weight: 480; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; color: var(--ink); outline: 0; }
.ax-hint { margin-top: 12px; font-size: 14.5px; line-height: 1.4; color: var(--body); }
.ax-hint[hidden], .ax-next[hidden] { display: none; }
.ax-answers { list-style: none; margin: clamp(16px, 4.2vh, 40px) 0 0; padding: 0; display: grid; gap: clamp(7px, 1.4vh, 10px); }
.ax-answers.many { grid-template-columns: 1fr 1fr; }
.ax-a { width: 100%; min-height: clamp(44px, 7.6vh, 64px); display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-radius: 12px; text-align: left; font-size: clamp(15.5px, min(1.2vw, 2.5vh), 18.5px); line-height: 1.35; color: var(--pale); background: var(--panel); border: 1px solid rgba(201, 184, 255, 0.3); transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
@media (hover: hover) { .ax-a:hover { border-color: rgba(201, 184, 255, 0.7); background: rgba(31, 21, 80, 0.92); color: var(--ink); } }
.ax-a b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(201, 184, 255, 0.45); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); transition: background-color 0.2s, color 0.2s; }
.ax-a.on { border-color: var(--accent); background: rgba(201, 184, 255, 0.17); color: var(--ink); }
.ax-a.on b { background: var(--accent); border-color: var(--accent); color: var(--pill-ink); }
.ax-next { align-self: flex-start; margin-top: clamp(12px, 2.6vh, 22px); height: clamp(44px, 7.4vh, 50px); padding: 0 30px; font-size: 16px; }
.ax-next:disabled { opacity: 0.35; pointer-events: none; }
.ax-keys { text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--body); }
@media (pointer: coarse) { .ax-keys { display: none; } }

/* the result */
.ax-result { box-sizing: border-box; width: min(90vw, 1320px); margin: 0 auto; padding: calc(var(--nav-h) + 6vh) 0 9vh; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px clamp(28px, 5vw, 96px); align-items: start; }
.ax-res-label { margin-top: 0; }
.ax-level { margin-top: 12px; font-size: clamp(40px, min(5.4vw, 10vh), 92px); font-weight: 480; line-height: 1; letter-spacing: -0.04em; color: var(--ink); outline: 0; }
.ax-level .num { color: var(--accent); }
.ax-diag { margin-top: clamp(14px, 2.6vh, 24px); max-width: 34em; font-size: clamp(16px, min(1.35vw, 2.9vh), 21px); line-height: 1.55; color: var(--body); }
.ax-res-levels { margin-top: clamp(28px, 5vh, 48px); max-width: 640px; }
.ax-res-levels li p { color: var(--body); }
.ax-res-levels li.on p { border-top-color: var(--accent); font-weight: 600; color: var(--ink); }
.ax-res-dims { margin-top: clamp(32px, 6vh, 56px); max-width: 640px; }
.ax-res-dims h2, .ax-lead h2 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 480; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.ax-res-dims ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.ax-res-dims li { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.6em; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.3; color: var(--pale); }
.ax-res-dims li b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.ax-dots { display: flex; gap: 6px; }
.ax-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(201, 184, 255, 0.5); }
.ax-dots i.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(201, 184, 255, 0.5); }
.ax-res-dims li.weak .ax-dim-name { color: var(--warm); }
.ax-res-dims li.weak .ax-dots i { border-color: rgba(245, 182, 137, 0.6); }
.ax-res-dims li.weak .ax-dots i.on { background: var(--warm); border-color: var(--warm); box-shadow: 0 0 8px rgba(245, 182, 137, 0.45); }
.ax-gaps { margin-top: clamp(22px, 4vh, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.ax-gap { padding: 20px 22px; border-radius: 14px; background: var(--panel); border: 1px solid rgba(245, 182, 137, 0.42); }
.ax-gap-tag { font-size: 13.5px; letter-spacing: 0.03em; color: var(--warm); }
.ax-gap h3 { margin-top: 8px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 480; line-height: 1.2; color: var(--ink); }
.ax-gap h3 + p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--body); }
.ax-res-side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 18px; }
.ax-lead-text { font-size: 15px; line-height: 1.5; color: var(--body); }
.ax-lead.done :is(.book-field, .pill, .ax-lead-text) { display: none; }
.ax-res-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ax-res-act .pill { height: 46px; padding: 0 24px; font-size: 15px; }
.ax-res-act .ax-ghost { height: 46px; padding: 0 20px; font-size: 14.5px; }
.ax-raw { font-size: 13px; letter-spacing: 0.04em; color: var(--body); }

@media (max-width: 859px) {
  .ax-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: calc(var(--nav-h) + 4vh); gap: 32px; }
  .ax-demo { order: -1; width: min(62vw, 36svh, 300px); }
  .ax-dimlist li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ax-levellist { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ax-answers.many { grid-template-columns: 1fr; }
  .ax-result { grid-template-columns: minmax(0, 1fr); }
  .ax-res-side { position: static; }
}
@media (max-width: 599px) {
  .ax-hero { padding: calc(var(--nav-h) + 2svh) 0 6vh; gap: 22px; }
  .ax-demo { width: min(56vw, 30svh, 240px); gap: 10px; }
  .ax-cap { padding-top: 8px; font-size: 15px; }
  .ax-words .page-line { font-size: 16px; }
  .ax-go .pill, .ax-again .pill { height: 50px; font-size: 16px; }
  .ax-dims, .ax-levels { padding: 7vh 0; }
  .ax-dimlist h3 { font-size: 22px; }
  .ax-dimlist .text { font-size: 15.5px; }
  .ax-levellist { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 1px solid var(--hair); }
  .ax-levellist li { grid-template-columns: 28% minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
  .ax-levellist .level-slot { width: 100%; }
  .ax-level-words { padding-top: 0; border-top: 0; }
  .ax-level-words h3 { margin-top: 4px; font-size: 21px; }
  .ax-level-words .text { font-size: 15px; }
  .ax-quiz { padding: calc(var(--nav-h) + 1svh) 0 3svh; }
  .ax-bar { gap: 10px; }
  .ax-ghost { height: 36px; padding: 0 13px; }
  .ax-card { justify-content: flex-start; padding-top: 4svh; }
  .ax-answers { margin-top: auto; padding-top: 24px; gap: 8px; }        /* the question at the top, its answers low, where the thumb is */
  .ax-q { font-size: clamp(25px, 7.2vw, 32px); }
  .ax-a { min-height: 54px; gap: 12px; padding: 10px 14px; font-size: 16px; }
  .ax-answers.many .ax-a { min-height: 48px; }
  .ax-next { align-self: stretch; }
  .ax-result { padding-top: calc(var(--nav-h) + 3vh); gap: 36px; }
  .ax-level { font-size: clamp(38px, 11vw, 48px); }
  .ax-diag { font-size: 16px; }
  .ax-gaps { grid-template-columns: minmax(0, 1fr); }
  .ax-res-dims li { gap: 10px; font-size: 15px; }
  .ax-dots { gap: 4px; }
  .ax-dots i { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ax-card, .ax-prog b { transition: none; } }