/* C20 (klara, Nov 4, LOCAL ONLY): home after the Morin call. Flags: c19-home.json "c20" (body classes below). Brand: navy #0A1630, teal #0E7490 / AA tint #139EC4, cyan #22D3EE only on the main CTA on dark. No purple, gold or yellow. --c20-edge-blue: 'On edge' light blue (Morin), on navy #0A1630 (swap here). */ :root{--c20-navy:#0A1630;--c20-teal:#0E7490;--c20-tint:#139EC4;--c20-edge-blue:#7DD3FC;--c20-ink:#0A1630;--c20-ink2:#41566B;--c20-line:#D6E3EA;--c20-soft:#F3F8FA} /* ---- hero: subline (OPEN-2) + Built-for chips above the buttons (Morin's live order) ---- */ .c19q .al-hero__copy>p.c20-subline{order:3;margin:0 0 22px!important;color:#DCE6EF!important;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.45} .c20-no-subline .al-hero__copy>p.c20-subline{display:none} .c20-chips-above.c19q .al-hero__copy>.c19-chips--hero{order:4;margin:4px 0 22px} .c20-chips-above.c19q .al-hero__copy>.wp-block-buttons{order:5} .c20-chips-above .c19-chips--hero{margin-top:0} /* ---- K7 hero visual: changing generated faces + detection box ---- */ .c19q .c19q-globe.c20-faces{display:flex;align-items:center;justify-content:center;margin-right:0;width:min(520px,40vw)} .c20-faces .c20-faces__frame{position:relative;width:78%;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#071022;box-shadow:0 0 0 1px rgba(19,158,196,.35),0 30px 80px rgba(0,0,0,.45),0 0 90px rgba(19,158,196,.18)} .c20-faces .c20-faces__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;filter:saturate(.85)} .c20-faces .c20-faces__img--1{opacity:1;object-position:40% 30%} .c20-faces .c20-faces__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(19,158,196,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(19,158,196,.10) 1px,transparent 1px);background-size:28px 28px;mix-blend-mode:screen} .c20-faces .c20-faces__scan{position:absolute;left:0;right:0;top:12%;height:18%;background:linear-gradient(180deg,rgba(19,158,196,0),rgba(19,158,196,.22) 80%,rgba(230,246,250,.75));opacity:.8} .c20-faces .c20-faces__box{position:absolute;left:24%;top:18%;width:52%;height:46%;overflow:visible} .c20-faces .c20-faces__box path{fill:none;stroke:#E6F6FA;stroke-width:2.2;vector-effect:non-scaling-stroke} .c20-faces .c20-faces__pin{position:absolute;left:74%;top:16%;width:10px;height:10px;border-radius:50%;background:var(--c20-tint);box-shadow:0 0 0 4px rgba(19,158,196,.25)} .c20-faces .c20-faces__bar{position:absolute;height:6px;border-radius:3px;background:rgba(19,158,196,.55)} .c20-faces .c20-faces__bar--a{left:11%;bottom:4%;width:30%} .c20-faces .c20-faces__bar--b{left:11%;bottom:0;width:18%;opacity:.6} @media (prefers-reduced-motion:no-preference){ .c20-faces .c20-faces__img{animation:c20Face 12s infinite} .c20-faces .c20-faces__img--2{animation-delay:4s} .c20-faces .c20-faces__img--3{animation-delay:8s} .c20-faces .c20-faces__img--1{opacity:0;animation-delay:0s} .c20-faces .c20-faces__scan{animation:c20FScan 4s ease-in-out infinite} .c20-faces .c20-faces__box{animation:c20FBox 4s ease-in-out infinite} } @keyframes c20Face{0%{opacity:0}6%,33%{opacity:1}40%,100%{opacity:0}} @keyframes c20FScan{0%{top:6%}50%{top:72%}100%{top:6%}} @keyframes c20FBox{0%,30%{transform:scale(1.08);opacity:.4}45%,90%{transform:scale(1);opacity:1}100%{opacity:.4;transform:scale(1.08)}} @media (max-width:900px){ .c19q .al-hero--c19q .c19q-globe.c20-faces{position:relative;top:auto;right:auto;width:min(78vw,340px);opacity:1;margin:8px auto 0;-webkit-mask-image:none;mask-image:none;order:9} .c19q .al-hero--c19q .al-hero__grid{display:flex;flex-direction:column} } /* wireframe option ('face') */ /* C20 face visual (assets/img/c20-face.svg) */ .c20-face .c20-face__svg{width:100%;height:100%;display:block;overflow:visible} .c20-face .f-grid path{fill:none;stroke:#139EC4;stroke-opacity:.07;stroke-width:1} .c20-face .f-bg circle,.c20-face .f-bg path{fill:none;stroke:#139EC4;stroke-opacity:.35;stroke-width:1.4} .c20-face .f-head{fill:#0E7490;fill-opacity:.10;stroke:#139EC4;stroke-opacity:.9;stroke-width:1.6} .c20-face .f-mesh path{fill:none;stroke:#139EC4;stroke-opacity:.42;stroke-width:.9} .c20-face .f-dots circle{fill:#9FDCEB} .c20-face .f-feat path,.c20-face .f-feat circle{fill:none;stroke:#E6F6FA;stroke-opacity:.85;stroke-width:1.6} .c20-face .f-box{fill:none;stroke:#E6F6FA;stroke-width:3;stroke-linecap:square} .c20-face .f-box2{fill:none;stroke:#139EC4;stroke-opacity:.7;stroke-width:2;stroke-dasharray:4 4} .c20-face .f-box3{fill:none;stroke:#139EC4;stroke-width:2} .c20-face .f-tick path{stroke:#139EC4;stroke-opacity:.6;stroke-width:3} .c20-face .f-tick circle{fill:#139EC4} .c20-face .f-scan{opacity:.9} @media (prefers-reduced-motion:no-preference){ .c20-face .f-scan{animation:c20Scan 5.5s ease-in-out infinite} .c20-face .f-box3{animation:c20Blink 5.5s ease-in-out infinite} .c20-face .f-tick circle{animation:c20Blink 2.2s ease-in-out infinite} } @keyframes c20Scan{0%{transform:translateY(0)}50%{transform:translateY(400px)}100%{transform:translateY(0)}} @keyframes c20Blink{0%,100%{opacity:1}50%{opacity:.35}} /* ---- K1 'Our solutions' strip on white (scoped to section.c19s-pattern, C19s-edit r2 untouched) ---- */ .c20-sol-white section.c19s-pattern{background:#FFFFFF;color:var(--c20-ink);border-top:0;border-bottom:1px solid var(--c20-line)} .c20-sol-white .c19s-pattern h2.c19s-label{color:var(--c20-teal)} .c20-sol-white .c19s-pattern .c19s-card{background-color:#FFFFFF;border-color:var(--c20-line);color:var(--c20-ink);box-shadow:0 1px 2px rgba(10,22,48,.05)} .c20-sol-white .c19s-pattern .c19s-card::before{background-color:#E6F3F7;border-color:rgba(14,116,144,.35)} .c20-sol-white .c19s-pattern h3.c19s-title{color:var(--c20-ink)} .c20-sol-white .c19s-pattern p.c19s-line{color:var(--c20-ink2)} .c20-sol-white .c19s-pattern .c19s-card:hover,.c20-sol-white .c19s-pattern .c19s-card:focus-within{background-color:#F6FBFC;border-color:var(--c20-teal);box-shadow:0 10px 24px rgba(10,22,48,.10)} .c20-sol-white .c19s-pattern .c19s-title a:focus-visible::after{outline-color:var(--c20-teal)} /* ---- K2 Trust Layer on white ---- */ .c20-tl-white .alx-trust{background:#FFFFFF!important;color:var(--c20-ink);--ail-text-on-dark:var(--c20-ink);--ail-border-dark:var(--c20-line);--ail-border-dark-strong:#B9CED8;--ail-primary-on-dark:var(--c20-teal);--ail-accent-on-dark:var(--c20-teal);--ail-surface-dark:#F3F8FA;--ail-surface-dark-2:#FFFFFF} .c20-tl-white .alx-trust .tl-head h2,.c20-tl-white .alx-trust .tl-colhead h3{color:var(--c20-ink)} .c20-tl-white .alx-trust .tl-sub,.c20-tl-white .alx-trust .tl-line,.c20-tl-white .alx-trust .tl-lbl{color:var(--c20-ink2)!important} .c20-tl-white .alx-trust .tl-card{background:var(--c20-soft);border-color:var(--c20-line);box-shadow:none} .c20-tl-white .alx-trust .tl-card--key{background:linear-gradient(180deg,#E3F2F6,#F1F8FA);border-color:rgba(14,116,144,.45);box-shadow:none} .c20-tl-white .alx-trust .tl-card--key .tl-ico{stroke:var(--c20-teal)} .c20-tl-white .alx-trust .tl-num{color:var(--c20-ink)} .c20-tl-white .alx-trust .tl-note{color:var(--c20-ink2);border-top-color:var(--c20-line)} .c20-tl-white .alx-trust .tl-cta{background:var(--c20-teal);color:#fff} .c20-tl-white .alx-trust .tl-link2,.c20-tl-white .alx-trust .tl-more{color:var(--c20-teal)} .c20-tl-white .alx-trust .tl15-fill{fill:var(--c20-teal)} .c20-tl-white .alx-trust .tl15-seam{stroke:#B9CED8} /* ---- Trust Layer numbers on one line per row (v1 item 6, number fix) ---- */ .c20-tl-align .alx-trust .tl-card{justify-content:flex-start!important} .c20-tl-align .alx-trust .tl-card:not(.tl-card--wide) .tl-stat{margin-top:auto} .c20-tl-align .alx-trust .tl-card:not(.tl-card--wide) .tl-stat{margin-top:0} .c20-tl-align .alx-trust .tl-cards{align-items:stretch} .c20-tl-align .alx-trust .tl-num{display:block;min-height:1em} .c20-tl-align .alx-trust .tl-note{margin-top:10px} /* ---- Trust Layer centre: circle that opens to both columns ---- */ .alx-trust .c20-tlc{display:flex;flex-direction:column;align-items:center;align-self:start;min-width:0} .alx-trust .c20-tlc__stage{position:relative;width:100%;aspect-ratio:1} .alx-trust .c20-tlc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .alx-trust .c20-tlc__arc{fill:none;stroke:var(--c20-tint);stroke-width:2.5;stroke-linecap:round} .alx-trust .c20-tlc__br{fill:none;stroke:var(--c20-tint);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0} .alx-trust .c20-tlc__node{fill:var(--c20-tint)} .alx-trust .c20-tlc__lens{position:absolute;left:22%;top:22%;width:56%;height:56%;margin:0} .alx-trust .c20-tlc__lens .tl15-lens{width:100%;height:100%} .c20-tl-white .alx-trust .c20-tlc__arc,.c20-tl-white .alx-trust .c20-tlc__br{stroke:var(--c20-teal)} .c20-tl-white .alx-trust .c20-tlc__node{fill:var(--c20-teal)} @media (prefers-reduced-motion:no-preference){ .alx-trust .c20-tlc__arc--top{animation:c20ArcT 1.1s .3s cubic-bezier(.3,.7,.2,1) both} .alx-trust .c20-tlc__arc--bot{animation:c20ArcB 1.1s .3s cubic-bezier(.3,.7,.2,1) both} .alx-trust .c20-tlc__br{animation:c20Br .9s 1.1s ease-out both} .alx-trust .c20-tlc__node{animation:c20Node .4s 1s ease-out both} } @keyframes c20ArcT{from{transform:translateY(14px)}to{transform:none}} @keyframes c20ArcB{from{transform:translateY(-14px)}to{transform:none}} @keyframes c20Br{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes c20Node{from{opacity:0}to{opacity:1}} .alx-trust .c20-tlc__arc{transform-box:fill-box;transform-origin:center} @media (max-width:860px){ .alx-trust .c20-tlc{order:-1;align-self:center;width:min(170px,46vw);margin-inline:auto;justify-self:center} .alx-trust .c20-tlc__br{display:none} } /* ---- K3 deployment: dark section, white tiles, 'Lightweight' big + 'On edge' light blue ---- */ .c20-deploy-dark section.c20-deploy{background:var(--c20-navy)!important;color:#EEF6F9} .c20-deploy-dark section.c20-deploy .al-head h2{color:#FFFFFF} .c20-deploy-dark section.c20-deploy .al-eyebrow{color:var(--c20-tint)!important} .c20-deploy-dark section.c20-deploy .al-lead{font:650 clamp(28px,3vw,40px)/1.1 "Schibsted Grotesk",Inter,sans-serif;color:#FFFFFF!important;margin:6px 0 0;letter-spacing:-.01em} .c20-deploy-dark section.c20-deploy .c20-edge-sub{margin:4px 0 0;font:600 clamp(18px,1.6vw,22px)/1.3 Inter,sans-serif;color:var(--c20-edge-blue)} .c20-deploy-dark section.c20-deploy .al-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .c20-deploy-dark section.c20-deploy .al-card{background:#FFFFFF!important;border:1px solid #FFFFFF;border-radius:14px;color:var(--c20-ink);box-shadow:none;min-height:0;padding:22px 24px} .c20-deploy-dark section.c20-deploy .al-card h3{color:var(--c20-ink);margin:0;font-size:clamp(22px,2vw,28px)} .c20-deploy-dark section.c20-deploy .al-card p{color:var(--c20-ink2);margin:8px 0 0} .c20-deploy-dark section.c20-deploy .al-card--wide,.c20-deploy-dark section.c20-deploy .al-card:first-child{grid-column:auto} .c20-deploy-dark section.c20-deploy .wp-block-button.al-btn-primary .wp-block-button__link{background:#22D3EE;color:#0B1724} @media (max-width:700px){.c20-deploy-dark section.c20-deploy .al-cards{grid-template-columns:1fr}} /* ---- K4 attack squares: eyebrow + 6-tile grid (centre spans 2 rows) ---- */ .alx-db--attack .c20-at-eyebrow{margin:0 0 14px;font:600 13px/1.2 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c20-teal)} .alx-db--attack.c20-at-n6 .db-attack .db-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .alx-db--attack.c20-at-n6 .db-center{grid-row:span 2} @media (max-width:900px){.alx-db--attack.c20-at-n6 .db-attack .db-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alx-db--attack.c20-at-n6 .db-center{grid-row:auto}} /* ---- K5 Try header (title only) ---- */ .alx-demo h2.c20-try-h{margin-bottom:22px} /* ---- OPEN-n pill ---- */ .al-verify.c20-open{font-size:11px;vertical-align:middle} /* C20qa1 N2: the two Trust Layer columns share row heights (desktop), so row-2 numbers (75ms / 50ms) sit on one line */ @media (min-width:861px){ .c20-tl-align .alx-trust .tl-cards{grid-auto-rows:minmax(var(--c20-tl-row,216px),auto)} .c20-tl-align .alx-trust .tl-card{min-height:var(--c20-tl-row,216px);box-sizing:border-box} /* the row-style seal card (icon left of the number): top-align and push the number down by the icon block the column cards have (--c20-tl-icoff) */ .c20-tl-align .alx-trust .tl-col--seal .tl-card:not(.tl-card--key){align-items:flex-start!important} .c20-tl-align .alx-trust .tl-col--seal .tl-card:not(.tl-card--key) > *{margin-top:var(--c20-tl-icoff,37px)} } /* C20qa1 N1: square labels wrap (no clip, no ellipsis, no nowrap) */ .alx-db--attack .db-tlabel{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;overflow-wrap:break-word!important;hyphens:auto;-webkit-hyphens:auto} @media (max-width:480px){body .alx-db--attack.c20-at-n6 .db-attack .db-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}body .alx-db--attack .db-attack .db-tile .db-tlabel{overflow-wrap:break-word!important;hyphens:manual!important;word-break:normal}} /* C20qa1 N3: team photo frame. Round top, straight bottom edge (teal line); the cut-out's straight bottom ends exactly on it. No blur, no face edits. Flag c20.flags.team_frame */ body.c20-team-frame .al-team .al-team-r12__pic{border-radius:999px 999px 10px 10px;border-bottom:3px solid var(--c20-teal,#0E7490);box-sizing:border-box;background:#F1F7F9} body.c20-team-frame .al-team img.al-team-r12__img,body.c20-team-frame #team .al-team img.al-avatar.al-team-r12__img{border-radius:0;object-position:50% 100%;transform:none!important;margin:0!important} /* ---- C20 v3 D19 hero visual: vertical phone-footage frame + Sealed / Verified overlay (c19q.hero_visual = 'phone') ---- */ .c19q .c19q-globe.c20-phone{display:flex;align-items:center;justify-content:center;margin-right:0;width:min(400px,30vw)} .c20-phone .c20-phone__body{position:relative;width:100%;max-width:300px;aspect-ratio:9/18.6;border-radius:42px;padding:10px;background:linear-gradient(160deg,#1A2A44,#0A1630 60%);box-shadow:0 0 0 1px rgba(19,158,196,.35),0 30px 80px rgba(0,0,0,.5),0 0 90px rgba(19,158,196,.16)} .c20-phone .c20-phone__screen{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#071022} .c20-phone .c20-phone__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%} .c20-phone .c20-phone__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,48,.55),rgba(10,22,48,0) 22%,rgba(10,22,48,0) 60%,rgba(10,22,48,.75))} .c20-phone .c20-phone__notch{position:absolute;top:18px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#050B18} .c20-phone .c20-phone__top{position:absolute;top:44px;left:16px;right:16px;display:flex;justify-content:space-between;font:600 11px/1 Inter,sans-serif;letter-spacing:.06em;color:#E6F6FA} .c20-phone .c20-phone__rec{display:inline-flex;align-items:center;gap:6px} .c20-phone .c20-phone__rec i{width:8px;height:8px;border-radius:50%;background:#E6F6FA;box-shadow:0 0 0 3px rgba(230,246,250,.25)} .c20-phone .c20-phone__brackets{position:absolute;left:10%;top:33%;width:80%;height:27%;overflow:visible} .c20-phone .c20-phone__brackets path{fill:none;stroke:#E6F6FA;stroke-width:2.2;vector-effect:non-scaling-stroke} /* v3 19-A: the old scan ended in a near-white stop (the bright band at ~y185-205). Now a soft teal tint, no white, no hard edge. */ .c20-phone .c20-phone__scan{position:absolute;left:10%;right:10%;top:33%;height:27%;background:linear-gradient(180deg,rgba(19,158,196,0),rgba(19,158,196,.10) 60%,rgba(19,158,196,.16) 88%,rgba(19,158,196,0) 100%);background-size:100% 40%;background-repeat:no-repeat;opacity:.8} .c20-phone .c20-phone__badges{position:absolute;left:14px;right:14px;bottom:20px;display:flex;flex-direction:column;gap:8px} .c20-phone .c20-phone__badge{display:grid;grid-template-columns:26px 1fr;column-gap:10px;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(10,22,48,.82);box-shadow:0 0 0 1px rgba(19,158,196,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .c20-phone .c20-phone__badge svg{grid-row:1/3;width:26px;height:26px} .c20-phone .c20-phone__badge b{font:700 14px/1.15 Inter,sans-serif;color:#fff} .c20-phone .c20-phone__badge small{font:500 11px/1.2 Inter,sans-serif;color:#B9D7E2} .c20-phone .c20-phone__badge small:empty{display:none} .c20-phone .c20-phone__badge--sealed svg path{fill:#0E7490;stroke:#139EC4;stroke-width:1.4} .c20-phone .c20-phone__badge--verified svg circle{fill:#139EC4;stroke:none} .c20-phone .c20-phone__badge svg .k{fill:none!important;stroke:#fff!important;stroke-width:2.2!important;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion:no-preference){ .c20-phone .c20-phone__scan{animation:c20PScan 3.2s ease-in-out infinite} .c20-phone .c20-phone__rec i{animation:c20PRec 1.6s steps(2,end) infinite} .c20-phone .c20-phone__badge{animation:c20PBadge 9s ease-in-out infinite both} .c20-phone .c20-phone__badge--verified{animation-delay:1.2s} } @keyframes c20PScan{0%{background-position:0 -40%}100%{background-position:0 140%}} @keyframes c20PRec{50%{opacity:.25}} @keyframes c20PBadge{0%,8%{opacity:0;transform:translateY(8px)}16%,88%{opacity:1;transform:none}100%{opacity:0}} @media (max-width:900px){ .c19q .al-hero--c19q .c19q-globe.c20-phone{position:relative;top:auto;right:auto;width:min(64vw,260px);opacity:1;margin:8px auto 0;-webkit-mask-image:none;mask-image:none;order:9} } /* ---- C20 v3 D17 / ab_17 team block (live-site photos; crop/frame only) ---- */ .c20-teamsec .c20-team{display:grid;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:36px;margin:28px auto 22px} .c20-team .c20-tm{margin:0;text-align:center} .c20-team .c20-tm__ph{position:relative;overflow:hidden;background:#E6F0F4} .c20-team .c20-tm__ph img{display:block;width:100%;height:100%;object-fit:cover;margin:0} .c20-team figcaption{display:flex;flex-direction:column;gap:6px;padding-top:16px} .c20-team .c20-tm__name{font:600 19px/1.25 var(--ail-font-head,Inter),sans-serif;color:#0A1630} .c20-team .c20-tm__role{font:700 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0E7490} .c20-team .c20-tm__line{font:400 14px/1.45 Inter,sans-serif;color:#C9DCE5} /* A: arch-frame portraits. Round top, straight bottom edge with a teal line; the photo's crop ends on that edge */ .c20-team--a .c20-tm__ph{aspect-ratio:4/5;border-radius:999px 999px 18px 18px;border-bottom:4px solid #0E7490;box-shadow:0 0 0 1px #D5E3EA,0 18px 40px rgba(10,22,48,.10)} .c20-team--a .c20-tm__ph img{object-position:50% 18%} /* B: one wide navy band, the two photos in a row (same plant backdrop), name / role / one line under each */ .c20-teamsec--b .c20-team{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px;gap:24px;padding:24px;border-radius:26px;background:#0A1630;box-shadow:0 24px 60px rgba(10,22,48,.18)} .c20-team--b .c20-tm{text-align:left} .c20-team--b .c20-tm__ph{aspect-ratio:3/2;border-radius:16px} .c20-team--b .c20-tm__ph img{object-position:50% 30%} .c20-team--b figcaption{padding:16px 4px 4px} .c20-team--b .c20-tm__name{color:#fff} .c20-team--b .c20-tm__role{color:#7DD3FC} /* C20.13b+C20.20: Dor circle portraits — cyan ring+arc + Is it real? + beams + pixel zoom; mouth RECT focus. Navy band. */ .c20-teamsec--c{background:#0A1630;padding:56px 24px 64px;border-radius:0} .c20-teamsec--c > .al-head{text-align:center} .c20-teamsec--c > .al-head .al-eyebrow{color:#139EC4} .c20-teamsec--c > .al-head .wp-block-heading,.c20-teamsec--c > .al-head h2{color:#fff} .c20-teamsec .c20-team--c{grid-template-columns:repeat(2,minmax(0,360px));gap:48px 40px;margin:36px auto 8px;justify-content:center} .c20-tm--dor{text-align:center} .c20-tm--dor .c20-tm__stage{ --ph:220px; --zoom:126px; position:relative;width:calc(var(--ph) + 28px + var(--zoom));max-width:100%; height:var(--ph);margin:0 auto; } .c20-team--c .c20-tm__ph{ position:absolute;left:0;top:0;width:var(--ph);height:var(--ph);max-width:none; aspect-ratio:1;border-radius:50%;overflow:visible;background:transparent;border:0;box-shadow:none;margin:0; } .c20-team--c .c20-tm__ph picture{ display:block;width:100%;height:100%;border-radius:50%;overflow:hidden; box-shadow:0 0 0 2px #B6E8F5;background:#12304A;position:relative;z-index:1; } .c20-team--c .c20-tm__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%} .c20-team--c .c20-tm__ph::before{ content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;z-index:2; background:conic-gradient(from 195deg,#139EC4 0deg,#139EC4 110deg,transparent 110deg,transparent 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px)); } .c20-team--c .c20-ph-pill{display:none} .c20-tm--dor .c20-tm__ask{ position:absolute;left:62%;top:2%;z-index:5;transform:translateY(-100%); font:600 15px/1.15 Inter,system-ui,sans-serif;color:#fff;white-space:nowrap;pointer-events:none; text-shadow:0 1px 10px rgba(10,22,48,.65); } .c20-tm--dor .c20-tm__focus{ position:absolute;z-index:4;pointer-events:none; width:15%;height:6%;transform:translate(-50%,-50%); /* C20.20 Dor mouth rect */ border:1.5px solid #139EC4;border-radius:1px;box-shadow:0 0 0 1px rgba(10,22,48,.4); background:transparent; } .c20-tm--dor .c20-tm__beams{ position:absolute;z-index:3;pointer-events:none;overflow:visible; /* C20.20: start beams at right edge of mouth rect (half of 15% width) */ left:calc(var(--fx, .56) * var(--ph) + 0.075 * var(--ph)); top:calc(var(--fy, .4) * var(--ph)); width:calc(var(--ph) + 28px + var(--zoom) - var(--fx, .56) * var(--ph) - 0.075 * var(--ph)); height:var(--zoom); transform:translate(0, -50%); } .c20-tm--dor .c20-tm__beams line{stroke:#139EC4;stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke} .c20-tm--dor .c20-tm__zoom{ position:absolute;right:0;top:50%;transform:translateY(-50%); width:var(--zoom);height:var(--zoom);border:2px solid #139EC4;border-radius:2px; overflow:hidden;background:#0A1630;box-shadow:0 10px 28px rgba(0,0,0,.4);z-index:4; } .c20-tm--dor .c20-tm__zoom img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%;image-rendering:pixelated} /* C20.20: bias mosaic toward mouth region */ .c20-team--c figcaption{padding-top:20px} .c20-team--c .c20-tm__name{color:#fff} .c20-team--c .c20-tm__role{color:#139EC4} @media (max-width:720px){ .c20-teamsec .c20-team--c{grid-template-columns:1fr;gap:40px;max-width:300px} .c20-tm--dor .c20-tm__stage{--ph:160px;--zoom:96px} .c20-tm--dor .c20-tm__ask{font-size:12px;left:58%} .c20-teamsec--c{padding:40px 16px 48px} } @media (max-width:700px){ .c20-teamsec .c20-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .c20-team .c20-tm__name{font-size:15px} .c20-teamsec--b .c20-team{grid-template-columns:1fr;padding:14px;border-radius:18px} } /* ---- C20 v3 ab_19 B: split media frame (Sealed · Original | Edited · Change found) ---- */ .c19q .c19q-globe.c20-split{display:flex;align-items:center;justify-content:center;margin-right:0;width:min(500px,38vw)} .c20-split .c20-split__frame{position:relative;width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#071022;box-shadow:0 0 0 1px rgba(19,158,196,.35),0 30px 80px rgba(0,0,0,.5),0 0 90px rgba(19,158,196,.16)} .c20-split .c20-split__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .c20-split .c20-split__img--orig{clip-path:inset(0 50% 0 0)} .c20-split .c20-split__img--edit{clip-path:inset(0 0 0 50%)} .c20-split .c20-split__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,48,.55),rgba(10,22,48,0) 24%)} .c20-split .c20-split__seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#E6F6FA;box-shadow:0 0 12px rgba(19,158,196,.6)} .c20-split .c20-split__seam i{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#0A1630;box-shadow:0 0 0 2px #E6F6FA} .c20-split .c20-split__seam i::before,.c20-split .c20-split__seam i::after{content:"";position:absolute;top:10px;border:5px solid transparent} .c20-split .c20-split__seam i::before{left:3px;border-right-color:#E6F6FA} .c20-split .c20-split__seam i::after{right:3px;border-left-color:#E6F6FA} .c20-split .c20-split__lab{position:absolute;top:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font:700 12.5px/1 Inter,sans-serif;color:#fff;background:rgba(10,22,48,.86);box-shadow:0 0 0 1px rgba(19,158,196,.5)} .c20-split .c20-split__lab svg{width:16px;height:16px} .c20-split .c20-split__lab--l{left:14px} .c20-split .c20-split__lab--l svg circle{fill:#139EC4} .c20-split .c20-split__lab--l svg path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .c20-split .c20-split__lab--r{right:14px;box-shadow:0 0 0 1px #7DD3FC} .c20-split .c20-split__lab--r svg path{fill:none;stroke:#7DD3FC;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .c20-split .c20-split__box{position:absolute;border:2px solid #7DD3FC;border-radius:6px;box-shadow:0 0 0 3px rgba(125,211,252,.25),0 0 18px rgba(125,211,252,.5)} .c20-split .c20-split__box b{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:6px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.04em;color:#0A1630;background:#7DD3FC} .c20-split .c20-split__box b:empty{display:none} @media (prefers-reduced-motion:no-preference){.c20-split .c20-split__box{animation:c20SBox 2.4s ease-in-out infinite}} @keyframes c20SBox{50%{box-shadow:0 0 0 6px rgba(125,211,252,.12),0 0 26px rgba(125,211,252,.7)}} @media (max-width:900px){.c19q .al-hero--c19q .c19q-globe.c20-split{position:relative;top:auto;right:auto;width:min(86vw,380px);opacity:1;margin:8px auto 0;-webkit-mask-image:none;mask-image:none;order:9}} @media (max-width:520px){.c20-split .c20-split__lab{top:auto;font-size:11px;padding:6px 9px}.c20-split .c20-split__lab--l{top:12px;left:10px}.c20-split .c20-split__lab--r{bottom:12px;right:10px}} /* ===== C20 v3 full build (klara, Nov 4) ===== */ /* Hero (Dor): H1 -> lead -> two buttons side by side -> Built-for chips under. Free Register = design-system secondary outline. */ body.c20 .al-hero .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} body.c20 .al-hero .wp-block-button .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box} /* the hero is navy: secondary outline on dark = light text + light border (cyan stays the one main CTA) */ .al-hero .al-btn-ghost .wp-block-button__link{background:transparent!important;color:#EEF6F9!important;border:1.5px solid rgba(238,246,249,.7)!important;box-shadow:none!important} .al-hero .al-btn-ghost .wp-block-button__link:hover{border-color:var(--c20-edge-blue)!important;color:#fff!important;background:rgba(125,211,252,.08)!important} .al-hero .al-btn-ghost .wp-block-button__link:focus-visible{outline:2px solid var(--c20-edge-blue);outline-offset:3px} body.c20 .al-hero .c19-chips--hero{margin-top:22px} @media (max-width:480px){ body.c20 .al-hero .wp-block-buttons,.al-hero .al-hero__copy .wp-block-buttons{flex-direction:row!important;flex-wrap:nowrap!important;gap:10px} body.c20 .al-hero .wp-block-buttons .wp-block-button{flex:1 1 0;min-width:0} body.c20 .al-hero .wp-block-buttons .wp-block-button__link{width:100%;padding-inline:12px;white-space:nowrap} body.c20 .al-hero .c19-chip{min-height:44px;display:inline-flex;align-items:center} } /* ab_06 'On edge' light blue. On navy: #7DD3FC text (10.76:1). On white/light: pill #BAE6FD + navy text (13.52:1). */ .c20-edge--dark{color:var(--c20-edge-blue)!important} .c20-edge--light{display:inline-block;background:#BAE6FD;color:#0A1630!important;border-radius:999px;padding:.04em .55em;line-height:1.35} .al-dark .c20-edge--light,.c20-dk .c20-edge--light{background:transparent;color:var(--c20-edge-blue)!important;padding:0} /* D5 deployment: equal-height tiles at every width (comment nodes of dropped tiles leave no gap) */ .c20-deploy-dark section.c20-deploy .al-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:16px} .c20-deploy-dark section.c20-deploy .al-cards>.al-card{height:100%;margin:0!important;box-sizing:border-box} @media (max-width:760px){.c20-deploy-dark section.c20-deploy .al-cards{grid-template-columns:minmax(0,1fr)}} /* D16d demo video PLACEHOLDER (review only) */ .c20-demo{margin:28px auto 36px;max-width:880px} .c20-demo__frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#13365a 0%,#0A1630 62%);border:1px solid rgba(125,211,252,.25);display:flex;align-items:center;justify-content:center} .c20-demo__label{position:absolute;left:14px;top:14px;font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;color:#0A1630;background:#BAE6FD;border-radius:999px;padding:6px 10px} .c20-demo__lens{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.18} .c20-demo__lens .tl-halfsvg{position:absolute;width:38%;height:auto} .c20-demo__lens .tl-halfsvg path{fill:#7DD3FC} .c20-demo__play{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.35)} .c20-demo__play svg{width:30px;height:30px;margin-left:4px;fill:#0A1630} .c20-demo__cap{margin-top:12px;text-align:center;font:600 15px/1.4 Inter,sans-serif;color:inherit} @media (max-width:480px){.c20-demo__play{width:56px;height:56px}.c20-demo__play svg{width:22px;height:22px}} /* review-only bits, hidden in ?clean=1 */ html.al-clean .c20-demo,html.al-clean .c20-review-note,html.al-clean .c20-ph-pill{display:none!important} .c20-review-note{margin:0 0 14px} /* team photo-match pill (A, B, about-us) */ .c20-tm__ph{position:relative} .c20-ph-pill{position:absolute;left:10px;bottom:12px;z-index:2;line-height:1} /* '@api-key' card = one link */ a.c20-cardlink{display:block;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s} a.c20-cardlink:hover{border-color:var(--c20-edge-blue)!important;transform:translateY(-2px)} a.c20-cardlink:focus-visible{outline:2px solid var(--c20-edge-blue);outline-offset:3px} a.c20-cardlink h3::after{content:" \2197";font-weight:400} /* ab_13 B: OSINT tile title links to /osint/ (whole tile clickable) */ .ail-usecase{position:relative} .c20-uc-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} .c20-uc-link::after{content:"";position:absolute;inset:0} .c20-uc-link:focus-visible{outline:2px solid var(--c20-teal);outline-offset:3px} /* C20.7 Trust Layer: logo-only → rotate → halves open into Detection L | SourceSeal R. Classes on .alx-trust: c20-tl-arm (logo only) → c20-tl-spin (rotate) → c20-tl-go (open+reveal). Default / reduced-motion / no-JS = final open end state. */ .alx-trust .c20-tlsplit{justify-content:flex-start} .alx-trust .c20-tlsplit .tl15-lens{overflow:visible} .alx-trust .c20-tlsplit .tl15-fig{transform-origin:50% 50%;will-change:transform,filter} /* end state (open) */ .alx-trust .c20-tlsplit .tl15-side--detect{transform:translate(-170px,0)} .alx-trust .c20-tlsplit .tl15-side--seal{transform:translate(170px,0)} .alx-trust .c20-tlsplit .tl15-side--detect .tl15-up{transform:translate(29.7px,-29.7px)} .alx-trust .c20-tlsplit .tl15-side--detect .tl15-lo{transform:translate(-29.7px,29.7px)} .alx-trust .tl-col--detect,.alx-trust .tl-col--seal{will-change:transform,opacity} /* neutralize C16 if it still fires */ .alx-trust.c20-tl-arm .tl15-side--detect .tl15-up, .alx-trust.c20-tl-arm .tl15-side--detect .tl15-lo, .alx-trust.c20-tl-go .tl15-side--detect .tl15-up, .alx-trust.c20-tl-go .tl15-side--detect .tl15-lo{/* C20.7 owns transforms via rules below */} /* ARM: logo only — halves closed, columns fully hidden */ .alx-trust.c20-tl-arm:not(.c20-tl-go) .c20-tlsplit .tl15-side, .alx-trust.c20-tl-arm:not(.c20-tl-go) .c20-tlsplit .tl15-up, .alx-trust.c20-tl-arm:not(.c20-tl-go) .c20-tlsplit .tl15-lo{transform:none} .alx-trust.c20-tl-arm:not(.c20-tl-go) .c20-tlsplit .tl15-side--detect .tl15-fill{fill:var(--ail-accent-on-dark,#22D3EE)} .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--detect, .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--seal{opacity:0!important;visibility:hidden;pointer-events:none;transform:none} .alx-trust.c20-tl-arm:not(.c20-tl-spin):not(.c20-tl-go) .c20-tlsplit .tl15-fig{ transform:scale(1.12); filter:drop-shadow(0 0 20px color-mix(in srgb,var(--ail-accent-on-dark,#22D3EE) 60%,transparent)) drop-shadow(0 0 42px color-mix(in srgb,var(--ail-accent-on-dark,#22D3EE) 32%,transparent)) } /* SPIN beat: clear rotate while still logo-only */ @keyframes c20TlSpin{ 0%{transform:scale(1.12) rotate(0deg)} 55%{transform:scale(1.08) rotate(110deg)} 100%{transform:scale(1.05) rotate(180deg)} } .alx-trust.c20-tl-arm.c20-tl-spin:not(.c20-tl-go) .c20-tlsplit .tl15-fig{ animation:c20TlSpin .8s cubic-bezier(.25,.7,.2,1) forwards; filter:drop-shadow(0 0 22px color-mix(in srgb,var(--ail-accent-on-dark,#22D3EE) 65%,transparent)) drop-shadow(0 0 48px color-mix(in srgb,var(--ail-accent-on-dark,#22D3EE) 35%,transparent)) } /* GO: halves open + columns reveal; fig finishes upright (180→360) */ .alx-trust.c20-tl-go .c20-tlsplit .tl15-side, .alx-trust.c20-tl-go .c20-tlsplit .tl15-up, .alx-trust.c20-tl-go .c20-tlsplit .tl15-lo{transition:transform 1.15s cubic-bezier(.2,.75,.15,1)} .alx-trust.c20-tl-go .c20-tlsplit .tl15-fill{transition:fill 1.15s cubic-bezier(.2,.75,.15,1)} @keyframes c20TlSettle{ from{transform:scale(1.05) rotate(180deg);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ail-accent-on-dark,#22D3EE) 40%,transparent))} to{transform:scale(1) rotate(360deg);filter:drop-shadow(0 0 0 transparent)} } .alx-trust.c20-tl-go .c20-tlsplit .tl15-fig{ animation:c20TlSettle 1.15s cubic-bezier(.2,.75,.15,1) forwards; filter:drop-shadow(0 0 0 transparent) } .alx-trust.c20-tl-go .tl-col--detect, .alx-trust.c20-tl-go .tl-col--seal{ opacity:1!important;visibility:visible;pointer-events:auto;transform:none; transition:opacity 1.0s cubic-bezier(.2,.75,.15,1) .12s,transform 1.1s cubic-bezier(.2,.75,.15,1) .12s,visibility 0s linear 0s } @media (min-width:861px){ .alx-trust.c20-tl-arm.c20-tl-go .tl-col--detect{transform:none} .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--detect{transform:translateX(40px)} .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--seal{transform:translateX(-40px)} } @media (max-width:860px){ .alx-trust .c20-tlsplit .tl15-side--detect{transform:translate(-72px,0)} .alx-trust .c20-tlsplit .tl15-side--seal{transform:translate(72px,0)} } /* C20.7 On-prem stack: Air gapped & cloud = same primary weight as On-prem */ .alx-trust .tl-card--text .tl-lbl:not(:empty){ font:600 clamp(22px,2.0vw,28px)/1.15 "Schibsted Grotesk",Inter,sans-serif; letter-spacing:-.02em; color:var(--ail-text-on-dark); margin-top:8px } @media (max-width:1100px) and (min-width:861px){ .alx-trust .tl-card--text .tl-lbl:not(:empty){font-size:clamp(18px,2.1vw,24px)} } @media (prefers-reduced-motion:reduce){ .alx-trust .c20-tlsplit *,.alx-trust .tl-col--detect,.alx-trust .tl-col--seal{transition:none!important;animation:none!important;filter:none!important} .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--detect, .alx-trust.c20-tl-arm:not(.c20-tl-go) .tl-col--seal{opacity:1!important;visibility:visible;transform:none} } /* why-ai-light hero (.al-pagehero, navy): same two-button row + secondary outline as home */ .al-pagehero .wp-block-buttons{display:flex;flex-direction:row!important;flex-wrap:wrap;gap:12px} .al-pagehero .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box} .al-pagehero .al-btn-ghost .wp-block-button__link{background:transparent!important;color:#EEF6F9!important;border:1.5px solid rgba(238,246,249,.7)!important;box-shadow:none!important} .al-pagehero .al-btn-ghost .wp-block-button__link:hover{border-color:var(--c20-edge-blue)!important;background:rgba(125,211,252,.08)!important} .al-pagehero .al-btn-ghost .wp-block-button__link:focus-visible{outline:2px solid var(--c20-edge-blue);outline-offset:3px} @media (max-width:480px){.al-pagehero .wp-block-buttons{flex-wrap:nowrap!important;gap:10px}.al-pagehero .wp-block-buttons .wp-block-button{flex:1 1 0;min-width:0}.al-pagehero .wp-block-buttons .wp-block-button__link{width:100%;padding-inline:12px;white-space:nowrap}} .c20-ph-pill .al-verify{background:#fff!important;box-shadow:0 1px 4px rgba(10,22,48,.25)} body.c20 .al-hero .c19-chips--hero{max-width:100%;flex-wrap:wrap;min-width:0}body.c20 .al-hero .c19-chips--hero .c19-chips__list{flex-wrap:wrap;min-width:0} /* v3: chips wrap inside the copy column (never under the hero visual) */ /* 19-A v3b: abstract security-camera-style feed (4:3), not a phone */ .c20-cam{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:560px;margin-inline:auto} .c20-cam__feed{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid rgba(125,211,252,.28);box-shadow:0 24px 60px rgba(0,0,0,.45);background:#0A1630} .c20-cam__img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)} .c20-cam__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,48,.25),rgba(10,22,48,0) 40%,rgba(10,22,48,.55))} .c20-cam__corners{position:absolute;inset:0;width:100%;height:100%} .c20-cam__corners path{fill:none;stroke:rgba(238,246,249,.75);stroke-width:2;vector-effect:non-scaling-stroke} .c20-cam__scan{position:absolute;left:0;right:0;top:38%;height:2px;background:linear-gradient(90deg,rgba(125,211,252,0),rgba(125,211,252,.55) 20%,rgba(125,211,252,.55) 80%,rgba(125,211,252,0));box-shadow:0 0 14px rgba(125,211,252,.35)} .c20-cam__box{position:absolute;left:68.5%;top:26%;width:11%;height:12%;border:1.5px solid #7DD3FC;border-radius:3px;box-shadow:0 0 0 1px rgba(10,22,48,.35),0 0 18px rgba(125,211,252,.3)} .c20-cam__box i{position:absolute;inset:0;background:rgba(125,211,252,.10)} .c20-cam__badge{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(10,22,48,.82);border:1px solid rgba(125,211,252,.35);color:#EEF6F9;font:600 14px/1 Inter,sans-serif} .c20-cam__badge svg{width:18px;height:18px;fill:none;stroke:#7DD3FC;stroke-width:1.8} .c20-cam__badge svg .k{stroke:#EEF6F9} @keyframes c20CamScan{0%{top:12%}50%{top:86%}100%{top:12%}} @media (prefers-reduced-motion:no-preference){.c20-cam__scan{animation:c20CamScan 6s ease-in-out infinite}} @media (max-width:860px){.c20-cam{max-width:100%;margin-top:28px}.c20-cam__badge{left:10px;bottom:10px;font-size:13px}} .al-hero .c19q-globe.c20-cam{opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important;z-index:1!important;order:99!important;top:auto!important;right:auto!important;position:relative!important;inset:auto!important;margin:0!important;translate:none!important;transform:none!important;width:100%!important;max-width:520px!important;height:auto!important;align-self:center;justify-self:end;aspect-ratio:auto!important} @media (min-width:861px){body.c20-visual-cam .al-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}} .c20-cam__badge{left:50%!important;transform:translateX(-50%);bottom:14px!important} @media (max-width:860px){.al-hero .c19q-globe.c20-cam{margin-top:28px!important}} /* C20 R1 B2: sections whose ido hide_rule says "hide in the clean view" (build_blocks al-clean-hide), e.g. about #fast-facts */ html.al-clean .al-clean-hide{display:none!important} /* C20 R1 N4: Try legend printed once; tablist wrapper is layout-neutral; legend never clipped */ .alx .alx-tablist{display:contents} .alx p.tabmark{margin:0 0 0 auto;min-width:0;max-width:100%} .alx .tabmark-l{white-space:normal;overflow:visible;text-overflow:clip} @media (max-width:600px){.alx p.tabmark{margin-left:0}} /* C20 R1 N1: Attack Vectors H2 gets inner padding inside its dashed box (desktop) */ @media (min-width:901px){ .alx-db--attack .db-center{padding:28px 24px!important;box-sizing:border-box} .alx-db--attack .db-center .db-head1{font-size:clamp(24px,2.05vw,30px);line-height:1.12;overflow-wrap:break-word;max-width:100%} } .c20-cam__img{filter:none!important} /* C20-final bad-header: book-a-demo only (page-id-10). Adds 16px on top of html scroll-padding-top (header height + 16px) so the form top and fields land clear of the sticky header on scroll/focus/anchor jumps. */ body.page-id-10 form.al-form,body.page-id-10 form.al-form label,body.page-id-10 form.al-form :is(input,select,textarea){scroll-margin-top:16px} /* C20.2/C20.24 hero-rotate: gallery slide (~0.55s). Frame 1 = c20-rot-face.webp (real person) + Morin RED rounded mouth box + white lip mesh. KYC dropped. */ .c19q .c19q-globe.c20-rot{flex-direction:column;align-items:stretch;gap:14px} .c20-rot .c20-rot__slide{position:absolute;inset:0;transform:translateX(100%);opacity:0;visibility:hidden;transition:transform .55s ease,opacity .55s ease,visibility 0s linear .55s;z-index:0} .c20-rot .c20-rot__slide.is-on{transform:translateX(0);opacity:1;visibility:visible;transition:transform .55s ease,opacity .55s ease,visibility 0s;z-index:2} .c20-rot .c20-rot__slide.is-exit{transform:translateX(-100%);opacity:1;visibility:visible;transition:transform .55s ease,opacity .55s ease,visibility 0s linear .55s;z-index:1} .c20-rot .c20-rot__slide.is-park{transition:none!important;transform:translateX(100%);opacity:0;visibility:hidden;z-index:0} @media (prefers-reduced-motion:reduce){.c20-rot .c20-rot__slide,.c20-rot .c20-rot__slide.is-on,.c20-rot .c20-rot__slide.is-exit{transition:none}} .c20-rot .c20-rot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .c20-rot .c20-rot__img--face{object-position:52% 40%} /* C20.24 CISO still 10 (glasses) */ .c20-rot .c20-rot__rmouth{position:absolute;z-index:3;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;pointer-events:none} /* C20.24 Morin TV-ref: single red rounded SVG mouth box nose→chin + dense white lip/jaw/philtrum mesh; no filled glow border */ .c20-rot .c20-rot__lipmesh{position:absolute;inset:-1.2% -0.8%;width:101.6%;height:102.4%;display:block;overflow:visible} .c20-rot .c20-rot__flag b{display:none} .c20-rot .c20-rot__cam{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none} .c20-rot .c20-rot__cam .c20-cam__img{height:100%} .c20-rot .c20-rot__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px} .c20-rot .c20-rot__chips{position:relative;flex:1;min-width:0;min-height:34px} .c20-rot .c20-rot__chip{position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 13px;border-radius:999px;font:500 13.5px/1.25 Inter,sans-serif;color:#E6F6FA;background:rgba(10,22,48,.86);box-shadow:0 0 0 1px rgba(19,158,196,.5);opacity:0;transition:opacity .55s ease} .c20-rot .c20-rot__chip.is-on{opacity:1} .c20-rot .c20-rot__chip b{font-weight:700;color:#7DD3FC;white-space:nowrap} .c20-rot .c20-rot__dots{display:flex;gap:6px;flex:none} .c20-rot .c20-rot__dots i{width:7px;height:7px;border-radius:50%;background:rgba(230,246,250,.28);transition:background .4s,transform .4s} .c20-rot .c20-rot__dots i.is-on{background:#139EC4;transform:scale(1.25)} @media (max-width:520px){.c20-rot .c20-rot__chip{font-size:12.5px;padding:7px 11px}.c20-rot .c20-rot__chips{min-height:48px}} .c20-rot .c20-rot__cam picture{position:absolute;inset:0;display:block}.c20-rot .c20-rot__cam .c20-cam__img{width:100%;height:100%;object-fit:cover} /* C20 hero-rotate r2 (maya): visible pause/play (WCAG 2.2.2) in the bar under the frame; never over the image or the CTAs. */ .c20-rot .c20-rot__bar{position:relative;z-index:6;pointer-events:auto} .c20-rot .c20-rot__ctl{display:flex;align-items:center;gap:12px;flex:none} .c20-rot .c20-rot__pp{display:inline-flex;align-items:center;gap:6px;min-height:32px;min-width:32px;padding:6px 11px;border:0;border-radius:999px;cursor:pointer;font:600 12px/1 Inter,sans-serif;color:#E6F6FA;background:rgba(10,22,48,.86);box-shadow:0 0 0 1px rgba(19,158,196,.5)} .c20-rot .c20-rot__pp:hover{box-shadow:0 0 0 1px #139EC4;background:#0E2A44} .c20-rot .c20-rot__pp:focus-visible{outline:2px solid #7DD3FC;outline-offset:2px} .c20-rot .c20-rot__pp svg{width:12px;height:12px;fill:#7DD3FC} .c20-rot .c20-rot__ppi--play{display:none} .c20-rot .c20-rot__pp.is-paused .c20-rot__ppi--play{display:block} .c20-rot .c20-rot__pp.is-paused .c20-rot__ppi--pause{display:none} .c20-rot .c20-rot__pp[hidden]{display:none} @media (max-width:520px){.c20-rot .c20-rot__ppt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.c20-rot .c20-rot__pp{padding:0;justify-content:center;width:36px;height:36px}.c20-rot .c20-rot__ctl{gap:8px}} /* C20.3 SourceSeal hero: static 3-panel Watermarked|Original|Difference in 19-B square shell. Yellow labels; pink payload. No rotate chrome. */ .c19q .c19q-globe.c20-seal{flex-direction:column;align-items:stretch;gap:12px} .c20-seal .c20-seal__frame{padding:12px;background:radial-gradient(120% 90% at 50% 0%,#13365a 0%,#071022 55%,#050d18 100%);box-sizing:border-box} .c20-seal .c20-seal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:100%;align-items:stretch} .c20-seal .c20-seal__panel{margin:0;min-width:0;height:100%} .c20-seal .c20-seal__pic{position:relative;height:100%;border-radius:12px;overflow:hidden;background:#050d18;box-shadow:0 0 0 1px rgba(125,211,252,.18),0 12px 28px rgba(0,0,0,.35)} .c20-seal .c20-seal__pic picture,.c20-seal .c20-seal__img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 28%} .c20-seal .c20-seal__lab{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:2;margin:0;pointer-events:none} .c20-seal .c20-seal__lab > span{display:inline-block;padding:5px 11px;border-radius:999px;font:700 11px/1.1 Inter,sans-serif;letter-spacing:.02em;color:#0A1630;background:#F5C542;box-shadow:0 2px 8px rgba(0,0,0,.35)} .c20-seal .c20-seal__payload{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;width:max-content;max-width:92%;pointer-events:none} .c20-seal .c20-seal__arrow{width:16px;height:10px;fill:#E879A9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))} .c20-seal .c20-seal__payload-txt{display:inline-block;padding:7px 10px;border-radius:8px;font:700 10.5px/1.2 Inter,sans-serif;letter-spacing:.01em;color:#fff;background:#E879A9;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(232,121,169,.4);text-align:center;white-space:normal} .c20-seal .c20-seal__chip{display:flex;justify-content:flex-start} .c20-seal .c20-seal__chip span{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;font:500 13.5px/1.25 Inter,sans-serif;color:#E6F6FA;background:rgba(10,22,48,.86);box-shadow:0 0 0 1px rgba(19,158,196,.5)} @media (max-width:720px){ .c20-seal .c20-seal__frame{padding:10px} .c20-seal .c20-seal__grid{gap:6px} .c20-seal .c20-seal__lab > span{padding:4px 8px;font-size:10px} .c20-seal .c20-seal__payload{bottom:8px} .c20-seal .c20-seal__payload-txt{font-size:9.5px;padding:6px 8px} .c20-seal .c20-seal__chip span{font-size:12.5px;padding:7px 11px} } @media (max-width:420px){ .c20-seal .c20-seal__lab > span{padding:3px 6px;font-size:8.5px} .c20-seal .c20-seal__payload-txt{font-size:8.5px;padding:5px 6px;border-radius:6px} .c20-seal .c20-seal__frame{padding:8px} .c20-seal .c20-seal__grid{gap:4px} .c20-seal .c20-seal__arrow{width:12px;height:8px} } /* C20.4: Source Seal as one rotate frame (fills 19-B square; chip from rotate bar) */ .c20-rot .c20-rot__slide--seal{padding:12px;box-sizing:border-box;background:radial-gradient(120% 90% at 50% 0%,#13365a 0%,#071022 55%,#050d18 100%)} .c20-rot .c20-rot__seal{height:100%;display:flex;flex-direction:column;min-height:0} .c20-rot .c20-rot__seal .c20-seal__grid{flex:1;min-height:0;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch} .c20-rot .c20-rot__seal .c20-seal__panel,.c20-rot .c20-rot__seal .c20-seal__pic{height:100%;min-height:0} .c20-rot .c20-seal__img[src*="seal-diff"],.c20-rot .c20-seal__panel--diff img{image-rendering:auto} /* C20.7 residual Diff — not mosaic */ @media (max-width:720px){ .c20-rot .c20-rot__slide--seal{padding:8px} .c20-rot .c20-rot__seal .c20-seal__grid{gap:4px} .c20-rot .c20-rot__seal .c20-seal__lab > span{padding:3px 6px;font-size:8.5px} .c20-rot .c20-rot__seal .c20-seal__payload{bottom:6px;max-width:96%} .c20-rot .c20-rot__seal .c20-seal__payload-txt{font-size:8px;padding:4px 5px;line-height:1.15;white-space:normal} .c20-rot .c20-rot__seal .c20-seal__arrow{width:11px;height:7px} } /* C20.4b: K7 changing-faces as one rotate frame (fills 19-B square) */ .c20-rot .c20-rot__slide--faces{background:#050d18} .c20-rot .c20-rot__faces{position:relative;width:100%;height:100%;margin:0;display:block} .c20-rot .c20-rot__faces .c20-faces__frame{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none} .c20-rot .c20-rot__faces .c20-faces__bar--a{left:8%;bottom:10%;width:28%;z-index:2} .c20-rot .c20-rot__faces .c20-faces__bar--b{left:8%;bottom:6%;width:16%;z-index:2} @media (max-width:720px){ .c20-rot .c20-rot__faces .c20-faces__box{left:20%;top:16%;width:58%;height:50%} .c20-rot .c20-rot__faces .c20-faces__grid{background-size:22px 22px} } /* C20.14: Try pre-roll (faces into drop circle, then fade). Motion-only; no claim labels. */ #try .panel{position:relative} #try .c20-preroll{ position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center; background:var(--ail-bg-dark,#0B1724);pointer-events:none; opacity:1;transition:opacity .55s ease; } #try .c20-preroll.is-done{opacity:0;visibility:hidden;pointer-events:none} #try .c20-preroll__stage{ position:relative;width:min(420px,78vw);aspect-ratio:1;display:grid;place-items:center; } #try .c20-preroll__rings{ position:absolute;inset:18%;border-radius:50%; box-shadow: 0 0 0 1.5px rgba(19,158,196,.35), 0 0 0 14px rgba(19,158,196,.12), 0 0 0 28px rgba(19,158,196,.08), 0 0 0 44px rgba(19,158,196,.05); background:radial-gradient(circle at 50% 50%, rgba(19,158,196,.12) 0%, transparent 62%); } #try .c20-preroll__rings::after{ content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid #139EC4;opacity:.55; -webkit-mask:conic-gradient(from 200deg,#000 0 110deg,transparent 110deg); mask:conic-gradient(from 200deg,#000 0 110deg,transparent 110deg); } #try .c20-preroll__chip{ position:absolute;width:72px;height:72px;border-radius:50%;object-fit:cover; border:2px solid #B6E8F5;box-shadow:0 10px 28px rgba(0,0,0,.45); opacity:0;transform:translate(var(--x),var(--y)) scale(.72); will-change:transform,opacity; } #try .c20-preroll__chip[data-i="0"]{--x:-150px;--y:-40px} #try .c20-preroll__chip[data-i="1"]{--x:-170px;--y:70px} #try .c20-preroll__chip[data-i="2"]{--x:20px;--y:150px} #try .c20-preroll.is-run .c20-preroll__chip{ animation:c20PrerollIn 2.4s cubic-bezier(.22,.7,.2,1) forwards; } #try .c20-preroll.is-run .c20-preroll__chip[data-i="0"]{animation-delay:.05s} #try .c20-preroll.is-run .c20-preroll__chip[data-i="1"]{animation-delay:.22s} #try .c20-preroll.is-run .c20-preroll__chip[data-i="2"]{animation-delay:.38s} #try .c20-preroll.is-run .c20-preroll__rings{ animation:c20PrerollPulse 2.4s ease-out forwards; } @keyframes c20PrerollIn{ 0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.72)} 18%{opacity:1} 70%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(0,0) scale(.55)} } @keyframes c20PrerollPulse{ 0%{transform:scale(.92);opacity:.7} 55%{transform:scale(1);opacity:1} 100%{transform:scale(1.06);opacity:.35} } @media (max-width:720px){ #try .c20-preroll__chip{width:56px;height:56px} #try .c20-preroll__chip[data-i="0"]{--x:-110px;--y:-30px} #try .c20-preroll__chip[data-i="1"]{--x:-120px;--y:55px} #try .c20-preroll__chip[data-i="2"]{--x:10px;--y:110px} } @media (prefers-reduced-motion:reduce){ #try .c20-preroll{display:none!important} } /* C20.19 — Try video sample chrome (play + 3s). Only .sample--video; no other samples. */ .alx .sample.sample--video{position:relative} .alx .sample.sample--video .sample__chrome{ position:absolute;inset:0 auto auto 0;width:100%;aspect-ratio:4/5; pointer-events:none;z-index:2; } .alx .sample.sample--video .sample__play{ position:absolute;left:50%;top:50%; width:46px;height:46px;margin:-23px 0 0 -23px; border-radius:50%; background:color-mix(in srgb,#0A1630 78%,transparent); border:1.5px solid color-mix(in srgb,#139EC4 75%,#ffffff 10%); box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb,#0E7490 35%,transparent); display:block; } .alx .sample.sample--video .sample__play::after{ content:"";position:absolute;left:18px;top:14px; width:0;height:0; border-style:solid;border-width:9px 0 9px 15px; border-color:transparent transparent transparent #139EC4; filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); } .alx .sample.sample--video .sample__dur{ position:absolute;right:8px;top:8px; font:600 11px/1 Inter,system-ui,sans-serif; letter-spacing:.06em;text-transform:lowercase; color:#EAF8FC; background:color-mix(in srgb,#0A1630 82%,transparent); border:1px solid color-mix(in srgb,#0E7490 60%,transparent); border-radius:999px;padding:5px 8px; display:block;font-style:normal; } .alx .sample.sample--video:hover .sample__play{ border-color:#139EC4; background:color-mix(in srgb,#0A1630 66%,#0E7490 18%); } @media (max-width:600px){ .alx .sample.sample--video .sample__play{width:40px;height:40px;margin:-20px 0 0 -20px} .alx .sample.sample--video .sample__play::after{left:15px;top:12px;border-width:8px 0 8px 13px} .alx .sample.sample--video .sample__dur{top:6px;right:6px;font-size:10.5px;padding:4px 7px} } /* === C20 clients strip v2-dense (Placement A) === */ .c20-clients{--c20cl-teal:#0E7490;--c20cl-ink3:#6B7F90;--c20cl-hair:rgba(10,22,48,.10);--c20cl-hair2:rgba(14,116,144,.18);background:#F7FAFB;border-top:1px solid var(--c20cl-hair);border-bottom:1px solid var(--c20cl-hair);box-shadow:inset 0 1px 0 var(--c20cl-hair2),inset 0 -1px 0 var(--c20cl-hair2);padding:28px 24px 30px;margin:0!important;max-width:none!important} .c20-clients__inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px} .c20-clients__kicker{margin:0!important;font:600 11px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--c20cl-ink3)} .c20-clients__row{list-style:none;margin:0!important;padding:0!important;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:40px;max-width:100%} .c20-clients__row li{margin:0;padding:0;flex:0 0 auto;display:flex;justify-content:center} .c20-clients__row li::before{content:none!important} .c20-clients__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 8px;text-decoration:none;opacity:.55;filter:grayscale(1);transform:translateY(0);transition:opacity 240ms ease,filter 240ms ease,transform 240ms ease;border-radius:8px} .c20-clients__link:hover,.c20-clients__link:focus-visible{opacity:1;filter:grayscale(0);transform:translateY(-1px)} .c20-clients__link:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c20cl-teal)} .c20-clients__logo{display:block;width:auto;object-fit:contain;object-position:center} .c20-clients__logo--iron{height:32px;max-width:168px} .c20-clients__logo--neewz{height:28px;max-width:160px} .c20-clients__logo--kan{height:28px;max-width:112px} @media (max-width:480px){.c20-clients{padding:22px 16px 24px}.c20-clients__inner{gap:12px}.c20-clients__row{gap:20px}.c20-clients__link{padding:6px 4px}.c20-clients__logo--iron{height:24px;max-width:118px}.c20-clients__logo--neewz{height:21px;max-width:110px}.c20-clients__logo--kan{height:21px;max-width:84px}} @media (prefers-reduced-motion:reduce){.c20-clients__link{transition:none}.c20-clients__link:hover,.c20-clients__link:focus-visible{transform:none}} /* C20.2: two home hero actions, stacked without overflow at 390px. */ body.home .al-hero .c202-hero-ctas{display:flex!important;flex-wrap:wrap!important;gap:12px!important;width:100%;max-width:100%;box-sizing:border-box} body.home .al-hero .c202-hero-ctas>.wp-block-button{min-width:0;max-width:100%;margin:0!important} body.home .al-hero .c202-hero-ctas .wp-block-button__link{box-sizing:border-box;max-width:100%;white-space:normal} @media(max-width:600px){body.home .al-hero .c202-hero-ctas{flex-direction:column!important;align-items:stretch!important}body.home .al-hero .c202-hero-ctas>.wp-block-button,body.home .al-hero .c202-hero-ctas .wp-block-button__link{width:100%!important;flex:none!important}} /* Review markers must never be visible, including late theme partials. */ .al-verify,.al-verify-note{display:none!important} /* C20.4: Matrix sizing copied from the preview; leave existing strip styles alone. */ .c20-clients__logo--matrix{height:34px;max-width:150px} @media(max-width:480px){.c20-clients__logo--matrix{height:26px;max-width:120px}} /* C20.5: same 72px avatar component as Guy, with a centered portrait. */ #team .al-team .c205-morin-avatar,#team .al-team .c206-guy-avatar{overflow:hidden;flex-shrink:0} #team .al-team .c205-morin-avatar img,#team .al-team .c206-guy-avatar img{display:block;width:100%;height:100%;max-width:none;border-radius:50%;object-fit:cover;object-position:center;margin:0;padding:0} /* Preview strip layout accommodates the fourth logo without mobile overflow. */ .c20-clients__inner{max-width:720px} .c20-clients__row{flex-wrap:wrap;gap:28px 32px} @media(max-width:480px){.c20-clients__row{gap:14px 16px}} /* C20.9 (Dor/Morin mobile note 1): the theme-rendered hero row (al_c201_hero_ctas) emits the Book a demo wrapper without .al-btn-primary, so it fell back to core's transparent button = text only. Give it the design-system primary fill on every width; Free Register keeps the outline (.al-btn-ghost). */ body.home .al-hero .c202-hero-ctas>.wp-block-button:not(.al-btn-ghost) .wp-block-button__link{background:#22D3EE!important;border:1.5px solid #22D3EE!important;color:#0B1724!important;box-shadow:none!important} body.home .al-hero .c202-hero-ctas>.wp-block-button:not(.al-btn-ghost) .wp-block-button__link:hover{background:#67E8F9!important;border-color:#67E8F9!important} body.home .al-hero .c202-hero-ctas>.wp-block-button:not(.al-btn-ghost) .wp-block-button__link:focus-visible{outline:2px solid #7DD3FC;outline-offset:3px}