/* ===========================================================================
   BadgeBox landing — the «hr» page, the deep dive into the people
   modules.

   It loads ONLY on that page: lp_render() looks for css/page-<slug>.css and
   adds it if it exists. Whoever reads the home does not pay for a sheet it does not use.

   The values come from tokens.css, like the rest of the landing: no colour
   is born here.

   ── THE SCENES ───────────────────────────────────────────────────────────
   They are drawn in HTML and CSS, not photographed. A real screenshot of an
   HR module is either fake — and it shows — or full of real people's names;
   and a drawing translates, reads on a phone, weighs nothing and does not age
   with the next touch-up of the interface.

   Each scene rests in its FINAL STATE. js/scene.js switches the motion on
   by adding `.is-on` when the scene enters the screen: without JavaScript,
   or with «reduce motion», the page stays whole and tells the same
   story.
   =========================================================================== */

/* ── opening ───────────────────────────────────────────────────────────── */

.hrh { padding-block: clamp(56px, 7vw, 96px); }

.hrh__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.hrh__h1 {
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 14px 0 16px;
}

.hrh__lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
    max-width: 34em;
}

.hrh__cta { display: flex; flex-wrap: wrap; gap: var(--lp-3); margin-top: clamp(24px, 3vw, 34px); }

.hrh__below { margin-top: var(--lp-3); font-size: 14px; color: rgba(255, 255, 255, .6); }

/* The file that assembles itself. Four rows, and each one is a module. */
.hrf {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--lp-radius-card);
    padding: clamp(16px, 2vw, 22px);
    box-shadow: var(--bbx-shadow-lg);
}

.hrf__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }

.hrf__face {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
}

.hrf__who { display: grid; gap: 6px; flex: 1 1 auto; }
.hrf__name { display: block; height: 10px; width: 46%; border-radius: 999px; background: rgba(255, 255, 255, .5); }
.hrf__role { display: block; height: 8px;  width: 30%; border-radius: 999px; background: rgba(255, 255, 255, .22); }

.hrf__rows { display: grid; gap: 12px; padding-top: 14px; }

.hrf__row { display: flex; align-items: center; gap: 12px; }

.hrf__ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); }
.hrf__bar { flex: 1 1 auto; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.hrf__row--2 .hrf__bar { width: 76%; flex: 0 1 76%; }
.hrf__row--3 .hrf__bar { width: 62%; flex: 0 1 62%; }
.hrf__row--4 .hrf__bar { width: 84%; flex: 0 1 84%; }

.hrf__tag { flex: none; width: 44px; height: 18px; border-radius: 999px; background: rgba(0, 128, 246, .55); }
.hrf__row--3 .hrf__tag { background: rgba(255, 255, 255, .16); }

/* The motion: the rows arrive one after the other, in turn. Only with JS. */
.js .hrh__scene .hrf__row { opacity: 0; transform: translateY(8px); }

.js .hrh__scene.is-on .hrf__row {
    animation: hrf-in .5s cubic-bezier(.22, .61, .36, 1) forwards;
}

.js .hrh__scene.is-on .hrf__row--1 { animation-delay: .10s; }
.js .hrh__scene.is-on .hrf__row--2 { animation-delay: .55s; }
.js .hrh__scene.is-on .hrf__row--3 { animation-delay: 1.00s; }
.js .hrh__scene.is-on .hrf__row--4 { animation-delay: 1.45s; }

@keyframes hrf-in { to { opacity: 1; transform: none; } }

/* ── a person's round ──────────────────────────────────────────────────── */

.hrt__stops {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--lp-4);
    margin-top: clamp(8px, 2vw, 20px);
}

.hrt__stop { position: relative; }

/* The line is made of SEGMENTS, one per stop: from this number to the
   next. It used to be a single line laid over the container, from 10% to 90%,
   with the maths done on the centres of five equal columns — but the number is
   not at the centre of its column, it is on the left. Result: it started after
   the first circle and ran 80px past the last one, a line that connected
   nothing. A segment per stop has no centres to guess: it knows where its own
   circle is, and the last stop draws none. It works the same for the phone
   column, where the same maths was even further off.

   Two layers: the dim one always visible, the lit one that grows — so there
   is no jump between «not reached yet» and «reached». */
