/* Styles for the HINtelligence site: the navy first screen, then the white "how it works" walkthrough and matches table. */
:root{
  --night:#0A1122; --fg:#EDF1F8; --mute:#95A3B9; --dim:#6E7C93; --ice:#7CC4FF; --amberL:#F2A949; --ruleD:rgba(149,163,185,.18);
  --white:#FFFFFF; --paper:#F6F8FB; --ink:#0E1B2C; --ink2:#4A5A6E; --ink3:#7A8899; --rule:#DCE3EB;
  --navy:#14305E; --blue:#1F4E99; --amber:#D98A1C; --amber-ink:#A9650C; --amber-soft:#FBF3E4;
  --head:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mark:"Michroma","Eurostile","Arial Black",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.55 var(--head)}
h1,h2{margin:0;text-wrap:balance}p{margin:0}a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---- screen 1: the ambient hero ---- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(100% 90% at 78% 45%,#0F1D3A 0%,var(--night) 55%,#070C18 100%);color:var(--fg);min-height:100vh;display:flex;flex-direction:column}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,17,34,.96) 0%,rgba(10,17,34,.85) 32%,rgba(10,17,34,.12) 54%,rgba(10,17,34,0) 64%)}
.hero > *:not(canvas){position:relative;z-index:2}
.nav{display:flex;align-items:center;gap:32px;padding:20px clamp(20px,4vw,56px);border-bottom:1px solid var(--ruleD)}
.wm{font:400 14px var(--mark);letter-spacing:.14em;text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:26px}.nav nav a{font:400 15px var(--head);color:var(--mute);text-decoration:none}.nav nav a:hover{color:var(--fg)}

.btn{font:500 15px var(--head);text-decoration:none;padding:11px 18px;display:inline-flex;align-items:center;white-space:nowrap}
.btn.solid{background:var(--fg);color:var(--night)}.btn.solid:hover{background:#fff}
.btn.big{padding:14px 22px;font-size:16px}
.hbody{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:end;padding:72px clamp(20px,4vw,56px) 44px}
.eb{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
h1{font:300 clamp(40px,5vw,66px)/1.02 var(--head);letter-spacing:-.03em;margin-top:18px;max-width:15ch}
h1 span{color:var(--amberL);font-weight:400}
h1 i{font-style:normal;display:inline-block;transition:opacity .45s,transform .45s}h1 i.out{opacity:0;transform:translateY(.12em)}
.lede{margin-top:20px;font-size:18px;color:var(--mute);max-width:46ch}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.eb.logo{display:flex;align-items:center;gap:14px}.eb.logo img{height:38px;width:auto;display:block}
.noteD{margin-top:12px;font-size:13.5px;color:var(--mute)}
.res{align-self:end;justify-self:end;width:min(300px,100%);border-left:1px solid rgba(242,169,73,.5);padding:2px 0 2px 14px;transition:opacity .6s}
.res small{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.res p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--mute)}.res p b{font-weight:500;color:var(--fg)}.res p em{font-style:normal;color:var(--amberL)}
.fade{opacity:0}
.hero.wait .eb,.hero.wait h1,.hero.wait .lede{visibility:hidden}
/* ---- part 2: how it works (white) ---- */
.fadeband{height:120px;background:linear-gradient(var(--night),var(--white))}
.how{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,56px) 96px}
/* WHY: on desktop the three steps live in one panel pinned to the screen; the tall wrapper is the scroll room for them to come in one by one */
.pin{position:relative}
@media (min-width:981px) and (min-height:780px){
  .pin{height:200vh}
  .pinview{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
  .pin .row{align-items:start;transition:none}
  .pin .say h3{font-size:22px}.pin .say p{font-size:15.5px;margin-top:6px}
  .pin .row{margin-top:12px}.pin .card{padding:11px 16px}.pin .card q{margin-top:6px;font-size:15px}.pin .facts{margin-top:8px}.pin .parts{gap:4px;margin-top:6px}.pin .c3 .tot{font-size:28px}
  .pin h2{font-size:30px;margin-top:4px}.pin .part{gap:1px 12px}.pin .part p{font-size:12.5px}.pin .card h4{margin-top:4px}.pin .card .what{margin-top:4px;font-size:14.5px}.pin .row+.row{margin-top:10px}
}
.howhead{padding:0 0 6px}
.how .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.how h2{font:300 clamp(28px,3vw,40px)/1.1 var(--head);letter-spacing:-.02em;margin-top:8px}
/* each step fades in below the last and stays */
.row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(40px,7vh,72px);opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.row.in{opacity:1;transform:none}
.say .n,.last > .n{font:400 13px var(--mark);color:var(--amber-ink)}
.say h3,.last h3{font:400 clamp(24px,2.4vw,30px)/1.2 var(--head);letter-spacing:-.01em;margin:10px 0 0;max-width:20ch}
.say p,.last > p{margin-top:12px;font-size:18px;color:var(--ink2);max-width:34ch}
.last{display:block}.last > p{max-width:none}
.card{background:var(--white);border:1px solid #C9D3DF;box-shadow:0 24px 48px -32px rgba(14,27,44,.4);padding:14px 18px}
.card small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.card h4{margin:8px 0 0;font:600 17px/1.3 var(--head)}
.card .meta{margin-top:2px;font-size:13.5px;color:var(--ink2)}
.card q{display:block;margin-top:8px;font-size:16px;line-height:1.5;quotes:none}
.card mark{color:inherit;background:linear-gradient(var(--amber-soft),var(--amber-soft)) no-repeat 0 0/0 100%;transition:background-size .7s .3s}
.row.in .c1 mark{background-size:100% 100%}
.card a{display:inline-block;margin-top:8px;font-size:13.5px;color:var(--blue)}
.card .what{margin-top:8px;font-size:15px;color:var(--ink2)}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.facts span{font:500 11px var(--mono);letter-spacing:.04em;border:1px solid var(--rule);color:var(--ink2);padding:3px 7px}
.found{margin-top:10px;font-size:12.5px;color:var(--ink3)}.found b{font-weight:600;color:var(--ink2)}
.soon{margin-top:6px;padding:6px 10px;border:1px dashed var(--amber);background:var(--amber-soft);font-size:13px;color:var(--amber-ink)}
.pin .found{margin-top:5px}.pin .soon{margin-top:4px;padding:3px 9px}
.c3{border-left:3px solid var(--amber)}
.c3 .top{display:flex;align-items:baseline;justify-content:space-between}
.c3 .tot{font:400 34px/1 var(--mark);color:var(--navy)}
.parts{margin-top:10px;display:grid;gap:7px}
.part{display:grid;grid-template-columns:62px minmax(0,1fr) 64px;gap:4px 12px;align-items:center;font-size:14px}
.part b{font-weight:600}
.part .bar{height:6px;background:var(--paper);border:1px solid var(--rule)}
.part .bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .7s .3s}
.row.in .part .bar i{width:var(--w)}
.part .pts{font:400 12px var(--mark);color:var(--navy);text-align:right}
.part p{grid-column:2/4;margin:0;font-size:13px;line-height:1.35;color:var(--ink2)}
.win{margin-top:28px;background:var(--white);border:1px solid #C9D3DF;box-shadow:0 30px 60px -36px rgba(14,27,44,.45)}
.win .h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--paper);font:500 14px var(--head)}
.win .h small{font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.more summary{cursor:pointer;list-style:none;padding:12px 16px;border-top:1px solid var(--rule);font:500 14px var(--head);color:var(--blue)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" +"}
.more[open] summary{display:none}
.win .h{border-bottom:0}
.m{display:flex;gap:16px;justify-content:space-between;padding:13px 16px;border-top:1px solid var(--rule)}
.m b{display:block;font-weight:600;font-size:15px}
.m b i{font-style:normal;color:var(--amber);padding:0 6px}
.m .ans{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.m a{display:inline-block;font:400 11.5px var(--mono);color:var(--ink3);margin-top:6px}
.m a:hover{color:var(--blue)}
.m .fit{text-align:right;white-space:nowrap}
p.m{color:var(--ink2)}
.tag{display:inline-block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);color:var(--ink2);padding:2px 6px}
.tag.strong{border-color:#B9C8DE;color:var(--navy)}
.m .sc{display:block;font:400 17px/1 var(--mark);color:var(--navy);margin-top:9px}
.evid{display:flex;border:1px solid var(--rule);border-top:0;background:var(--white)}
.evid div{flex:1 1 140px;padding:14px clamp(14px,1.6vw,22px);border-right:1px solid var(--rule);font-size:13.5px;color:var(--ink2)}
.evid div:last-child{border-right:0}
.evid b{display:block;font:500 14px var(--head);color:var(--ink)}
.evid .h{flex:0 0 170px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center}
.last .acts{margin-top:28px}
.last .btn.solid{background:var(--night);color:var(--fg)}.last .btn.solid:hover{background:var(--navy)}
/* the 1-2-3-4 line on the left: shows where you are in "how it works" */
.prog{position:fixed;left:clamp(14px,2vw,32px);top:50%;transform:translateY(-50%);z-index:4;height:320px;display:none;flex-direction:column;justify-content:space-between;align-items:flex-start;opacity:0;transition:opacity .3s;pointer-events:none}
.prog.on{opacity:1}
.prog .line{position:absolute;left:16px;top:16px;bottom:16px;width:2px;margin-left:-1px;background:var(--rule)}
.prog .line i{display:block;width:100%;height:calc(var(--f,0)*100%);background:var(--amber)}
.prog b{position:relative;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--white);border:2px solid var(--rule);font:400 12px var(--mark);color:var(--ink3);transition:all .25s}
.prog .d{display:flex;align-items:center;gap:10px}
.prog em{font:500 13px var(--head);font-style:normal;color:var(--ink3);transition:color .25s}
.prog .done b{background:var(--amber);border-color:var(--amber);color:var(--white)}
.prog .now b{border-color:var(--amber);color:var(--amber-ink);transform:scale(1.2)}
.prog .now em{color:var(--ink);font-weight:600}.prog .done em{color:var(--ink2)}
/* WHY: only where there is empty space left of the text, so it never covers words */
@media (min-width:1440px){.prog{display:flex}}
@media (max-width:980px){
  .hbody{grid-template-columns:1fr;padding:48px 20px 28px}.nav nav{display:none}.nav{padding:16px 20px}
  .hero::before{background:linear-gradient(180deg,rgba(10,17,34,.2) 0%,rgba(10,17,34,.85) 45%,rgba(10,17,34,.95) 100%)}
  .row{grid-template-columns:1fr;gap:16px}
  .evid{flex-wrap:wrap}.evid .h{flex-basis:100%}.evid div{border-right:0;border-top:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){.row,.part .bar i,.card mark{transition:none}}