/* 8eyed.com - shared stylesheet for all six pages (redesign drafted 2026-10-07/08).
   One idea: the page is built from real AI answers and the counts taken from them.
   Type: Newsreader is the one display face (headlines only); Geist for all text,
   16 to 18px for body copy.
   Colour, 60 / 30 / 10: white, black, the logo's orange. Orange marks only what we want
   looked at: the Apply buttons and the headline finding.
   Spacing: every margin, padding and gap is a multiple of 8px (4px only inside labels). */

:root{
  --paper:#FFFFFF;
  --paper-deep:#F2F2F2;
  --ink:#0B0B0B;
  --ink-soft:#5F5F5F;
  --on-ink:#D6D6D6;
  --hair:#E4E4E4;
  --mark:#FB5A33;
  --display:Newsreader,Georgia,"Times New Roman",serif;
  --sans:Geist,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--ink-soft)}
img{max-width:100%}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0}

.wrap{max-width:1160px;margin:0 auto;padding:0 32px}

/* ---------- header ---------- */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.top .logo{display:block;line-height:0}
.top .logo img{height:40px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:32px;font:500 15px/1 var(--sans)}
.nav a{color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--ink)}
.nav a.apply{background:var(--mark);border:1px solid var(--mark);padding:8px 16px;border-radius:8px}
.nav a.apply:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- controls ---------- */
.btn,button,.next a{display:inline-block;font:500 16px/1 var(--sans);color:var(--ink);background:var(--mark);border:1px solid var(--mark);padding:16px 24px;text-decoration:none;cursor:pointer;border-radius:8px}
.btn:hover,button:hover,.next a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
button:disabled{opacity:.6;cursor:default}
.quiet{font:400 16px/1.4 var(--sans);color:var(--ink)}
.actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:32px}