.hrt__stop::before,
.hrt__stop::after {
    content: "";
    position: absolute;
    /* From the EDGE of this circle to the edge of the next: 40px is the diameter,
       the gap is the grid's. */
    left: 40px;
    width: calc(100% + var(--lp-4) - 40px);
    top: 19px;
    height: 2px;
    border-radius: 2px;
}

.hrt__stop:last-child::before,
.hrt__stop:last-child::after { content: none; }

.hrt__stop::before { background: var(--lp-border); }
.hrt__stop::after  { background: var(--lp-accent); transform-origin: left center; }

.js .hrt__stop::after { transform: scaleX(0); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.js .hrt__stops.is-on .hrt__stop::after {
    transform: scaleX(1);
    transition-delay: calc(.12s * var(--i) + .3s);
}

.hrt__link { display: grid; gap: 8px; color: inherit; }
.hrt__link:hover .hrt__name { color: var(--lp-accent-press); }

.hrt__num {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: var(--lp-surface);
    border: 2px solid var(--lp-accent);
    color: var(--lp-accent-press);
    font-weight: 700;
    font-size: 15px;
}

.hrt__name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hrt__text { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); }

.js .hrt__stop { opacity: 0; transform: translateY(10px); }
.js .hrt__stops.is-on .hrt__stop {
    animation: hrt-in .5s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(.12s * var(--i));
}

@keyframes hrt-in { to { opacity: 1; transform: none; } }

.hrt__key {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--lp-border);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    max-width: 46em;
}

/* ── the modules ───────────────────────────────────────────────────────── */

.hrm__h2 { margin-bottom: clamp(28px, 4vw, 44px); }

.hrm__mod {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(36px, 5vw, 64px);
    border-top: 1px solid var(--lp-border);
}

.hrm__mod:first-of-type { border-top: 0; padding-top: 0; }

/* Alternating rows: the eye should not travel the same diagonal five
   times. `order` and not `direction`: the document order stays the one it
   is read in. */
.hrm__mod--flip .hrm__t { order: 2; }

.hrm__name { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; }
.hrm__claim { margin-top: 6px; font-size: 18px; color: var(--lp-accent-press); font-weight: 600; }
.hrm__p { margin-top: 14px; color: var(--lp-ink-soft); line-height: 1.6; }

.hrm__points { margin-top: 18px; display: grid; gap: 10px; }

.hrm__points li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.5;
}

.hrm__points li::before {
    content: "";
    position: absolute;
    left: 4px; top: .55em;
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--lp-accent);
}

.hrm__k {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--lp-accent-tint);
    border-radius: var(--lp-radius-card);
    font-size: 16px;
    line-height: 1.55;
}

.hrm__scene { min-width: 0; }

/* ── the scenes ────────────────────────────────────────────────────────── */

.hs {
    position: relative;
    background: var(--lp-page);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: clamp(18px, 2.4vw, 28px);
    box-shadow: var(--bbx-shadow-sm);
    display: grid;
    gap: 16px;
}

.hs__card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 12px;
}

.hs__row { display: flex; align-items: center; gap: 10px; }
.hs__row--head { padding-bottom: 10px; border-bottom: 1px solid var(--lp-border); }

.hs__title { font-size: 14px; font-weight: 600; flex: 1 1 auto; }

.hs__pill {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bbx-gray-100);
    color: var(--lp-ink-soft);
    font-size: 12px;
    font-weight: 600;
}

