/* The homepage: the hero, the marketing sections and their motion hooks.
   Site-owned (see site/README.md). Loaded after /assets/scan.css, which brings
   the tokens (--bg, --ink, --pri, --lime ...), the type scale, .wrap, .btn,
   .eyebrow, .chip, .card, .sev and .ring; anything here may override them. */

/* the people equalizer: dot columns rising from a surface's floor, signal purple to lime at the base */
.eq{position:absolute;left:0;right:0;bottom:0;z-index:0;display:block;width:100%;max-width:none;height:clamp(140px,16vw,220px);pointer-events:none}
.eq rect{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.1s var(--ease-io) var(--d,0ms)}
.eq-rise rect{animation:eqrise 1.2s var(--ease-io) var(--d,0ms) both}
@keyframes eqrise{from{transform:scaleY(.08)}to{transform:none}}
.js .eq-wait:not(.is-in) rect{transform:scaleY(.08)}

/* hero: humanriskshield.com's hero (its centred hero, modern-system.css), with the scan box as
   its call to action, over a floor of people. Same ground, grid, chip, headline, lede, pill
   buttons and proof line, in Plus Jakarta Sans as the marketing site sets its heroes. */
#entry{--fj:'Plus Jakarta Sans',Arial,sans-serif;--hero-ground:#080614;
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(170px,18vw,250px);font-family:var(--fj);
  background:radial-gradient(ellipse at 50% 20%,rgba(83,74,183,.35),transparent 70%),linear-gradient(180deg,var(--hero-ground) 0,var(--hero-ground) 70%,var(--bg) 100%)}
/* the marketing hero's faint 64px grid, fading out from the top */
#entry .dots{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.02) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000 50%,transparent 100%)}
.hero{position:relative;z-index:1;display:grid;justify-items:center;text-align:center}
/* the one lime text on this page, as on humanriskshield.com (SiteLayer::cssProblems allows exactly this rule) */
#entry .hero-accent{color:var(--lime)}
#entry .chip{margin:0 0 28px;padding:8px 14px;gap:10px;border:1px solid rgba(184,255,87,.31);border-radius:99px;background:rgba(184,255,87,.06);
  box-shadow:0 0 30px rgba(184,255,87,.06);font:500 12px/1.4 var(--fm);letter-spacing:.08em}
#entry .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);opacity:.6;flex:none}
#entry h1{margin:0;font-family:var(--fj);font-variation-settings:normal;font-weight:800;font-size:clamp(44px,6.4vw,92px);line-height:1;
  letter-spacing:-.045em;word-spacing:.04em;color:var(--ink);max-width:none;text-wrap:balance}
#entry h1 .hero-accent{display:block;margin-top:4px;text-shadow:0 0 36px rgba(184,255,87,.13)}
/* the typed line: every phrase stacked and hidden, so the line holds the widest (and, on a
   phone, the tallest) one's room and nothing below it moves while it types */
#entry h1 .hero-who{display:grid}
#entry .hero-who-size,#entry .hero-who-live{grid-area:1/1;min-width:0}
#entry .hero-who-size{display:grid;visibility:hidden;pointer-events:none}
#entry .hero-who-size>[data-who]{grid-area:1/1}
#entry .hero-who-live{align-self:start}
#entry .hero-type.is-typing .hero-who-live::after{content:"";display:inline-block;width:3px;height:.8em;margin-left:4px;background:currentColor;vertical-align:baseline}
#entry .lede{max-width:680px;margin:28px auto 0;color:#CBD5E1;font-size:clamp(16px,1.5vw,20px);line-height:1.5}
/* the scan box as the marketing hero's call to action: one glass capsule, a lime pill inside */
#entry .scan-form{max-width:680px;margin-top:36px;gap:12px}
#entry .scan-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#entry .scanbox{gap:6px;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:99px;background:rgba(18,13,43,.5);
  box-shadow:0 24px 80px rgba(83,74,183,.3);transition:border-color .2s,box-shadow .2s}