/* ---------- headlines ---------- */
h1{font:400 clamp(40px,5.2vw,72px)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
h2{font:400 clamp(34px,4.4vw,60px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
h3{font:600 17px/1.3 var(--sans)}
.standfirst{font-size:18px;line-height:1.5;margin-top:24px;max-width:31em;color:var(--ink-soft)}
.soft{color:var(--ink-soft)}

/* ---------- home: hero ---------- */
.hero{padding:48px 0 96px;overflow:hidden}
/* Always two lines. The longer line is 12.2 times the type size wide, so the size is the
   space available divided by 13. The page column stops growing at 1096px, so the size is
   capped at 84px (a line of 1026px). */
.hero h1{font-size:min(84px,calc((100vw - 64px) / 13));line-height:.98;letter-spacing:-.035em;text-align:center;text-wrap:initial;white-space:nowrap}
/* clipped top and bottom only (for the rise-in), never at the sides */
.hero h1 .line{display:block;overflow:visible clip;padding-bottom:8px}
.hero h1 .line > span{display:block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .line + .line{margin-top:-8px}
.hero h1 .line + .line > span{animation-delay:.09s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.stage{display:grid;grid-template-columns:1fr 400px 1fr;gap:64px;align-items:center;margin-top:56px}
.stage .standfirst{margin-top:0;color:var(--ink)}
.stage .left{max-width:19em}
.stage .right{max-width:19em;justify-self:end}
.finding{font:400 34px/1.08 var(--display);letter-spacing:-.02em}
.finding b{font-weight:400;box-shadow:inset 0 -2px 0 var(--mark)}
/* one sentence to a line, so the break never falls mid-sentence */
.stage .finding span{display:block}
.source{font:400 13px/1.5 var(--sans);color:var(--ink-soft);margin-top:16px;max-width:62em}

/* the phone: one real question and each assistant's real answer */
/* The frame is our own drawing, inline in the page (400x828, screen inset 24px), with a
   plain box shadow behind it. The contents are padded to sit on its screen. The height
   is set outright as well as by aspect-ratio, for browsers that lack it. */
.phone{position:relative;width:400px;height:828px;aspect-ratio:400/828;padding:48px 40px 40px;--hair:#D8D8D8}
.phone .frame{position:absolute;left:0;top:0;width:100%;height:100%}
.phone .shade{position:absolute;left:8px;right:8px;top:6px;bottom:6px;border-radius:60px;box-shadow:0 24px 48px rgba(0,0,0,.22)}
.phone > div,.phone > p{position:relative}
.phone input{position:absolute;opacity:0;pointer-events:none}
.phone .tabs{display:grid;grid-template-columns:1fr 1fr;background:#E0E0E0;border-radius:8px;padding:4px;font:500 14px/1 var(--sans)}
.phone .tabs label{margin:0;text-align:center;padding:8px 0;border-radius:4px;cursor:pointer;color:var(--ink-soft);font:inherit;transition:background .25s,color .25s}
#ai-c:checked ~ .tabs label[for=ai-c],#ai-g:checked ~ .tabs label[for=ai-g]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
#ai-c:focus-visible ~ .tabs label[for=ai-c],#ai-g:focus-visible ~ .tabs label[for=ai-g]{outline:2px solid var(--ink)}
.phone .ask{margin:16px 0 0 32px;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px;padding:16px;font-size:16px;line-height:1.35}
.phone .ask .rest{visibility:hidden}
.phone .ask .caret{display:inline-block;width:2px;height:1em;background:var(--mark);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.phone .reply{margin-top:16px}
#ai-c:checked ~ .reply.g,#ai-g:checked ~ .reply.c{display:none}
.phone .reply p{font:400 13px/1.3 var(--sans);color:var(--ink-soft);padding-bottom:8px}
.phone .reply ol{list-style:none;counter-reset:n}
.phone .reply li{counter-increment:n;display:grid;grid-template-columns:24px 1fr;padding:8px 0;border-top:1px solid var(--hair)}
.phone .reply li::before{content:counter(n);font:400 13px/1.6 var(--sans);color:var(--ink-soft)}
.phone .reply strong{display:block;font:600 16px/1.3 var(--sans)}
.phone .reply q{display:block;quotes:none;font-size:14.5px;line-height:1.35;color:var(--ink-soft)}
/* while the script is playing the answer in: each line rises into place */
.phone.live .reply p,.phone.live .reply li{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.phone.live .reply .in{opacity:1;transform:none}
.phone .dots{display:none;gap:4px;margin-top:16px;padding:16px;background:#E0E0E0;border-radius:16px 16px 16px 4px;width:max-content}
.phone.thinking .dots{display:flex}
.phone.thinking .reply{display:none}
.phone .dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);animation:bob 1s ease-in-out infinite}
.phone .dots i:nth-child(2){animation-delay:.15s}
.phone .dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* the charging cable: plugged into the bottom of the phone, it runs off the hero and is
   picked up by the three sections below */
.phone .cable{position:absolute;left:50%;top:calc(100% - 8px);width:8px;height:1600px;margin-left:-4px;background:var(--ink)}
.phone .cable::before{content:"";position:absolute;left:-8px;top:0;width:24px;height:32px;border-radius:4px 4px 8px 8px;background:var(--ink)}

/* ---------- the cable through Diagnose, Optimise, Monitor ---------- */
.cord{position:relative;padding:64px 0 224px}
.cord > svg:not(.slider){position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cord > svg:not(.slider) path{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.step{position:relative;display:flex;align-items:flex-start;gap:48px;max-width:1160px;margin:0 auto;padding:96px 32px}
/* The 50% is half the WINDOW, but a section is never wider than 1160px. Past a 1536px window
   the padding kept growing and squeezed the text until the heading spilled over the cable,
   so it stops at the value it has there (592px), which leaves the text its full 440px. */
.step:nth-of-type(odd){padding-left:min(calc(50% - 176px),592px)}
.step:nth-of-type(even){flex-direction:row-reverse;padding-right:min(calc(50% - 176px),592px);text-align:right}
.step .node{flex:none;width:48px;height:48px;margin-top:32px;border-radius:50%;background:var(--paper);border:8px solid var(--ink);transition:background .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.step.on .node,.cord:not(.wired) .node{background:var(--mark);transform:scale(1.15)}
.step > div{max-width:440px;min-width:0}
/* the 8 on its side: glasses, upgraded glasses, a monocle */
.spec{display:inline-block;height:96px;width:192px;margin-bottom:8px;overflow:visible;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.spec .rim{fill:none;stroke:var(--mark);stroke-width:10}
.spec .arm{fill:none;stroke:var(--mark);stroke-width:6;stroke-linecap:round}
.spec .brow{fill:none;stroke:var(--mark);stroke-width:10;stroke-linecap:round}
.spec .lens{transition:fill .6s .2s}
.spec.shades .lens{fill:var(--mark)}
.spec .glint{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round}
.spec .cord{fill:none;stroke:var(--mark);stroke-width:4;stroke-linecap:round}
.spec.binos{height:112px}
.spec .barrel{fill:var(--mark)}
/* Monitor's binoculars focus: the glass darkens a little and a darker centre closes in,
   like a lens zooming, then eases back out. It runs once the cable has reached Monitor. */
.spec .glass{fill:var(--ink);opacity:.06}
.spec .iris{fill:var(--ink);opacity:.14;transform-box:fill-box;transform-origin:center}
.step.on .spec .glass,.cord:not(.wired) .spec .glass{animation:tint 4.5s ease-in-out .6s infinite}
.step.on .spec .iris,.cord:not(.wired) .spec .iris{animation:focus 4.5s ease-in-out .6s infinite}
@keyframes tint{0%,100%{opacity:.06}40%,62%{opacity:.2}}
@keyframes focus{0%,100%{transform:scale(1);opacity:.14}40%,62%{transform:scale(.5);opacity:.82}}
/* Thrive: a client in glasses walking in through an open door */
.spec.scene{height:160px;width:230px}
.spec .floor{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.spec .frame{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.spec .leaf{fill:var(--ink)}
.spec .knob{fill:var(--mark)}
.spec .legs{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.spec .body{fill:var(--paper);stroke:var(--ink);stroke-width:6}
.spec .shirt{fill:var(--ink);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.spec .smile{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.spec.scene .rim{stroke-width:6;fill:var(--paper)}
.spec.scene .arm{stroke-width:4}
/* The client walks in through the door (the script adds "go" to start each walk, then has
   him slide down the cable). The door's open leaf is drawn in front, so he passes behind
   it as he goes in. Until the script starts him he is out of sight; with no script, or
   with reduced motion ("rest"), he simply stands by the door. */
.cord.wired .spec.scene:not(.go):not(.rest) .walker{opacity:0}
.spec.scene.go .walker{animation:walk 3.4s linear 1 both}
.spec.scene.go .bob{animation:tread .42s ease-in-out infinite alternate}
.spec.scene.go .leg-a{animation:step .42s ease-in-out infinite alternate}
.spec.scene.go .leg-b{animation:step .42s ease-in-out -.42s infinite alternate}
@keyframes walk{0%{transform:translateX(-34px);opacity:0}10%{opacity:1}82%{transform:translateX(70px);opacity:1}100%{transform:translateX(90px);opacity:0}}
/* the same client, hanging from the cable by both arms as he slides down it */
.slider{position:absolute;left:0;top:0;width:64px;height:83px;margin:-6px 0 0 -32px;z-index:2;opacity:0;pointer-events:none;overflow:visible;transform-origin:50% 6%;transition:opacity .18s}
.slider .limb{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.slider .skin{fill:var(--paper);stroke:var(--ink);stroke-width:5}
.slider .shirt{fill:var(--ink);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.slider .eye{fill:var(--paper);stroke:var(--mark);stroke-width:5}
.slider .pupil,.slider .mouth{fill:var(--ink)}
@keyframes tread{to{transform:translateY(-3px)}}
@keyframes step{to{transform:translateY(-4px)}}
/* until the cable reaches a section its glasses sit a little high, then settle on */
.cord.wired .step:not(.on) .spec{transform:translateY(-16px);opacity:0}
.cord.wired .step:not(.on) .spec.shades .lens{fill:transparent}
.step h2{font-size:clamp(56px,8vw,112px);line-height:1;letter-spacing:-.04em;color:var(--mark)}
.step p{font-size:18px;margin-top:16px}
.step:nth-of-type(even) p{margin-left:auto}

/* ---------- the product view, a popup opened from the link under Diagnose ----------
   One white sheet with hairline rules, no cards inside it. Numbers in the display face,
   everything else in Geist. Orange appears once: on "Your firm". */
.dash{position:relative;margin:0;background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:0 32px 64px -40px rgba(0,0,0,.28);overflow:hidden;font:400 14px/1.4 var(--sans);scroll-margin-top:24px}
.dash-wrap{padding-top:64px;padding-bottom:16px}
/* the sample dashboard itself, in a frame: it works, and lays itself out for the width it is given */
.dash.live iframe{display:block;width:100%;height:780px;border:0}
.glimpse-in iframe{display:block;width:1096px;height:620px;border:0}
.dash-bar{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--hair)}
.dash-bar img{height:24px;width:auto;display:block}
.dash-bar .crumb{padding-left:16px;border-left:1px solid var(--hair);font-weight:500}
.dash-tabs{display:flex;gap:24px;margin-left:24px;color:var(--ink-soft)}
.dash-tabs b{font-weight:500;color:var(--ink);box-shadow:0 17px 0 -15px var(--ink)}
.dash-bar .meta{margin-left:auto;color:var(--ink-soft);font-size:13px;font-variant-numeric:tabular-nums}
/* the homepage glimpse: the same dashboard at its real width, scaled down (--k is set by
   the script to the width available) and cropped, fading out at the bottom */
.glimpse{display:block;position:relative;max-width:100%;height:216px;margin-top:24px;overflow:hidden;border:1px solid var(--hair);border-bottom:0;border-radius:8px 8px 0 0;text-decoration:none;text-align:left;--k:.4;transition:border-color .2s,transform .2s}
.glimpse:hover{border-color:var(--ink);transform:translateY(-4px)}
.glimpse-in{display:block;width:1096px;transform-origin:0 0;transform:scale(var(--k));pointer-events:none}
.glimpse .dash{border:0;border-radius:0;box-shadow:none}
.glimpse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;background:linear-gradient(rgba(255,255,255,0),#fff 72%)}
.glimpse-tag{position:absolute;left:0;right:0;bottom:8px;z-index:1;text-align:center;font:500 14px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.step .glimpse + p{margin-top:8px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--hair)}
.stat{padding:24px}
.stat + .stat{border-left:1px solid var(--hair)}
.stat .k{font-size:13px;color:var(--ink-soft)}
.stat .v{font:400 56px/1 var(--display);letter-spacing:-.03em;margin-top:16px;font-variant-numeric:lining-nums}
.stat .v small{font:400 14px/1 var(--sans);letter-spacing:0;color:var(--ink-soft)}
.stat .s{font-size:13px;color:var(--ink-soft);margin-top:8px}
.stat.you .k,.stat.you .v{color:var(--mark)}
.dash-grid{display:grid;grid-template-columns:7fr 5fr}
.panel{padding:24px;border-bottom:1px solid var(--hair);min-width:0}
.panel:nth-child(even){border-left:1px solid var(--hair)}
.panel:nth-last-child(-n+2){border-bottom:0}
.panel h3{font:600 14px/1.3 var(--sans);display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.panel h3 span{font-weight:400;font-size:13px;color:var(--ink-soft);text-align:right}
.panel .note{font-size:13px;color:var(--ink-soft);margin-top:16px}
.dash table.count{font-size:14px}
.dash table.count td{padding:8px 0}
.dash table.count tr:last-child td{border-bottom:0}
.dash table.count td.bar{width:58%}
.dash .bar i{width:var(--w);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.dash table.split td.l i,.dash table.split td.r i{width:var(--w);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.dash.wait .bar i,.dash.wait table.split i{width:0}
.dash tr.you td{color:var(--mark);font-weight:500}
.dash tr.you .bar i,.dash table.split tr.you i{background:var(--mark)}
.dash table.heat tr.you td.firm{color:var(--mark);font-weight:500}
/* a dotted break: other firms sit between the seven shown and this one */
.dash table.count tr.gap td{padding:0;height:16px;border-bottom:0;background:radial-gradient(circle,var(--ink-soft) 1px,transparent 1.5px) left 8px center/8px 8px repeat-y;background-size:8px 5px;background-position:4px 0}
.dash table.count tr.gap + tr td{border-top:1px solid var(--hair)}
.shades-s{display:inline-block;width:28px;height:14px;vertical-align:-2px;margin-left:4px;overflow:visible}
.shades-s .rim{fill:var(--mark);stroke:var(--mark);stroke-width:10}
.shades-s .arm{fill:none;stroke:var(--mark);stroke-width:8;stroke-linecap:round}
.shades-s .brow{fill:none;stroke:var(--mark);stroke-width:10;stroke-linecap:round}
.shades-s .glint{fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:round}
table.heat{width:100%;border-collapse:separate;border-spacing:4px 4px;margin:0 -4px;font-variant-numeric:tabular-nums}
table.heat th{font-weight:400;font-size:12px;line-height:1.25;color:var(--ink-soft);text-align:center;vertical-align:bottom;padding:0 0 4px}
table.heat td.firm{white-space:nowrap;padding-right:8px}
/* darker means named in more of that area's 20 answers */
table.heat td.cell{text-align:center;padding:8px 0;border-radius:4px;background:rgba(11,11,11,calc(.05 + var(--a) * .87));color:var(--ink)}
table.heat td.cell.dark{color:#fff}
.dash-qs{list-style:none}
.dash-qs li{padding:8px 0 16px;border-top:1px solid var(--hair)}
.dash-qs li:first-child{border-top:0;padding-top:0}
.dash-qs li:last-child{padding-bottom:0}
.dash-qs .q{font:400 18px/1.25 var(--display);letter-spacing:-.01em}
.dash-qs .a{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:8px;font-size:13px;color:var(--ink-soft)}
.dash-qs .a b{font-weight:500;color:var(--ink)}
.dash figcaption{margin:0;padding:16px 24px;font-size:13px;color:var(--ink-soft)}

/* ---------- the same exhibit as a flat figure (inner pages) ---------- */
.exhibit{border-top:1px solid var(--ink);padding-top:16px}
.exhibit .asked{font:400 14px/1.4 var(--sans);color:var(--ink-soft)}
.exhibit .question{font:400 clamp(24px,2.6vw,34px)/1.15 var(--display);letter-spacing:-.015em;margin-top:8px}
.answers{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border-top:1px solid var(--ink)}
.answer{padding:16px 24px 8px 0}
.answer + .answer{padding-left:24px;padding-right:0;border-left:1px solid var(--hair)}
.answer h3{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.answer h3 span{font-weight:400;font-size:13px;color:var(--ink-soft)}
.answer ol{list-style:none;counter-reset:n;margin-top:8px}
.answer li{counter-increment:n;display:grid;grid-template-columns:24px 1fr;padding:8px 0;border-top:1px solid var(--hair)}
.answer li::before{content:counter(n);font:400 13px/1.7 var(--sans);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.answer li strong{display:block;font:600 17px/1.3 var(--sans)}
.answer li q{display:block;font-size:16px;line-height:1.4;color:var(--ink-soft);quotes:none}
.exhibit .finding{margin-top:8px;padding-top:16px;border-top:1px solid var(--ink);font-size:24px}

/* ---------- the record line under the hero ---------- */
.record{position:relative;background:var(--ink)}
/* the client stands on the banner's top edge, on the white above it */
.crew{position:absolute;left:50%;bottom:calc(100% - 2px);width:min(540px,calc(100% - 32px));transform:translateX(-50%);overflow:visible;pointer-events:none}
.crew .limb{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round}
.crew .eye{fill:var(--paper);stroke:var(--mark);stroke-width:6}
.crew .pupil{fill:var(--ink)}
.crew .temple{fill:none;stroke:var(--mark);stroke-width:4;stroke-linecap:round}
.crew .grin{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round}
.crew .grin.dark{stroke:var(--ink)}
.crew .skin{fill:var(--paper);stroke:var(--ink);stroke-width:6}
.crew .shirt{fill:var(--ink);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
/* small movements: a wave, a roll on the board while leaning back, a steady watch, a wave */
.crew .wave-r{transform-origin:492px 100px;animation:wave-r 1.1s ease-in-out .3s infinite alternate}
.cord.wired ~ .record .crew .c-client{opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.cord.wired ~ .record .crew .c-client.here{opacity:1;transform:none}
@keyframes wave-r{from{transform:rotate(12deg)}to{transform:rotate(-14deg)}}
.record p{padding:64px 0;font:400 clamp(32px,4.4vw,60px)/1.04 var(--display);letter-spacing:-.025em;text-align:center;color:var(--paper)}
.record span + span::before{content:"\00B7";margin:0 16px;color:#8A8A8A}
/* the real wordmark set into the line: its coral 8 and pale "eyed" are drawn for a dark ground */
.record img{height:1.1em;width:auto;vertical-align:-.2em;margin:0 .04em 0 .08em}

/* ---------- sections ---------- */
.block{padding:128px 0}
.block + .block{border-top:1px solid var(--hair)}
.block .lead{max-width:36em}
.block .lead p{margin-top:16px}

figure figcaption{font:400 13px/1.5 var(--sans);color:var(--ink-soft);margin-top:16px}
figure .title{font:600 16px/1.35 var(--sans);margin-bottom:16px}

/* tables of counts */
table.count{width:100%;border-collapse:collapse;font:400 16px/1.3 var(--sans);font-variant-numeric:tabular-nums}
table.count th{font-weight:400;font-size:13px;color:var(--ink-soft);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--ink);vertical-align:bottom}
table.count td{padding:8px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
table.count td.firm,table.count th.firm{padding-right:16px;white-space:nowrap}
table.count .num{text-align:right;width:3.2em}
table.count td.bar{width:55%}
.bar i{display:block;height:8px;background:var(--ink)}
table.split td.l,table.split td.r{width:30%}
table.split td.l i{display:block;height:8px;background:var(--ink);margin-left:auto}
table.split td.r i{display:block;height:8px;background:#9B9B9B}
table.split td.l{border-right:1px solid var(--ink)}
table.matrix td.num,table.matrix th.num{width:auto;padding-left:8px}
table.matrix td.hi{font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}

/* a list of real questions, with who was named first */
.asklist{list-style:none;border-top:1px solid var(--ink)}
.asklist li{padding:16px 0;border-bottom:1px solid var(--hair)}
.asklist .q{font:400 21px/1.25 var(--display);letter-spacing:-.01em}
.asklist .a{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:8px;font:400 16px/1.4 var(--sans);color:var(--ink-soft)}
.asklist .a b{font-weight:600;color:var(--ink)}
.asklist.plain .q{font-size:23px}

/* term on the left, explanation on the right */
dl.ledger{border-top:1px solid var(--ink);margin-top:56px}
dl.ledger > div{display:grid;grid-template-columns:4fr 8fr;gap:56px;padding:24px 0;border-bottom:1px solid var(--hair);align-items:baseline}
dl.ledger dt{font:400 30px/1.1 var(--display);letter-spacing:-.02em}
dl.ledger dd{max-width:34em;color:var(--ink-soft)}
.aside{margin-top:32px;font-size:16px;color:var(--ink-soft)}

/* founder */
.founder{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:center}
.founder img{display:block;width:100%;max-width:256px;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:16px}
.founder .bio{font:400 clamp(22px,2.3vw,30px)/1.28 var(--display);letter-spacing:-.012em;max-width:26em}
.founder .sig{margin-top:24px;font:400 16px/1.5 var(--sans);color:var(--ink-soft)}
.founder .sig strong{color:var(--ink);font-weight:600}

/* closing */
.block.apply-close{background:var(--ink);color:var(--paper);border-top:0}
.apply-close .wrap{display:grid;grid-template-columns:8fr 4fr;gap:56px;align-items:end}
.apply-close h2{font-size:clamp(44px,6.6vw,92px);letter-spacing:-.035em}
.apply-close p{margin-top:16px;color:var(--on-ink);max-width:34em}
.apply-close a{color:var(--paper)}
.apply-close .btn{color:var(--ink)}
.apply-close .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.apply-close .go{justify-self:end}
/* Glasses sitting on top of the orange Apply button, glistening: a glint crosses each
   lens and two small sparkles twinkle beside them. */
.btn.hooked{position:relative}
.hang{position:absolute;left:50%;bottom:calc(100% - 4px);width:80px;height:40px;margin-left:-40px;overflow:visible;pointer-events:none}
.hang .rim{fill:none;stroke:var(--mark);stroke-width:10}
.hang .arm{fill:none;stroke:var(--mark);stroke-width:6;stroke-linecap:round}
.hang .glint{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round;animation:glint 2.8s ease-in-out infinite}
.hang .spark{fill:var(--paper);transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
.hang .s2{animation-delay:1.4s}
@keyframes glint{0%,100%{opacity:.15;transform:translate(-4px,4px)}50%{opacity:1;transform:translate(4px,-4px)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}


/* ---------- inner pages ---------- */
.pagehead{padding:72px 0;border-bottom:1px solid var(--hair)}
.pagehead .wrap{display:grid;grid-template-columns:8fr 4fr;gap:56px;align-items:end}
.pagehead .go{justify-self:end}
/* the barristers' chambers page: Ezra's character in a wig and bands beside the heading */
.pagehead.bar .wrap{align-items:center}
.pagehead .art{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.counsel{width:300px;max-width:100%;height:auto;overflow:visible}
.counsel .body{fill:#004AAD}
.counsel .limb{fill:none;stroke:#004AAD;stroke-width:8;stroke-linecap:round}
.counsel .wig,.counsel .tail{fill:#F3F0E8;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.counsel .curl{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.counsel .eye{fill:var(--paper)}
.counsel .pupil{fill:var(--ink)}
.counsel .grin{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round}
.counsel .bands{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.counsel .wave-c{transform-origin:146px 118px;animation:wave-c 1.2s ease-in-out infinite alternate}
@keyframes wave-c{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
.askcols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.askcols .who-asks{font:600 14px/1.4 var(--sans);letter-spacing:.02em;padding-bottom:12px}
.entry{display:grid;grid-template-columns:4fr 8fr;gap:56px;padding:72px 0;border-bottom:1px solid var(--hair);align-items:start}
.entry:last-of-type{border-bottom:0}
.entry h2{font-size:clamp(28px,3vw,40px)}
.entry h2 + .soft{margin-top:16px}
.entry .body{max-width:38em}
.entry .body.wide{max-width:none}
.entry .body > * + *{margin-top:16px}
.entry .body ul.points{list-style:none;border-top:1px solid var(--ink)}
.entry .body ul.points li{padding:16px 0;border-bottom:1px solid var(--hair)}
.entry .body ul.points strong{font:600 16px/1.4 var(--sans)}
.entry .body > figure{margin-top:48px}
.entry dl.ledger{margin-top:0}
.entry dl.ledger > div{grid-template-columns:1fr;gap:8px;padding:16px 0}
.entry dl.ledger dt{font-size:26px}
.entry .who{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.entry .who img{width:120px;height:120px;object-fit:cover;filter:grayscale(1) contrast(1.05);display:block;border-radius:8px}
.entry .who p + p{margin-top:16px}

/* ---------- apply form ---------- */
.sheet{padding:64px 0 96px}
.sheet .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.sheet form{border-top:1px solid var(--ink)}
.sheet form > div{padding:16px 0;border-bottom:1px solid var(--hair)}
label{display:block;font:500 14px/1.4 var(--sans);margin-bottom:8px}
input[type=text],input[type=email],select{width:100%;font:400 17px/1.3 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:8px 0;outline:0;-webkit-appearance:none;appearance:none}
select{background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 8px center/8px 8px no-repeat,linear-gradient(135deg,var(--ink) 50%,transparent 50%) right 0 center/8px 8px no-repeat}
input:focus,select:focus{box-shadow:0 1px 0 var(--mark);border-bottom-color:var(--mark)}
input::placeholder{color:#8A8A8A}
.sheet form button{margin-top:24px}
.note{font:400 14px/1.5 var(--sans);color:var(--ink-soft);margin-top:16px}
.back{display:inline-block;margin-top:32px;font:400 14px/1.4 var(--sans)}

/* ---------- crawler check ---------- */
.checkform{display:flex;gap:16px;align-items:flex-end;border-top:1px solid var(--ink);padding-top:24px}
.checkform input{flex:1}
.err{margin-top:16px;padding:16px;border-left:2px solid var(--ink);background:var(--paper-deep);font:400 16px/1.45 var(--sans)}
.out{display:none;margin-top:32px}
.verdict{font:400 24px/1.3 var(--display);padding:16px 0 16px 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.verdict.v-bad{box-shadow:inset 4px 0 0 var(--ink)}
.verdict.v-ok{box-shadow:inset 4px 0 0 #9B9B9B}
#tbl{width:100%;border-collapse:collapse;margin-top:24px;font:400 16px/1.35 var(--sans)}
#tbl th{font-weight:400;font-size:13px;color:var(--ink-soft);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--ink)}
#tbl td{padding:8px 0;border-bottom:1px solid var(--hair);vertical-align:top}
#tbl .who{display:block;color:var(--ink-soft);font-size:13px}
#tbl .st{text-align:right;font-weight:600}
.problem,.gate{margin-top:32px;padding-top:16px;border-top:1px solid var(--ink)}
.problem h3,.gate h3{font:400 24px/1.2 var(--display)}
.problem p,.gate p{margin-top:8px}
.gate .teaser{font-style:italic;padding-left:16px;border-left:2px solid var(--ink)}
.gate .row{display:flex;gap:16px;align-items:flex-end;margin-top:16px}
.gate .row input{flex:1}
.consent{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font:400 13px/1.5 var(--sans);color:var(--ink-soft)}
.consent input{margin-top:4px}
.meas{margin-top:16px;font:400 14px/1.5 var(--sans);color:var(--ink-soft)}
.caveat{margin-top:24px;font-size:16px;color:var(--ink-soft)}
.next{margin-top:24px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--on-ink);border-top:1px solid #2A2A2A;font:400 14px/1.6 var(--sans)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;padding-bottom:48px}
footer .tag{color:#fff}
footer .links a{color:var(--paper);margin-left:24px}
footer .links a:first-child{margin-left:0}

@media (prefers-reduced-motion:reduce){
  .hero h1 .line > span,.phone .dots i,.phone .ask .caret{animation:none}
  .phone.live .reply p,.phone.live .reply li,.step .node,.spec,.spec .lens,.dash .bar i,.dash table.split i{transition:none}
  .crew .wave-r,.counsel .wave-c{animation:none}
  .hang .glint,.hang .spark{animation:none}
  .hang .spark{opacity:1}
  .step.on .spec .glass,.step.on .spec .iris,.cord:not(.wired) .spec .glass,.cord:not(.wired) .spec .iris{animation:none}
  .spec.scene.go .walker,.spec.scene.go .bob,.spec.scene.go .leg-a,.spec.scene.go .leg-b{animation:none}
  .spec .iris{transform:scale(.5);opacity:.82}
  .spec .glass{opacity:.2}
}

/* ---------- narrower screens ---------- */
@media(max-width:940px){
  .stage{grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center}
  .stage .left,.stage .right{max-width:30em;justify-self:center}
  .stage .actions{align-items:center}
  .stage .left{order:2}.stage .phone{order:1}.stage .right{order:3}
  .step,.step:nth-of-type(odd),.step:nth-of-type(even){flex-direction:row;text-align:left;padding:64px 32px;gap:24px}
  .cord{padding:32px 0 168px}
  /* only the plug and a stub of cable: the script draws the rest down the left margin */
  .phone .cable{height:24px}
  .dash-tabs{display:none}
  .dash-stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hair)}
  .dash-grid{grid-template-columns:1fr}
  .panel:nth-child(even){border-left:0}
  .panel:nth-last-child(2){border-bottom:1px solid var(--hair)}
  .founder,.apply-close .wrap,.pagehead .wrap,.entry,.sheet .wrap{grid-template-columns:1fr;gap:32px}
  dl.ledger > div{grid-template-columns:1fr;gap:8px}
  .apply-close .go,.pagehead .go{justify-self:start}
  .pagehead .art{align-items:flex-start}
  .counsel{width:160px}
  .askcols{grid-template-columns:1fr;gap:32px}
  .btn.hooked{margin-top:32px}
  .block{padding:72px 0}
  .hero{padding:32px 0 64px}
}
@media(max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .dash{border-radius:8px}
  .dash-wrap{padding-top:32px}
  .dash.live iframe{height:640px}
  .dash-bar,.stat,.panel{padding:16px}
  .glimpse{height:168px}
  .dash-bar .crumb{font-size:13px}
  .dash-bar .meta{display:none}
  .stat .v{font-size:40px}
  .dash figcaption{padding:16px}
  table.heat{table-layout:fixed;font-size:13px}
  table.heat th:first-child{width:28%}
  table.heat th{font-size:10px;letter-spacing:-.02em;hyphens:auto}
  table.heat{border-spacing:2px 4px;margin:0 -2px}
  table.heat td.firm{white-space:normal;line-height:1.2}
  .step,.step:nth-of-type(odd),.step:nth-of-type(even){padding:48px 16px;gap:16px}
  .step .node{width:32px;height:32px;margin-top:16px;border-width:8px}
  .spec{height:64px;width:128px}
  .spec.binos{height:76px}
  .spec.scene{height:120px;width:172px}
  .top .wrap{min-height:72px}
  .top .logo img{height:32px}
  .nav{gap:16px;font-size:14px}
  .nav .wide{display:none}
  .phone{width:100%;max-width:400px;height:auto;text-align:left;padding:40px 32px 32px}
  .hero h1{font-size:calc((100vw - 32px) / 13)}
  .answers{grid-template-columns:1fr}
  .answer,.answer + .answer{padding:16px 0 8px;border-left:0}
  .answer + .answer{border-top:1px solid var(--ink)}
  table.count td.firm,table.count th.firm{white-space:normal}
  table.count td.bar{width:34%}
  table.split td.l,table.split td.r{width:22%}
  table.matrix{font-size:13px}
  table.matrix th{font-size:11.5px}
  .checkform,.gate .row{flex-direction:column;align-items:stretch}
  .entry .who{grid-template-columns:1fr}
  footer .links a{display:inline-block;margin:0 16px 8px 0}
}