.hs__pill--ok { background: #e8f5e8; color: #117f4f; }

.hs__spark {
    flex: none;
    width: 18px; height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #8b5cf6, #6a45c4);
}

.hs__line { height: 9px; border-radius: 999px; background: var(--bbx-gray-150); flex: 1 1 auto; }
.hs__line--short { flex: 0 1 42%; }
.hs__line--mid   { flex: 0 1 66%; }

.hs__check {
    flex: none;
    width: 18px; height: 18px;
    border-radius: 999px;
    border: 2px solid var(--bbx-gray-200);
    position: relative;
}

.hs__check::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

/* Checked: the dot fills with green. In the resting state they all are,
   except the ones the text says are missing. */
.hs__req .hs__check,
.hs__step .hs__check { background: #117f4f; border-color: #117f4f; }

/* Not checked: the dot stays empty. The selector matches the one above
   (`.hs__req .hs__check`), or the missing requirement would show green like
   the others — and a scene that says the opposite of the text next to it is
   worse than no scene. */
.hs__req .hs__check--no,
.hs__step .hs__check--no { background: transparent; border-color: var(--bbx-gray-300); }
.hs__check--no::after { display: none; }

.hs__req, .hs__step { display: flex; align-items: center; gap: 10px; }

.hs__quote {
    font-size: 13px;
    color: var(--lp-ink-soft);
    font-style: italic;
    padding-left: 10px;
    border-left: 2px solid var(--lp-border);
}

.hs__page { font-style: normal; opacity: .7; }

/* recruiting · the pile of CVs */
.hs--rec .hs__stack { position: relative; height: 66px; }

.hs__cv {
    position: absolute;
    top: 0; left: 0;
    width: 58px; height: 66px;
    border-radius: 8px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    box-shadow: var(--bbx-shadow-sm);
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 0 10px;
}

.hs__cv--1 { left: 0;   z-index: 3; }
.hs__cv--2 { left: 34px; z-index: 2; transform: rotate(3deg); }
.hs__cv--3 { left: 68px; z-index: 1; transform: rotate(6deg); }

.hs__cvline { height: 5px; border-radius: 999px; background: var(--bbx-gray-150); }
.hs__cvline:nth-child(2) { width: 70%; }
.hs__cvline:nth-child(3) { width: 50%; }

.js .hs--rec .hs__cv { opacity: 0; }
.js .hs--rec.is-on .hs__cv { animation: hs-cv-in .45s cubic-bezier(.22,.61,.36,1) forwards; }
.js .hs--rec.is-on .hs__cv--3 { animation-delay: .05s; }
.js .hs--rec.is-on .hs__cv--2 { animation-delay: .2s; }
.js .hs--rec.is-on .hs__cv--1 { animation-delay: .35s; }

@keyframes hs-cv-in { from { opacity: 0; transform: translateY(-10px) rotate(0); } to { opacity: 1; } }

.js .hs--rec .hs__req { opacity: 0; transform: translateX(-6px); }
.js .hs--rec.is-on .hs__req { animation: hs-req-in .4s ease forwards; }
.js .hs--rec.is-on .hs__req--1 { animation-delay: .7s; }
.js .hs--rec.is-on .hs__req--2 { animation-delay: .95s; }
.js .hs--rec.is-on .hs__req--3 { animation-delay: 1.2s; }

@keyframes hs-req-in { to { opacity: 1; transform: none; } }

.js .hs--rec .hs__quote,
.js .hs--rec .hs__pill--ok { opacity: 0; }
.js .hs--rec.is-on .hs__quote { animation: hs-fade .5s ease 1.5s forwards; }
.js .hs--rec.is-on .hs__pill--ok { animation: hs-fade .5s ease 1.35s forwards; }

@keyframes hs-fade { to { opacity: 1; } }

/* onboarding · the steps that get checked and the data that flows */
.hs--onb .hs__flow { display: flex; justify-content: center; gap: 8px; }
.hs__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--lp-accent); opacity: .5; }

.js .hs--onb.is-on .hs__dot { animation: hs-dot 1.4s ease-in-out infinite; }
.js .hs--onb.is-on .hs__dot:nth-child(2) { animation-delay: .18s; }
.js .hs--onb.is-on .hs__dot:nth-child(3) { animation-delay: .36s; }

@keyframes hs-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }

.hs__mini {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 9px;
}

.hs__mini-t { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bbx-gray-400); }
.hs__mini-row { display: flex; align-items: center; gap: 10px; }
.hs__k { height: 7px; width: 28%; border-radius: 999px; background: var(--bbx-gray-150); }
.hs__v { height: 7px; flex: 1 1 auto; border-radius: 999px; background: var(--bbx-blue-100); }