#entry .scanbox:focus-within{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 24px 80px rgba(83,74,183,.3)}
#entry .scanbox input{min-height:56px;padding:0 22px;border:0;border-radius:99px;background:transparent;font-size:16px}
#entry .scanbox input:focus{border:0;box-shadow:none}
#entry .scanbox .btn{min-height:56px;padding:0 28px;border-radius:99px;font:700 16px/1 var(--fj);letter-spacing:.004em;box-shadow:0 0 30px rgba(184,255,87,.22)}
#entry .scan-help{font-size:12.5px;color:var(--mut)}
#entry .err{text-align:left}
.hero-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:28px}
.hero-tour{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 24px;border:1px solid rgba(255,255,255,.13);border-radius:99px;
  background:rgba(18,13,43,.5);color:#fff;font:700 15px/1 var(--fj);transition:border-color .2s,transform .2s}
.hero-tour:hover{border-color:var(--signal);transform:translateY(-2px)}
.hero-tour svg{width:16px;height:16px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-link{color:var(--ink-2);font:600 15px/1.4 var(--fj);text-decoration:underline;text-decoration-color:rgba(200,195,255,.35);text-underline-offset:4px}
.hero-link:hover{color:var(--ink);text-decoration-color:currentColor}
#entry .proof{margin:18px 0 0;font:500 12px/1.5 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#94A3B8}

/* product frames: a real screen or the free result, always labelled */
.frame{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.frame-bar b{color:var(--ink);font-weight:500}.frame-bar span{margin-left:auto;text-align:right}
.frame-body{padding:20px;display:grid;gap:12px}
.sample-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sample-head .g{display:grid;gap:4px;min-width:0}
.sample-head .g b{font-family:var(--fd);font-variation-settings:"wdth" 86;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.sample-row{display:flex;gap:10px 12px;align-items:center;padding:11px 13px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;font-size:14px;color:var(--ink)}
.sample-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
/* a screen inset in a card: a translucent frame anchored to the card's corner, clipped from the bottom */
.shot{position:relative;margin:0;padding:10px 0 0 10px;border-radius:14px 0 0 0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-right:0;border-bottom:0;overflow:hidden}
.shot>img,.shot>video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-radius:8px 0 0 0;background:var(--frost)}
.shot figcaption{position:absolute;z-index:2;left:20px;bottom:14px;padding:5px 10px;border-radius:6px;background:rgba(13,11,31,.82);color:var(--frost);font:500 11px/1.4 var(--fm);letter-spacing:.06em}
.clip-toggle{position:absolute;right:14px;bottom:14px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(13,11,31,.82);color:var(--frost);cursor:pointer;transition:background-color .2s,border-color .2s}
.clip-toggle[hidden]{display:none}
.clip-toggle:hover{background:var(--raise);border-color:var(--accent)}
.clip-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.clip-toggle .when-playing,.clip-toggle.is-playing .when-paused{display:none}
.clip-toggle.is-playing .when-playing{display:block}

/* ---------- marketing: the editorial sections ---------- */
.section{position:relative;padding:clamp(64px,8vw,120px) 0}
.s-head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(36px,4vw,56px)}
.s-head h2{font-size:clamp(34px,4.4vw,64px);line-height:1}
.s-head p{color:var(--ink-2);font-size:17px;max-width:58ch;line-height:1.6}
.s-head.center{margin-inline:auto;justify-items:center;text-align:center}
.s-head.center .eyebrow{justify-content:center}
.s-head.split{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,44ch);align-items:end;gap:16px 48px}
.s-head.split>div{display:grid;gap:16px}
/* people-field corners: the dot lattice fading from a card's corner, a few single lime dots */
.field{position:relative;isolation:isolate;overflow:hidden}
.field::before{content:"";position:absolute;top:0;right:0;width:min(70%,440px);height:300px;z-index:-1;pointer-events:none;-webkit-mask:radial-gradient(farthest-corner at 100% 0,#000 0%,transparent 70%);mask:radial-gradient(farthest-corner at 100% 0,#000 0%,transparent 70%);background:var(--lit),var(--dots-night)}
.field.on-purple::before{background:var(--lit),var(--dots-purple)}
.field.on-frost::before{background:var(--dots-frost)}

/* bento: the product clip in a lit purple card, the free result, a frost card and a real screen */
.bento{padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.bento-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.bento-grid.flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin-top:16px}
.bcard{display:flex;flex-direction:column;gap:24px;min-height:460px;padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--rim);background:var(--obsidian);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.bcard h2,.bcard h3{font-size:clamp(28px,3vw,42px);line-height:1.04;letter-spacing:-.035em;max-width:16ch;font-variation-settings:"wdth" 80}
.bcard p{color:var(--ink-2);font-size:16px;line-height:1.55;max-width:38ch}
.bcard .copy{display:grid;gap:14px;align-content:start;justify-items:start}
.bcard-feature{padding-right:0;padding-bottom:0;background:var(--pri);border-color:var(--pri)}
.bcard-feature .copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px;align-items:end;padding-right:clamp(26px,3vw,40px)}
.bcard-feature .copy>.tlink{grid-column:2}
.bcard-feature .eyebrow,.bcard-feature p{color:#ECEAFF}
.bcard-feature h2{color:#fff}
.bcard-feature .tlink{color:#fff}
.bcard-feature .shot{margin-top:auto;margin-left:clamp(26px,3vw,40px)}
@media(min-width:901px){.bcard-feature .shot{flex:1 1 auto;min-height:380px}.bcard-feature .shot>video{position:absolute;top:10px;left:10px;width:calc(100% - 10px);height:calc(100% - 10px);aspect-ratio:auto}}
.bcard-sample{justify-content:space-between}
.bcard-sample .frame{background:var(--void);border-color:var(--rim)}
.bcard-frost{background:var(--frost);border-color:var(--frost);color:var(--on-frost);justify-content:space-between}
.bcard-frost .eyebrow{color:#2A2458}
.bcard-frost .eyebrow::before{background:var(--pri)} /* lime never sits on a light surface */
.bcard-frost h3{color:var(--on-frost)}
.bcard-frost p{color:#2A2458}
.bcard-frost .tlink{color:var(--pri)}
.bcard-screen{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:28px;padding-right:0;padding-bottom:0}
.bcard-screen .copy{padding-bottom:clamp(26px,3vw,40px)}
.bcard-screen .shot{align-self:end;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

/* how it works: three step cards */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{display:grid;gap:14px;align-content:start;min-height:260px;padding:clamp(24px,2.6vw,34px)}
.step .n{font-family:var(--fd);font-variation-settings:"wdth" 80;font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--mut-2)}
.step h3{font-size:24px;letter-spacing:-.025em}
.step p{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.step:first-child{background:var(--pri);border-color:var(--pri)}
.step:first-child .n{color:#DCD8FF}.step:first-child p{color:#ECEAFF}

/* what we check: a catalogue, the first card lit purple */
.cat-label{font-family:var(--fd);font-variation-settings:"wdth" 74;font-weight:800;font-size:clamp(38px,4.6vw,68px);line-height:.96;letter-spacing:-.025em;text-transform:uppercase;color:var(--ink);max-width:14ch}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;min-height:clamp(250px,21vw,290px);padding:24px;border:1px solid var(--rim);border-radius:var(--r-md);background:var(--obsidian);box-shadow:inset 0 1px rgba(255,255,255,.08);transition:border-color .25s,transform .25s var(--ease)}
.cat-card:hover{border-color:var(--rim-hi);transform:translateY(-3px)}
.cat-k{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cat-card .tile{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--accent);margin-bottom:auto}
.cat-card .tile .ic{width:20px;height:20px}
.cat-card h3{font-size:clamp(21px,1.8vw,25px);letter-spacing:-.03em;color:var(--ink)}
.cat-card p{color:var(--ink-2);font-size:15px;line-height:1.5}
.cat-card.lit{background:var(--pri);border-color:var(--pri);justify-content:space-between}
.cat-card.lit h3{font-size:clamp(24px,2.2vw,30px);color:#fff}
.cat-card.lit p,.cat-card.lit .cat-k{color:#ECEAFF}
.cat-card.lit .btn{margin-top:auto}

/* demo: a void panel, the film, a floor of people */
.panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,6vw,88px) clamp(20px,4vw,64px) clamp(170px,17vw,240px);border:1px solid var(--rim);border-radius:var(--r-xl);background:var(--void)}
.panel>:not(.eq){position:relative;z-index:1}
.demo-frame{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:var(--bg-1);box-shadow:0 40px 100px rgba(5,3,13,.7)}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* the loop: continuous exposure management, the snapshot's stage lit */
.cycle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cyc{display:flex;flex-direction:column;gap:12px;min-height:250px;padding:22px 20px;border:1px solid var(--rim);border-radius:var(--r-md);background:var(--obsidian);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.cyc.here{background:var(--pri);border-color:var(--pri)}
.cyc .n{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:12px;font-weight:600;border:1.5px solid var(--signal);color:var(--ink)}
.cyc.here .n{background:var(--lime);border-color:var(--lime);color:var(--on-frost)}
.cyc h4{font-size:21px;letter-spacing:-.025em}
.cyc p{color:var(--ink-2);font-size:14px;line-height:1.55}
.cyc.here p{color:#ECEAFF}
.cyc .here-tag{margin-top:auto;font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:8px}
.cyc .here-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}

/* free vs full: the comparison on hairlines, HRS Exposure lit */
.cmp-wrap{overflow-x:auto;border:1px solid var(--rim);border-radius:var(--r-lg);background:var(--obsidian)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.cmp thead th{font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:rgba(7,6,26,.5)}
.cmp thead th.hl{color:#fff;background:var(--pri)}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp td{color:var(--ink-2);width:180px}
.cmp td.hl{background:rgba(83,74,183,.22);color:var(--ink)}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp .y,.cmp .x{display:inline-flex;align-items:center;gap:8px}
.cmp .y{color:var(--accent)}.cmp .x{color:var(--mut)}
.cmp .ic{width:16px;height:16px}

/* questions: a big label beside the accordion; plus opens, minus closes */
.faq-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.faq-grid .cat-label{max-width:10ch}
.faq{display:grid}
.faq details{border-bottom:1px solid var(--rim)}
.faq details:first-child{border-top:1px solid var(--rim)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:650;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.015em;display:flex;justify-content:space-between;gap:20px;align-items:center;font-variation-settings:"wdth" 92;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:44px;height:44px;padding:11px;border:1.5px solid var(--signal);border-radius:12px;background:rgba(255,255,255,.03);color:var(--frost);transition:background-color .2s,border-color .2s}
.faq summary:hover .ic{background:var(--raise);border-color:var(--accent)}
.faq details[open] summary .ic .v{display:none}
.faq .a{padding:0 64px 24px 0;color:var(--ink-2);font-size:15.5px;line-height:1.65;max-width:68ch}

/* closing: a panel with the one primary action and an outline secondary, over a floor of people */
.final{padding:clamp(24px,3vw,48px) 0 clamp(56px,7vw,96px)}
.final .panel{text-align:center;background:linear-gradient(180deg,#26215C 0%,#16123A 55%,var(--void) 100%)}
.final .chip{margin:0 auto}
.final h2{font-size:clamp(38px,5vw,72px);font-variation-settings:"wdth" 74;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;line-height:.96;max-width:16ch;margin:22px auto 0}
.final p{color:var(--ink-2);font-size:18px;margin:20px auto 32px;max-width:52ch}
.final .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final .row .btn{min-height:54px;padding:0 26px;font-size:16px}
.final .fine2{margin-top:24px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cycle{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .bento-grid,.bento-grid.flip{grid-template-columns:1fr}
  .bcard{min-height:0}
  .bcard-screen{grid-template-columns:1fr;gap:8px}
  .bcard-feature .copy{grid-template-columns:1fr}.bcard-feature .copy>.tlink{grid-column:auto}
  .bcard-screen .copy{padding-bottom:0;padding-right:clamp(26px,3vw,40px)}
  .bcard-feature .shot,.bcard-screen .shot{margin-left:20px}
  .grid3{grid-template-columns:1fr}.step{min-height:0}
  .s-head.split{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .cycle{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .panel{border-radius:var(--r-lg)}
}
@media(max-width:560px){
  .cat-grid,.cycle{grid-template-columns:1fr}
  .cat-card,.cyc{min-height:0}
  .final .row .btn{width:100%}
  /* as the marketing hero on a phone: the capsule opens into a field and a full-width pill */
  #entry h1{font-size:clamp(32px,9.2vw,44px);letter-spacing:-.04em}
  #entry .scanbox{padding:0;border:0;background:none;box-shadow:none;gap:12px}
  #entry .scanbox:focus-within{box-shadow:none}
  #entry .scanbox input{min-height:52px;border:1px solid rgba(255,255,255,.13);background:rgba(18,13,43,.5)}
  #entry .scanbox input:focus{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
  #entry .scanbox .btn{min-height:52px;font-size:15px}
  .hero-tour{width:100%;justify-content:center}
  #entry .proof{font-size:10px;letter-spacing:.08em}
  .faq .a{padding-right:0}
  .sample-head .ring svg{width:92px;height:92px}
}
@media(prefers-reduced-motion:reduce){.js .eq-wait:not(.is-in) rect{transform:none}}