/* hm-grid · home feature grids (#ai-agents dark, #passwordless light). Spec: asset.html header.
   Every micro-animation is a CSS loop that runs only while its section is in view (.is-in, asset.js); reduced motion = the still.
   Only transform and opacity animate. */
.hm-fg{--fg-ok:var(--ok-d,#8FD19E);--fg-hold:var(--hold-d,#F2B84B);--fg-no:var(--deny-d,#F47272);--fg-dn:#F47272;
  --fg-card:#161616;--fg-ring:rgba(255,255,255,.07);--fg-ink:#fff;--fg-60:rgba(255,255,255,.6);--fg-45:rgba(255,255,255,.45);--fg-ui:#1f1f21;--fg-uiring:rgba(255,255,255,.08)}
.hm-fg-light{--fg-ok:#1f8a4c;--fg-hold:#b7791f;--fg-no:#d93636;--fg-card:#f2f1ee;--fg-ring:rgba(0,0,0,.05);--fg-ink:#0a0a0a;--fg-60:rgba(0,0,0,.58);--fg-45:rgba(0,0,0,.45);--fg-ui:#fff;--fg-uiring:rgba(0,0,0,.08)}
.hm-fg :where(p,h3,ul,li){margin:0;padding:0;list-style:none}
.hm-fg svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* head: H2 + button left, one paragraph right (ElevenLabs' chapter head) */
.hm-fg-head{display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:80px;align-items:start}
.hm-fg-hl .h2{margin-top:16px}
.hm-fg-cta{margin-top:32px}
.hm-fg-lede{margin-top:46px!important;font-size:17px;line-height:27px;color:var(--fg-60)}

/* grid: two large over three small */
.hm-fg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:56px}
.hm-fg-card{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;background:var(--fg-card);box-shadow:inset 0 0 0 1px var(--fg-ring);color:var(--fg-ink)}
.hm-fg-lg{grid-column:span 3;height:460px}
.hm-fg-sm{grid-column:span 2;height:320px}
.hm-fg-art{position:absolute;left:0;right:0;top:0;bottom:92px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px}
.hm-fg-sm .hm-fg-art{bottom:84px}
.hm-fg-cap{position:absolute;left:28px;right:28px;bottom:24px}
.hm-fg-cap h3{font-size:15px;line-height:22px;font-weight:500;letter-spacing:0;color:var(--fg-45)}
.hm-fg-cap p{margin-top:2px;font-size:16px;line-height:24px;color:var(--fg-ink)}
.hm-fg-grain-blue .hm-fg-cap h3,.hm-fg-grain-blue .hm-fg-cap p{color:#fff}
.hm-fg-grain-blue .hm-fg-cap h3{color:rgba(255,255,255,.72)}
/* the grain cards: ElevenLabs' frosted light in each product's colour */
.hm-fg-grain-blue{background:
    linear-gradient(118deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 46%,rgba(255,255,255,.05) 62%,rgba(255,255,255,0) 76%),
    radial-gradient(70% 80% at 10% 0%,rgba(140,184,204,.7),rgba(140,184,204,0) 64%),
    radial-gradient(70% 90% at 40% 70%,rgba(34,86,226,.78),rgba(34,86,226,0) 68%),
    radial-gradient(50% 70% at 92% 30%,rgba(118,92,214,.45),rgba(118,92,214,0) 70%),
    linear-gradient(150deg,#22385c 0%,#10164a 55%,#0b0a14 100%);box-shadow:none}
.hm-fg-grain-pearl{background:
    linear-gradient(118deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.45) 34%,rgba(255,255,255,0) 48%,rgba(255,255,255,.3) 64%,rgba(255,255,255,0) 78%),
    radial-gradient(60% 80% at 8% 10%,rgba(236,200,178,.85),rgba(236,200,178,0) 64%),
    radial-gradient(60% 80% at 90% 20%,rgba(196,208,236,.9),rgba(196,208,236,0) 66%),
    radial-gradient(70% 80% at 60% 100%,rgba(214,200,236,.8),rgba(214,200,236,0) 66%),
    #ebe8e3;box-shadow:none}
.hm-fg-grain-blue::before,.hm-fg-grain-pearl::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/grain-tile.png) 0 0/128px 128px;opacity:.7;mix-blend-mode:overlay;pointer-events:none}
.hm-fg-grain-pearl::before{opacity:.9;mix-blend-mode:soft-light}

/* shared bits */
.hm-fg .fg-bot{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(10,60,176,.1);color:#0a3cb0}
.hm-fg .fg-bot svg{width:18px;height:18px;stroke-width:1.4}
.hm-fg .fg-bot .fl{fill:currentColor;stroke:none}
.hm-fg .fg-av{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8e6e1;color:#0a0a0a;font-style:normal;font-size:11px;font-weight:600}
.hm-fg .ok{color:var(--fg-ok)}.hm-fg .hold{color:var(--fg-hold)}.hm-fg .no{color:var(--fg-no)}
.hm-fg code{font-family:var(--mono,ui-monospace,monospace)}

/* A1 · identity card on the blue: one white card, the credential row re-issues every call */
.fa1{width:min(100%,360px);padding:6px 0;border-radius:14px;background:#fff;color:#0a0a0a;box-shadow:0 24px 60px -24px rgba(4,12,48,.6)}
.fa1-hd{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);font-size:14px;line-height:20px}
.fa1-hd b{font-weight:500}
.fa1-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(0,0,0,.55)}
.fa1-live i{width:6px;height:6px;border-radius:50%;background:#1f8a4c}
.fa1-r{display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:13px;line-height:20px}
.fa1-r+.fa1-r{box-shadow:inset 0 1px 0 rgba(0,0,0,.05)}
.fa1-r .k{flex:0 0 116px;color:rgba(0,0,0,.5)}
.fa1-r .v{display:flex;align-items:center;gap:8px;min-width:0}
.fa1 .fg-ok{display:inline-flex;align-items:center;gap:4px;color:#1f8a4c;font-size:12px}
.fa1 .fg-ok svg{width:13px;height:13px}
.fa1-cred{display:grid!important}
.fa1-cred>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fa1-cred i{width:6px;height:6px;border-radius:50%}
.fa1-cred .c1 i{background:#1f8a4c}.fa1-cred .c2{color:rgba(0,0,0,.45)}.fa1-cred .c2 i{background:rgba(0,0,0,.25)}
.fa1-cred .c2{opacity:0}
.hm-fg.is-in .fa1-cred .c1{animation:fg-swapA 4.8s ease-in-out infinite}
.hm-fg.is-in .fa1-cred .c2{animation:fg-swapB 4.8s ease-in-out infinite}
@keyframes fg-swapA{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes fg-swapB{0%,42%{opacity:0;transform:translateY(4px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}

/* A2 · the ceiling: an incoming call lands on the rule it matches (9 s, three calls) */
.fa2{width:min(100%,400px)}
.fa2-in{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--fg-ui);box-shadow:inset 0 0 0 1px var(--fg-uiring);font-size:13px;line-height:20px}
.fa2-in .k{color:var(--fg-45);white-space:nowrap}
.fa2-calls,.fa2-vs{display:grid}
.fa2-calls>*,.fa2-vs>*{grid-area:1/1;white-space:nowrap}
.fa2-calls code{font-size:12.5px;color:#fff}
.fa2-vs{margin-left:auto}
.fa2-vs b{font-weight:500;font-size:12.5px}
.fa2-h{margin:22px 0 8px 2px!important;font-size:12px;line-height:16px;letter-spacing:.02em;color:var(--fg-45)}
.fa2-rules li{position:relative;display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 14px;font-size:14px;line-height:20px;color:rgba(255,255,255,.85)}
.fa2-rules li+li{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.fa2-rules li b{font-weight:500;font-size:12.5px;opacity:.75}
.fa2-rules li::before{content:"";position:absolute;inset:2px 0;z-index:-1;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0}
.fa2 .x2,.fa2 .x3{opacity:0}
.fa2-rules .x2,.fa2-rules .x3{opacity:1}
.fa2-rules .x1::before{opacity:1}
.hm-fg.is-in .fa2-calls .x1,.hm-fg.is-in .fa2-vs .x1,.hm-fg.is-in .fa2-rules .x1::before{animation:fg-cyc3 9s infinite}
.hm-fg.is-in .fa2-calls .x2,.hm-fg.is-in .fa2-vs .x2,.hm-fg.is-in .fa2-rules .x2::before{animation:fg-cyc3 9s -6s infinite}
.hm-fg.is-in .fa2-calls .x3,.hm-fg.is-in .fa2-vs .x3,.hm-fg.is-in .fa2-rules .x3::before{animation:fg-cyc3 9s -3s infinite}
.hm-fg.is-in .fa2-vs b{animation-name:fg-cyc3v!important}
@keyframes fg-cyc3{0%{opacity:0;transform:translateY(5px)}3%,31%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:none}}
@keyframes fg-cyc3v{0%,8%{opacity:0;transform:translateX(-4px)}12%,31%{opacity:1;transform:none}33.3%,100%{opacity:0}}

/* A3 · an approval: the button presses, then "Approved by Alex" (6 s) */
.fa3{width:min(100%,280px);padding:16px;border-radius:14px;background:var(--fg-ui);box-shadow:inset 0 0 0 1px var(--fg-uiring)}
.fa3-q{font-size:14px;line-height:20px;color:#fff}
.fa3-f{margin-top:2px!important;font-size:12.5px;line-height:18px;color:var(--fg-45)}
.fa3-slot{display:grid;margin-top:14px}
.fa3-slot>*{grid-area:1/1}
.fa3-btns{display:flex;gap:6px}
.fa3-btns span{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:500;color:rgba(255,255,255,.85)}
.fa3-btns .ap{background:#fff;color:#0a0a0a}
.fa3-by{display:flex;align-items:center;gap:8px;height:30px;font-size:13.5px;color:rgba(255,255,255,.9);opacity:0}
.fa3-by svg{width:15px;height:15px;color:var(--fg-ok)}
.hm-fg.is-in .fa3-btns .ap{animation:fg-press 6s infinite}
.hm-fg.is-in .fa3-btns{animation:fg-out6 6s infinite}
.hm-fg.is-in .fa3-by{animation:fg-in6 6s infinite}
@keyframes fg-press{0%,34%{transform:none}37%{transform:scale(.94)}40%,100%{transform:none}}
@keyframes fg-out6{0%,40%{opacity:1}45%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes fg-in6{0%,44%{opacity:0;transform:translateY(4px)}50%,90%{opacity:1;transform:none}95%,100%{opacity:0}}

/* A4 · the record: attempts scroll past, forever (the list is doubled) */
.fa4{width:min(100%,320px);height:156px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.fa4-t li{display:flex;align-items:center;gap:10px;height:30px;font:12px/16px var(--mono,ui-monospace,monospace);color:rgba(255,255,255,.8);white-space:nowrap}
.fa4-t time{color:var(--fg-45)}
.fa4-t i{width:6px;height:6px;border-radius:50%;background:currentColor}
.fa4-t i.dn{color:var(--fg-dn)}
.hm-fg.is-in .fa4-t{animation:fg-tick 12s linear infinite}
@keyframes fg-tick{from{transform:none}to{transform:translateY(-180px)}}

/* A5 · stop an agent: the switch turns off, the status reads Stopped, then back (6 s) */
.fa5{display:flex;align-items:center;gap:12px;width:min(100%,290px);padding:14px 16px;border-radius:14px;background:var(--fg-ui);box-shadow:inset 0 0 0 1px var(--fg-uiring)}
.fa5 .fg-bot{background:rgba(125,185,255,.14);color:var(--blue-lt,#7DB9FF)}
.fa5-n{display:flex;flex-direction:column;min-width:0}
.fa5-n b{font-size:14px;line-height:20px;font-weight:500;color:#fff}
.fa5-st{display:grid;font-size:12.5px;line-height:18px}
.fa5-st>*{grid-area:1/1}
.fa5-st .on{color:var(--fg-ok)}.fa5-st .off{color:var(--fg-no);opacity:0}
.fa5-sw{position:relative;margin-left:auto;width:36px;height:22px;border-radius:999px;background:#2f8f4e;overflow:hidden}
.fa5-sw::before{content:"";position:absolute;inset:0;background:#4a4a4f;opacity:0}
.fa5-sw i{position:absolute;top:3px;left:17px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.hm-fg.is-in .fa5-sw i{animation:fg-knob 6s infinite}
.hm-fg.is-in .fa5-sw::before{animation:fg-in6s 6s infinite}
.hm-fg.is-in .fa5-st .on{animation:fg-out6s 6s infinite}
.hm-fg.is-in .fa5-st .off{animation:fg-in6s 6s infinite}
@keyframes fg-knob{0%,36%{transform:none}44%,86%{transform:translateX(-14px)}94%,100%{transform:none}}
@keyframes fg-in6s{0%,38%{opacity:0}46%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes fg-out6s{0%,38%{opacity:1}46%,86%{opacity:0}94%,100%{opacity:1}}

/* P1 · a key tries two sites: acme.example signs, the lookalike refuses (6 s) */
.fp1{position:relative;display:flex;flex-direction:column;gap:14px;width:min(100%,400px);padding-left:44px}
.fp1-u{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 10px 30px -14px rgba(40,30,60,.35);font-size:13.5px;line-height:20px;color:rgba(0,0,0,.72)}
.fp1-u .fp1-lk{width:14px;height:14px;color:rgba(0,0,0,.45)}
.fp1-u b{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.fp1-u b svg{width:13px;height:13px}
.fp1-u b .s{display:none}
.fp1-u b.ok{background:rgba(31,138,76,.1)}.fp1-u b.no{background:rgba(217,54,54,.09)}
.fp1-key{position:absolute;left:0;top:6px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0a0a0a;color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.fp1-key svg{width:15px;height:15px}
.hm-fg.is-in .fp1-key{animation:fg-key 6s cubic-bezier(.65,0,.35,1) infinite}
.hm-fg.is-in .fp1 .u1 b{animation:fg-v1 6s infinite}
.hm-fg.is-in .fp1 .u2 b{animation:fg-v2 6s infinite}
.hm-fg.is-in .fp1 .u2{animation:fg-shake 6s infinite}
@keyframes fg-key{0%,46%{transform:none}54%,94%{transform:translateY(58px)}100%{transform:none}}
@keyframes fg-v1{0%,8%{opacity:0;transform:scale(.9)}14%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fg-v2{0%,58%{opacity:0;transform:scale(.9)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fg-shake{0%,58%,70%,100%{transform:none}61%{transform:translateX(-4px)}64%{transform:translateX(4px)}67%{transform:translateX(-2px)}}

/* P2 · SDKs: each platform lights in turn, then the WordPress plugin (8.4 s) */
.fp2{width:min(100%,400px);padding:20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 20px 50px -30px rgba(0,0,0,.3)}
.fp2-h{font-size:14px;line-height:20px;font-weight:500}
.fp2-sdk{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px!important}
.fp2-sdk li{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);font-size:13px;color:rgba(0,0,0,.7)}
.fp2-sdk li::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#0a0a0a;opacity:0;z-index:-1}
.fp2-sdk li{isolation:isolate}
.fp2-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;margin-top:20px!important;border-radius:10px;background:#0a0a0a;color:#fff;font-size:14px;font-weight:500}
.fp2-btn svg{width:18px;height:18px}
.hm-fg.is-in .fp2-sdk li{animation:fg-sdk 8.4s infinite}
.hm-fg.is-in .fp2-sdk li::before{animation:fg-sdkb 8.4s infinite}
.fp2-sdk li:nth-child(2),.fp2-sdk li:nth-child(2)::before{animation-delay:1.2s!important}
.fp2-sdk li:nth-child(3),.fp2-sdk li:nth-child(3)::before{animation-delay:2.4s!important}
.fp2-sdk li:nth-child(4),.fp2-sdk li:nth-child(4)::before{animation-delay:3.6s!important}
.fp2-sdk li:nth-child(5),.fp2-sdk li:nth-child(5)::before{animation-delay:4.8s!important}
.fp2-sdk li:nth-child(6),.fp2-sdk li:nth-child(6)::before{animation-delay:6s!important}
.fp2-sdk li:nth-child(7),.fp2-sdk li:nth-child(7)::before{animation-delay:7.2s!important}
@keyframes fg-sdk{0%,2%{color:rgba(0,0,0,.7)}5%,13%{color:#fff}17%,100%{color:rgba(0,0,0,.7)}}
@keyframes fg-sdkb{0%,2%{opacity:0}5%,13%{opacity:1}17%,100%{opacity:0}}

/* P3 · device-bound: the key signs on the phone and stays; only a proof travels to the site, which turns Verified (6 s) */
.fp3{display:flex;align-items:center;width:min(100%,340px)}
.fp3-ph{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:74px;height:124px;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12),0 12px 28px -16px rgba(0,0,0,.25)}
.fp3-ph::before{content:"";position:absolute;top:8px;left:50%;width:18px;height:4px;margin-left:-9px;border-radius:2px;background:rgba(0,0,0,.1)}
.fp3-k{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#0a0a0a;color:#fff}
.fp3-k>svg{width:16px;height:16px}
.fp3-k::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px #0a0a0a;opacity:0}
.fp3-lk{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);color:#0a0a0a}
.fp3-lk svg{width:11px;height:11px;stroke-width:1.6}
.fp3-t{font-size:10.5px;line-height:14px;font-weight:500;color:rgba(0,0,0,.5);white-space:nowrap}
.fp3-tr{position:relative;flex:1;min-width:56px;height:24px;margin:0 10px;container-type:inline-size}
.fp3-pf{--fp3-run:100cqw}
.fp3-ln{position:absolute;left:0;right:0;top:11.5px;height:1px;background:rgba(0,0,0,.16)}
.fp3-pf{position:absolute;left:0;top:2px;height:20px;padding:0 8px;border-radius:999px;background:#0a0a0a;color:#fff;font:500 10.5px/20px var(--mono,ui-monospace,monospace);opacity:0}
.fp3-site{flex:none;display:flex;flex-direction:column;gap:4px;width:136px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 12px 28px -18px rgba(0,0,0,.25)}
.fp3-site .u{display:flex;align-items:center;gap:5px;font-size:12px;line-height:16px;color:#0a0a0a;white-space:nowrap}
.fp3-site .u svg{width:12px;height:12px;color:rgba(0,0,0,.45)}
.fp3-site .fp3-st{display:grid;font-size:11.5px;line-height:16px}
.fp3-site .fp3-st>*{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.fp3-site .w{color:rgba(0,0,0,.45);opacity:0}
.fp3-site .ok{color:#1f8a4c;font-weight:500}
.fp3-site .ok svg{width:12px;height:12px;stroke-width:1.9}
/* the still (and reduced motion) is the finished state: Verified, the key at home */
.hm-fg.is-in .fp3-k{animation:fg3-sign 6s infinite}
.hm-fg.is-in .fp3-k::after{animation:fg3-ping 6s infinite}
.hm-fg.is-in .fp3-pf{animation:fg3-go 6s cubic-bezier(.65,0,.35,1) infinite}
.hm-fg.is-in .fp3-site .w{animation:fg3-w 6s infinite}
.hm-fg.is-in .fp3-site .ok{animation:fg3-ok 6s infinite}
.hm-fg.is-in .fp3-site{animation:fg3-card 6s infinite}
@keyframes fg3-sign{0%,12%{transform:none}17%{transform:scale(1.08)}22%,100%{transform:none}}
@keyframes fg3-ping{0%,14%{opacity:0;transform:none}16%{opacity:.5;transform:none}30%,100%{opacity:0;transform:scale(1.7)}}
@keyframes fg3-go{0%,20%{opacity:0;transform:translateX(0)}24%{opacity:1;transform:translateX(0)}44%{opacity:1;transform:translateX(calc(var(--fp3-run,86px) - 100%))}48%,100%{opacity:0;transform:translateX(calc(var(--fp3-run,86px) - 100%))}}
@keyframes fg3-w{0%,44%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes fg3-ok{0%,46%{opacity:0;transform:translateY(3px)}52%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes fg3-card{0%,44%{transform:none}48%{transform:scale(1.03)}54%,100%{transform:none}}

/* P4 · SSO: two connections turn Active in turn (8 s) */
.fp4{display:flex;flex-direction:column;gap:8px;width:min(100%,320px)}
.fp4-r{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);font-size:13.5px;line-height:20px}
.fp4-r em{font-style:normal;font-size:11.5px;color:rgba(0,0,0,.45);padding:0 7px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.fp4-r b{margin-left:auto;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;font-size:12.5px;font-weight:500}
.fp4-r b i{grid-row:1;width:7px;height:7px;border-radius:50%;background:#1f8a4c}
.fp4-r b>span{grid-area:1/2;white-space:nowrap}
.fp4-r .c{color:rgba(0,0,0,.45);opacity:0}.fp4-r .a{color:#1f8a4c}
.hm-fg.is-in .fp4 .r1 .c{animation:fg-c1 8s infinite}.hm-fg.is-in .fp4 .r1 .a{animation:fg-a1 8s infinite}
.hm-fg.is-in .fp4 .r2 .c{animation:fg-c2 8s infinite}.hm-fg.is-in .fp4 .r2 .a{animation:fg-a2 8s infinite}
.hm-fg.is-in .fp4 .r1 b i{animation:fg-d1 8s infinite}.hm-fg.is-in .fp4 .r2 b i{animation:fg-d2 8s infinite}
@keyframes fg-c1{0%,4%{opacity:1}10%,100%{opacity:0}}
@keyframes fg-a1{0%,6%{opacity:0}12%,100%{opacity:1}}
@keyframes fg-c2{0%,20%{opacity:1}26%,100%{opacity:0}}
@keyframes fg-a2{0%,22%{opacity:0}28%,100%{opacity:1}}
@keyframes fg-d1{0%,6%{opacity:.3}12%,100%{opacity:1}}
@keyframes fg-d2{0%,22%{opacity:.3}28%,100%{opacity:1}}

/* P5 · the password field strikes through and becomes "Use your biometric" (6 s) */
.fp5{width:min(100%,280px)}
.fp5-l{font-size:12.5px;line-height:18px;color:rgba(0,0,0,.5)}
.fp5-f{display:grid;align-items:center;height:44px;margin-top:6px!important;padding:0 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.fp5-f>span{grid-area:1/1;white-space:nowrap}
.fp5-f .pw{position:relative;justify-self:start;font-size:16px;letter-spacing:.14em;color:rgba(0,0,0,.6);opacity:0}
.fp5-f .st{position:absolute;left:-2px;right:2px;top:50%;height:1.5px;background:#d93636;transform-origin:left;transform:scaleX(0)}
.fp5-f .bio{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.fp5-f .bio svg{width:18px;height:18px}
.fp5-x{margin-top:10px!important;font-size:12.5px;line-height:18px;color:rgba(0,0,0,.5)}
.fp5-x .fg{display:inline-block;opacity:0}
.hm-fg.is-in .fp5-f .pw{animation:fg-pw 6s infinite}
.hm-fg.is-in .fp5-f .st{animation:fg-st 6s infinite}
.hm-fg.is-in .fp5-f .bio{animation:fg-bio 6s infinite}
.hm-fg.is-in .fp5-x .fg{animation:fg-fg 6s infinite}
@keyframes fg-pw{0%,40%{opacity:1}48%,100%{opacity:0}}
@keyframes fg-st{0%,16%{transform:scaleX(0)}30%,44%{transform:scaleX(1)}48%,100%{transform:scaleX(1)}}
@keyframes fg-bio{0%,46%{opacity:0;transform:translateY(4px)}54%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fg-fg{0%,36%{opacity:1}46%,100%{opacity:0}}

/* paused out of view; reduced motion: the stills (base rules) */
.hm-fg:not(.is-in) *,.hm-fg:not(.is-in) *::before{animation-play-state:paused!important}

@media (max-width:1100px){
  .hm-fg-head{grid-template-columns:minmax(0,1fr) 360px;column-gap:48px}
  .hm-fg-lg{height:420px}
}
@media (max-width:900px){
  .hm-fg-head{grid-template-columns:minmax(0,1fr)}
  .hm-fg-lede{margin-top:20px!important;max-width:560px}
  .hm-fg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hm-fg-lg{grid-column:span 2}
  .hm-fg-sm{grid-column:span 1}
  .hm-fg-sm:last-child{grid-column:span 2}
}
@media (max-width:620px){
  .hm-fg-grid{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .hm-fg-lg,.hm-fg-sm,.hm-fg-sm:last-child{grid-column:auto}
  .hm-fg-lg{height:400px}
  .hm-fg-sm{height:300px}
  .hm-fg-cap{left:22px;right:22px;bottom:20px}
  .fa1-r .k{flex-basis:84px}
  .hm-fg-art{padding:16px}
  .fa1-hd{padding:10px 12px}
  .fa1-r{padding:9px 12px;font-size:12.5px;gap:10px}
  .fp1{padding-left:38px}
  .fp1-key{width:28px;height:28px;top:8px}
  .fp1-u{font-size:12.5px;padding:0 6px 0 12px;gap:6px}
  .fp1-u .fp1-lk{display:none}
  .fp1-u b{padding:0 8px}
  .fp1-u b .l{display:none}.fp1-u b .s{display:inline}
  .fp3-site{width:120px;padding:9px 10px}
  .fp3-ph{width:66px;height:112px}
}
@media (prefers-reduced-motion:reduce){ .hm-fg *,.hm-fg *::before{animation:none!important} }