.js .hs--onb .hs__step .hs__check { background: transparent; border-color: var(--bbx-gray-200); }
.js .hs--onb .hs__step .hs__check::after { opacity: 0; }

.js .hs--onb.is-on .hs__step .hs__check { animation: hs-tick .01s linear forwards; }
.js .hs--onb.is-on .hs__step .hs__check::after { animation: hs-fade .2s ease forwards; }

.js .hs--onb.is-on .hs__step--1 .hs__check, .js .hs--onb.is-on .hs__step--1 .hs__check::after { animation-delay: .2s; }
.js .hs--onb.is-on .hs__step--2 .hs__check, .js .hs--onb.is-on .hs__step--2 .hs__check::after { animation-delay: .5s; }
.js .hs--onb.is-on .hs__step--3 .hs__check, .js .hs--onb.is-on .hs__step--3 .hs__check::after { animation-delay: .8s; }
.js .hs--onb.is-on .hs__step--4 .hs__check, .js .hs--onb.is-on .hs__step--4 .hs__check::after { animation-delay: 1.1s; }
.js .hs--onb.is-on .hs__step--5 .hs__check, .js .hs--onb.is-on .hs__step--5 .hs__check::after { animation-delay: 1.4s; }

@keyframes hs-tick { to { background: #117f4f; border-color: #117f4f; } }

.js .hs--onb .hs__mini-row { opacity: 0; }
.js .hs--onb.is-on .hs__mini-row { animation: hs-fade .4s ease forwards; }
.js .hs--onb.is-on .hs__mini-row:nth-child(2) { animation-delay: 1.7s; }
.js .hs--onb.is-on .hs__mini-row:nth-child(3) { animation-delay: 1.85s; }
.js .hs--onb.is-on .hs__mini-row:nth-child(4) { animation-delay: 2s; }

/* training · three certificates on the timeline */
.hs--trn .hs__timeline { position: relative; height: 4px; border-radius: 2px; background: var(--bbx-gray-150); }

.hs__tl-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #117f4f 0%, #e0a820 62%, #cc2f2f 100%);
    transform-origin: left center;
}

.js .hs--trn .hs__tl-fill { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.22,.61,.36,1); }
.js .hs--trn.is-on .hs__tl-fill { transform: scaleX(1); }

.hs__certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.hs__cert {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 8px;
    justify-items: start;
}

.hs__cert-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--bbx-gray-150); }
.hs__cert-t  { width: 78%; height: 8px; border-radius: 999px; background: var(--bbx-gray-150); }
.hs__cert-s  { font-size: 12px; font-weight: 600; }

.hs__cert--ok   .hs__cert-ic { background: #d9efe3; } .hs__cert--ok   .hs__cert-s { color: #117f4f; }
.hs__cert--warn .hs__cert-ic { background: #fdf0d5; } .hs__cert--warn .hs__cert-s { color: #8a6206; }
.hs__cert--out  .hs__cert-ic { background: #fbe2e2; } .hs__cert--out  .hs__cert-s { color: #a32020; }

.hs__alert {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdf0d5;
    color: #8a6206;
    font-size: 13px;
    font-weight: 600;
}

.hs__alert-ic { flex: none; width: 16px; height: 16px; border-radius: 999px; background: #e0a820; }

.js .hs--trn .hs__cert { opacity: 0; transform: translateY(8px); }
.js .hs--trn.is-on .hs__cert { animation: hrt-in .45s ease forwards; }
.js .hs--trn.is-on .hs__cert--ok   { animation-delay: .35s; }
.js .hs--trn.is-on .hs__cert--warn { animation-delay: .75s; }
.js .hs--trn.is-on .hs__cert--out  { animation-delay: 1.15s; }

.js .hs--trn .hs__alert { opacity: 0; }
.js .hs--trn.is-on .hs__alert { animation: hs-fade .5s ease 1.5s forwards; }

/* reviews · two columns and the gap */
.hs--rev .hs__bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: end; }

/* The columns are tall in PIXELS, not in percent: the percentage was
   measured on a grid row as tall as its content — that is, on nothing —
   and the two bars did not show at all. */
.hs__bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 150px; }

.hs__bar-fill {
    display: block;
    border-radius: 10px 10px 4px 4px;
    background: var(--bbx-blue-200);
    height: 78px;
}

.hs__bar--mgr .hs__bar-fill { background: var(--lp-accent); height: 118px; }

.hs__bar-l { font-size: 12px; color: var(--lp-ink-soft); text-align: center; }

.js .hs--rev .hs__bar-fill { transform: scaleY(0); transform-origin: bottom center; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.js .hs--rev.is-on .hs__bar-fill { transform: scaleY(1); }
.js .hs--rev.is-on .hs__bar--mgr .hs__bar-fill { transition-delay: .25s; }

.hs__gap { position: relative; height: 22px; }

.hs__gap::before {
    content: "";
    position: absolute;
    left: 24%; right: 24%;
    top: 10px;
    height: 2px;
    border-top: 2px dashed var(--bbx-gray-300);
}

.hs__gap-l {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    background: var(--lp-page);
    padding: 0 8px;
    font-size: 12px;
    color: var(--lp-ink-soft);
}

.hs__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.hs__fact { display: flex; align-items: center; gap: 8px; }
.hs__fact-k { height: 7px; flex: 0 1 46%; border-radius: 999px; background: var(--bbx-gray-150); }
.hs__fact-v { height: 7px; flex: 0 1 28%; border-radius: 999px; background: var(--bbx-blue-100); }

/* org chart · the branches going down */
.hs--org .hs__org { width: 100%; height: auto; }

.hs__ln { fill: none; stroke: var(--bbx-gray-200); stroke-width: 2; }

.hs__nd rect { fill: var(--lp-surface); stroke: var(--lp-border); stroke-width: 1.5; }
.hs__nd-t { fill: var(--bbx-gray-200); stroke: none; }
.hs__nd--0 rect { fill: var(--bbx-blue-50); stroke: var(--bbx-blue-200); }

.hs__nd--empty rect { fill: none; stroke: var(--lp-accent); stroke-dasharray: 4 4; }
.hs__nd-plus { stroke: var(--lp-accent); stroke-width: 2; stroke-linecap: round; }

.js .hs--org .hs__ln { stroke-dasharray: 220; stroke-dashoffset: 220; }
.js .hs--org.is-on .hs__ln { animation: hs-draw .7s ease forwards; }
.js .hs--org.is-on .hs__ln--1 { animation-delay: .15s; }
.js .hs--org.is-on .hs__ln--2 { animation-delay: .25s; }
.js .hs--org.is-on .hs__ln--3 { animation-delay: .35s; }
.js .hs--org.is-on .hs__ln--4 { animation-delay: .6s; }
.js .hs--org.is-on .hs__ln--5 { animation-delay: .7s; }

@keyframes hs-draw { to { stroke-dashoffset: 0; } }

.js .hs--org .hs__nd { opacity: 0; }
.js .hs--org.is-on .hs__nd { animation: hs-fade .4s ease forwards; }
.js .hs--org.is-on .hs__nd--0 { animation-delay: .05s; }
.js .hs--org.is-on .hs__nd--1 { animation-delay: .45s; }
.js .hs--org.is-on .hs__nd--2 { animation-delay: .55s; }
.js .hs--org.is-on .hs__nd--3 { animation-delay: .65s; }
.js .hs--org.is-on .hs__nd--4 { animation-delay: .85s; }
.js .hs--org.is-on .hs__nd--5 { animation-delay: .95s; }

.hs__org-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lp-ink-soft); }
.hs__org-dot { width: 10px; height: 10px; border-radius: 3px; border: 2px dashed var(--lp-accent); }

/* ── the assistant ─────────────────────────────────────────────────────── */

.hra__head { max-width: 44em; }
.hra__lede { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .76); margin-top: 10px; }

.hra__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(28px, 4vw, 44px);
}

.hra__col {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--lp-radius-card);
    padding: clamp(18px, 2.4vw, 26px);
}

/* The «no» column is not a footnote: same weight, and the border marks it
   as the half that decides whether to trust. */
.hra__col--no { border-color: rgba(255, 255, 255, .26); }

.hra__ct { font-size: 18px; font-weight: 700; margin-bottom: 14px; }

.hra__list { display: grid; gap: 12px; }

.hra__list li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
}

.hra__ic {
    position: absolute;
    left: 0; top: .15em;
    width: 20px; height: 20px;
    border-radius: 999px;
}

.hra__ic--yes { background: rgba(17, 127, 79, .3); box-shadow: inset 0 0 0 1.5px rgba(93, 214, 158, .7); }
.hra__ic--no { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }

.hra__ic--yes::after {
    content: "";
    position: absolute;
    left: 7px; top: 4px;
    width: 5px; height: 9px;
    border: solid #a7ecc9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hra__ic--no::after {
    content: "";
    position: absolute;
    left: 4px; top: 9px;
    width: 12px; height: 2px;
    background: rgba(255, 255, 255, .7);
    border-radius: 2px;
}

.hra__k {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(20px, 2.6vw, 28px);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
    max-width: 52em;
}

/* ── people's data ─────────────────────────────────────────────────────── */

.hrp__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-4);
}

.hrp__card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: clamp(18px, 2.2vw, 24px);
}

.hrp__t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.hrp__p { font-size: 15px; line-height: 1.55; color: var(--lp-ink-soft); }

.hrp__k {
    margin-top: clamp(24px, 3vw, 36px);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    max-width: 48em;
}

/* ── the phone ─────────────────────────────────────────────────────────── */

@media (max-width: 980px) {

    .hrh__inner { grid-template-columns: minmax(0, 1fr); }
    .hrh__scene { order: 2; }

    .hrm__mod { grid-template-columns: minmax(0, 1fr); }
    .hrm__mod--flip .hrm__t { order: 0; }

    .hra__cols { grid-template-columns: minmax(0, 1fr); }
    .hrp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {

    /* The five stops do not fit in a row: they become a column, and the
       line turns from horizontal to vertical. */
    .hrt__stops { grid-template-columns: minmax(0, 1fr); gap: var(--lp-5); }

    .hrt__stop::before,
    .hrt__stop::after {
        left: 19px;
        width: 2px;
        /* In a column the segment runs from the bottom edge of this number to the
           top edge of the next: the column gap plus the text under the
           circle, that is everything left of the stop. */
        top: 40px;
        height: calc(100% + var(--lp-5) - 40px);
    }

    .js .hrt__stop::after { transform: scaleY(0); transform-origin: top center; }
    .js .hrt__stops.is-on .hrt__stop::after { transform: scaleY(1); }

    .hrt__link { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
    .hrt__num { grid-row: span 2; }

    .hrp__grid { grid-template-columns: minmax(0, 1fr); }
    .hs__certs { grid-template-columns: minmax(0, 1fr); }
}

/* Whoever asked for less motion does not get it: the scenes stay in their
   final state, which is already what they tell. */
@media (prefers-reduced-motion: reduce) {

    .js .hrh__scene .hrf__row,
    .js .hrt__stop,
    .js .hs--rec .hs__cv,
    .js .hs--rec .hs__req,
    .js .hs--rec .hs__quote,
    .js .hs--rec .hs__pill--ok,
    .js .hs--trn .hs__cert,
    .js .hs--trn .hs__alert,
    .js .hs--onb .hs__mini-row,
    .js .hs--org .hs__nd { opacity: 1; transform: none; animation: none; }

    .js .hrt__stop::after,
    .js .hs--trn .hs__tl-fill { transform: scaleX(1); }
    .js .hs--rev .hs__bar-fill { transform: scaleY(1); }
    .js .hs--org .hs__ln { stroke-dashoffset: 0; }
    .js .hs--onb .hs__step .hs__check { background: #117f4f; border-color: #117f4f; }
    .js .hs--onb .hs__step .hs__check::after { opacity: 1; }
}