:root{ --bg:#FFFFFF; --ink:#0E0A12; --p:#A810E0; --pd:#5B0A80; --pl:#D07BFF; --li:#F4EAFB; --mu:#5F5667; --ln:#E4DDE9; --mute:#8D88A0; --shoot:#FF6B6F; --disp:"Karantina","Assistant",system-ui,sans-serif; --body:"Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --lat:"Comfortaa","Assistant",sans-serif; color-scheme:light; } *{box-sizing:border-box} html{scroll-padding-top:84px} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img{max-width:100%} a{color:inherit} :focus-visible{outline:3px solid var(--p);outline-offset:3px} @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}} .wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)} .p{color:var(--p)} .lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate} [data-page][hidden]{display:none!important} /* buttons & links */ .btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#FFFFFF;padding:15px 26px;font:700 17px/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background .2s,color .2s} .btn:hover{background:var(--p)} .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)} .btn.ghost:hover{background:var(--ink);color:#FFFFFF} .btn.pur{background:var(--p)} .btn.pur:hover{background:#FFFFFF;color:var(--ink)} .more{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;text-decoration:none;border-bottom:2px solid var(--p);padding-bottom:2px} .more:hover{color:var(--p)} .ctas{display:flex;flex-wrap:wrap;gap:12px} /* header */ .hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)} .hd .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px} .hd .logo img{height:44px;width:auto;display:block} .nav{display:flex;gap:4px;font-weight:700;font-size:16px;align-items:center} .nav>a,.dd>button{white-space:nowrap;text-decoration:none;padding:10px 12px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;position:relative} .nav>a:hover,.dd>button:hover,.dd:focus-within>button{color:var(--p)} .nav a[aria-current="page"],.dd.on>button{color:var(--p)} .nav a[aria-current="page"]::after,.dd.on>button::after{content:"";position:absolute;inset-inline:12px;bottom:4px;height:2px;background:var(--p)} .dd{position:relative} .dd>button::before{content:"▾";font-size:12px;margin-inline-end:6px;display:inline-block} .menu{position:absolute;top:100%;inset-inline-start:0;min-width:300px;background:#FFFFFF;border:2px solid var(--ink);padding:8px;display:none;z-index:50} .dd:hover .menu,.dd:focus-within .menu{display:grid} .menu a{display:grid;gap:0;padding:10px 12px;text-decoration:none;font-weight:700} .menu a small{font-weight:400;color:var(--mu);font-size:14px} .menu a:hover,.menu a[aria-current="page"]{background:var(--li);color:var(--pd)} .bar .en{font-family:var(--lat);font-weight:800;font-size:12.5px;letter-spacing:.08em;direction:ltr;display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;line-height:1;transition:border-color .15s,color .15s} .bar .en:hover{border-color:var(--p);color:var(--p)} .hd .btn{padding:12px 20px;font-size:16px} .mtog{display:none;background:none;border:2px solid var(--ink);font:700 15px/1 var(--body);padding:10px 14px;cursor:pointer;color:var(--ink)} .mnav{display:none} .crumb{font-size:14px;color:var(--mu);margin:0 0 18px;font-weight:600} .crumb a{text-decoration:none;color:var(--p);font-weight:800} .crumb a::before{content:"\2192";margin-inline-end:7px;display:inline-block} .crumb a:hover{color:var(--p)} /* home hero */ .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:end;padding-block:clamp(24px,4vw,56px) clamp(40px,6vw,80px)} .eyebrow{font-family:var(--lat);font-weight:700;letter-spacing:.32em;font-size:14px;color:var(--p);margin:0 0 14px;text-align:right} h1{font-family:var(--disp);font-weight:700;font-size:clamp(84px,13.5vw,204px);line-height:.8;margin:0;letter-spacing:-.005em} .def{margin:28px 0 0;padding-top:12px;border-top:2px solid var(--ink);font-size:15px;color:var(--mu);max-width:42ch} .def b{color:var(--ink);font-size:17px} .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;max-width:34ch;margin:18px 0 28px;font-weight:600} .ph{position:relative} .ph img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%} .ph svg{position:absolute;left:-14%;top:0;width:128%;height:100%;overflow:visible;pointer-events:none} .zz{fill:none;stroke:var(--p);stroke-width:14;stroke-linejoin:miter;stroke-miterlimit:10;vector-effect:non-scaling-stroke;stroke-dasharray:1400;animation:draw 1.1s .2s cubic-bezier(.6,0,.2,1) both} @keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}} .ph .cap{position:absolute;bottom:12px;inset-inline-end:12px;background:#FFFFFF;font-size:13px;padding:4px 10px;font-weight:600} .facts{display:flex;flex-wrap:wrap;gap:10px 48px;border-block:2px solid var(--ink);padding-block:16px;font-weight:600;font-size:16px;align-items:baseline} .facts b{font-family:var(--disp);font-size:46px;line-height:1;color:var(--p);margin-inline-end:8px;font-weight:700} /* inner page hero */ .phero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,88px);border-bottom:2px solid var(--ink)} .phero h1{font-size:clamp(68px,9.5vw,148px);line-height:.84;text-wrap:balance} .phero .tag{display:inline-block;font-size:14px;font-weight:800;color:var(--p);margin-bottom:12px} .phero .lead{max-width:40ch} .phero .ill{max-width:560px} .phero.solo{grid-template-columns:1fr} section{padding-block:clamp(64px,8vw,112px)} section+section.tight{padding-top:0} h2{font-family:var(--disp);font-weight:700;font-size:clamp(58px,7.6vw,110px);line-height:.86;margin:0 0 28px;text-wrap:balance} h2.s{font-size:clamp(46px,5.4vw,76px)} .kick{font-family:var(--lat);font-weight:700;font-size:13px;letter-spacing:.28em;color:var(--p);margin:0 0 14px;text-align:right} .body p{max-width:60ch;margin:0 0 16px} .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start} .ill{background:var(--li);display:block;width:100%;height:auto} /* why */ .why{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center} .why .big{font-size:clamp(21px,1.9vw,25px);font-weight:600;line-height:1.45;margin:0 0 18px;max-width:34ch} /* services list */ .svc{list-style:none;margin:0;padding:0} .svc li{border-top:2px solid var(--ink)} .svc li:last-child{border-bottom:2px solid var(--ink)} .svc a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 40px;gap:10px 32px;align-items:center;padding-block:24px;text-decoration:none} .svc li:nth-child(even) a{padding-inline-start:9%} .svc h3{font-family:var(--disp);font-weight:700;font-size:clamp(42px,4.4vw,60px);line-height:.9;margin:0;transition:color .2s} .svc h3 small{display:block;font-family:var(--body);font-size:15px;font-weight:700;color:var(--mu);margin-top:6px;line-height:1.3} .svc p{margin:0;color:var(--mu);font-size:17px} .svc .tag{display:block;font-size:13px;font-weight:800;color:var(--p);margin-bottom:6px} .svc .ar{font-size:30px;justify-self:end;transition:transform .25s} .svc a:hover h3{color:var(--p)} .svc a:hover .ar{transform:translateX(-8px)} /* staircase */ .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0 20px;align-items:start} .steps li{border-top:3px solid var(--ink);padding-top:16px;margin-top:calc((var(--n,4) - 1 - var(--i)) * 44px)} .steps .n{font-family:var(--disp);font-weight:700;font-size:84px;line-height:.8;color:var(--p);display:block;margin-bottom:10px} .steps h3{font-size:22px;font-weight:800;margin:0 0 8px;line-height:1.25} .steps p{margin:0;font-size:16px;color:var(--mu)} /* feature grid (pillars / bullets) */ .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px} .pillars div{border-top:2px solid var(--ink);padding-block:18px 26px} .pillars h3{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.25} .pillars p{margin:0;color:var(--mu);font-size:17px} .chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .chips li{border:2px solid var(--ink);padding:8px 16px;font-weight:700;font-size:16px} /* REAL */ .real{background:var(--ink);color:#FFFFFF} .real h2{color:#FFFFFF} .real .core{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.35;max-width:36ch;margin:0 0 12px;color:#FFFFFF} .real .core em{font-style:normal;color:var(--pl)} .real .sub{color:#CFC6D6;max-width:58ch;margin:0} .rgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:56px} .quad{width:100%;height:auto;display:block;max-width:480px} .quad text{font-family:var(--body)} .modes{display:grid;gap:14px} .mode{border-inline-start:5px solid var(--c);background:#1A1320;padding:20px 22px} .mode .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:8px} .mode .lat{font-weight:700;letter-spacing:.22em;font-size:14px;color:var(--c)} .mode h3{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.9;margin:0} .mode .is{margin:0 0 10px;font-weight:800;font-size:19px;color:#FFFFFF} .mode dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:16px} .mode dt{color:#9F93A9;font-weight:700;white-space:nowrap} .mode dd{margin:0;color:#E4DCEA} .darkmode{margin-top:22px;font-size:16px;color:#CFC6D6} .darkmode b{color:#FFFFFF} /* about */ .about{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(28px,5vw,80px);align-items:center} .about img{width:100%;aspect-ratio:9/10;object-fit:cover;display:block} .creds{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;font-size:15px;color:var(--mu)} .creds li{padding-block:12px;border-top:1px solid var(--ink)} .creds b{display:block;color:var(--ink);font-size:16px} /* FM */ .fm{background:var(--li)} .fm .in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center} .stripe{display:flex;height:10px;width:180px;margin-bottom:22px} .stripe i{flex:1} .fmname{font-family:"Varela Round",sans-serif;font-size:clamp(30px,3.2vw,42px);letter-spacing:.03em;margin:0 0 6px;direction:ltr;text-align:right} .born{font-weight:800;color:var(--pd);margin:0 0 18px;font-size:16px} /* canonical definition block */ section.tight.defsec{padding-block:clamp(32px,4vw,56px) 0} .defbox{border:0;border-top:2px solid var(--ink);background:none;padding:clamp(18px,2.4vw,26px) 0 0;max-width:80ch} .t-focus .defbox h2,.defbox h2{font-family:var(--body);font-weight:800;font-size:clamp(22px,2.3vw,29px);line-height:1.3;margin:0 0 14px;letter-spacing:-.01em;color:var(--ink)} .defbox .dlede{font-size:clamp(18px,1.7vw,21px);font-weight:600;line-height:1.5;margin:0 0 16px;color:var(--ink)} .defbox p{margin:0 0 12px;color:var(--mu);font-size:17px;line-height:1.65} .defbox p:last-child{margin-bottom:0} .defbox b{color:var(--ink);font-weight:800} .fm .nums{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 26px;font-weight:600} .fm .nums b{color:var(--p)} .fm blockquote{margin:0;font-family:var(--disp);font-size:clamp(42px,4.6vw,64px);line-height:.95;font-weight:700;text-wrap:balance} .fm .tag2{display:block;margin-top:18px;font-family:"Varela Round",sans-serif;font-size:16px;color:var(--pd);direction:ltr;text-align:right} .abc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .abc div{padding:26px 22px;color:#FFFFFF;display:flex;flex-direction:column;gap:10px} .abc b{font-family:"Varela Round",sans-serif;font-size:72px;line-height:.9;font-weight:400} .abc .en{font-family:"Varela Round",sans-serif;font-size:17px;direction:ltr;text-align:right;color:#0E1A22} .abc p{margin:0;font-size:16px;line-height:1.5;color:#0E1A22} /* proof */ .quote{display:grid;grid-template-columns:auto 1fr;gap:0 28px} .quote .qm{font-family:var(--disp);font-size:220px;line-height:.7;color:var(--p);font-weight:700} .quote p{font-family:var(--disp);font-size:clamp(40px,4.8vw,68px);line-height:.98;margin:0;font-weight:700;max-width:22ch;text-wrap:balance} .quote cite{display:block;margin-top:22px;font-style:normal;font-weight:700;font-size:17px} .quote cite span{color:var(--mu);font-weight:400} .qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)} .qs.two-col{grid-template-columns:repeat(2,minmax(0,1fr))} .qs figure{margin:0;display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:18px} .qs blockquote{margin:0;font-size:18px;line-height:1.6;flex:1} .qs figcaption{margin-top:16px;font-size:15px} .qs figcaption b{display:block} .qs figcaption span{color:var(--mu)} .qs [lang="en"] blockquote{direction:ltr;text-align:left} .rowhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:36px} .rowhead h2{margin:0} /* logos */ .marq{overflow:hidden;border-block:2px solid var(--ink);padding-block:22px;display:grid;gap:18px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .track{display:flex;gap:56px;width:max-content;align-items:center;animation:marq 90s linear infinite} .track.rev{animation-direction:reverse} .marq:hover .track{animation-play-state:paused} .track img{height:46px;width:auto;max-width:150px;object-fit:contain;display:block} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}} .lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border-top:1px solid var(--ln);border-inline-start:1px solid var(--ln)} .lgrid div{display:flex;align-items:center;justify-content:center;height:110px;padding:18px;border-bottom:1px solid var(--ln);border-inline-end:1px solid var(--ln)} .lgrid img{max-height:58px;max-width:100%;object-fit:contain} .cat{margin-top:56px} .cat h2{font-size:clamp(40px,4.4vw,60px);margin-bottom:18px} .cat h2 span{font-family:var(--body);font-size:16px;color:var(--mu);font-weight:600;margin-inline-start:10px} /* related */ .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px} .rel a{display:block;border-top:2px solid var(--ink);padding-block:16px 22px;text-decoration:none} .rel a b{display:block;font-family:var(--disp);font-size:40px;line-height:.95;font-weight:700;transition:color .2s} .rel a span{font-size:15px;color:var(--mu)} .rel a:hover b{color:var(--p)} /* footer */ .ft{background:var(--ink);color:#FFFFFF;padding-block:clamp(64px,8vw,112px) 28px} .ft h2{color:#FFFFFF} .ftcta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px} .ftcta h2{margin:0} .map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:72px;padding-top:28px;border-top:1px solid #3A3040;font-size:15px} .map h3{font-size:14px;color:#A89CB2;margin:0 0 10px;font-weight:700} .map a{display:block;text-decoration:none;color:#E4DCEA;padding-block:4px} .map a:hover{color:#FFFFFF} .fb{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:48px;padding-top:22px;border-top:1px solid #3A3040;font-size:14px;color:#A89CB2} .fb img{height:38px;width:auto;display:block} /* contact */ .ct{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start} .ct .det{display:grid;gap:12px;margin-top:28px;font-size:19px;font-weight:600} .ct .det a{text-decoration:none;border-bottom:2px solid var(--ln);padding-bottom:2px;width:fit-content} .ct .det a:hover{border-color:var(--p);color:var(--p)} form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;background:var(--li);padding:clamp(20px,3vw,36px)} form .full{grid-column:1/-1} label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px} input,textarea,select{width:100%;background:#FFFFFF;border:2px solid var(--ink);color:var(--ink);font:400 17px/1.4 var(--body);padding:10px 12px;border-radius:0} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--p)} textarea{resize:vertical;min-height:110px} .fnote{font-size:14px;color:var(--mu);margin:0} @media (max-width:1180px){ .nav,.hd .btn.top{display:none} .mtog{display:inline-block} .hd .bar{gap:10px} /* both controls stay a comfortable thumb target on a phone */ .bar .en{margin-inline-start:auto;min-height:44px;padding-inline:16px} .mtog{min-height:44px;display:inline-flex;align-items:center} .mnav{display:block;border-top:1px solid var(--ln);max-height:calc(100vh - 70px);overflow:auto} .mnav[hidden]{display:none} .mnav .wrap{display:grid;padding-block:8px 20px} .mnav .navgrp{display:block;margin:14px 0 2px;font-size:13px;font-weight:700;color:var(--mu)} .mnav a{padding-block:10px;border-bottom:1px solid var(--ln);text-decoration:none;font-weight:700;font-size:19px} .mnav a[aria-current="page"]{color:var(--p)} } @media (max-width:980px){ .hero,.why,.about,.fm .in,.ct,.phero,.two,.rgrid{grid-template-columns:minmax(0,1fr)} .ph{max-width:460px} .ph svg{left:-4%;width:108%} .svc a{grid-template-columns:1fr 32px} .svc a p{grid-column:1/-1;grid-row:2} .svc li:nth-child(even) a{padding-inline-start:0} .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} .steps li{margin-top:0} .qs,.qs.two-col{grid-template-columns:1fr} .quote{grid-template-columns:1fr} .quote .qm{font-size:140px;height:70px} .abc{grid-template-columns:1fr} .map{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .steps{grid-template-columns:minmax(0,1fr)} form{grid-template-columns:minmax(0,1fr);min-width:0} .creds{grid-template-columns:1fr} .mode dl{grid-template-columns:1fr} } /* ---------- shared new components ---------- */ .lcards,.lcards-more{display:none} .vsw{position:fixed;bottom:16px;inset-inline-start:16px;z-index:60;display:flex;align-items:center;gap:4px;background:#0E0A12;color:#FFFFFF;padding:5px;border-radius:999px;font:600 14px/1 "Heebo","Assistant",sans-serif;box-shadow:0 6px 24px rgba(14,10,18,.28)} .vsw span{padding-inline:10px 4px;color:#BFB4C8} .vsw button{font:inherit;border:0;background:transparent;color:#FFFFFF;padding:9px 14px;border-radius:999px;cursor:pointer} .vsw button[aria-pressed="true"]{background:#A810E0} .excuses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} .excuses li{border:2px solid var(--ink);padding:16px 18px;font-weight:700;font-size:19px;position:relative} .excuses li::after{content:"";position:absolute;inset-inline-end:14px;bottom:-9px;width:16px;height:16px;background:var(--bg);border-inline-end:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)} .tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .tools article{border-top:3px solid var(--ink);padding-top:18px} .tools h3{font-size:24px;font-weight:800;margin:0 0 8px} .tools .tl{margin:0 0 14px;color:var(--mu);font-size:17px} .abcl{list-style:none;margin:0;padding:0;display:grid;gap:10px} .abcl li{background:var(--li);padding:12px 14px;font-size:16px} .abcl b{display:block;color:var(--pd);font-size:17px} .cbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px} .cbar div{background:var(--c);color:var(--t,#FFFFFF);aspect-ratio:1.4;padding:18px;display:flex;flex-direction:column;justify-content:flex-end} .cbar b{font-size:30px;font-weight:800;line-height:1} .cbar span{font-size:16px;font-weight:600;opacity:.9} .colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .colors article{border:2px solid var(--c);background:#FFFFFF;display:flex;flex-direction:column} .colors header{background:var(--c);color:var(--t,#FFFFFF);padding:16px 18px} .colors header b{display:block;font-size:30px;font-weight:800;line-height:1.05} .colors header span{font-size:14px;font-weight:700;opacity:.9} .colors .traits{margin:0;padding:14px 18px 4px;font-weight:700;font-size:16px} .colors h4{margin:12px 18px 4px;font-size:14px;color:var(--mu)} .colors ul{margin:0;padding:0 18px 4px;list-style:none;display:grid;gap:4px;font-size:16px} .colors ul li::before{content:"✓ ";color:var(--c);font-weight:800} .colors ul.no{padding-bottom:18px} .colors ul.no li::before{content:"✕ ";color:#8A7F92} .idbox{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;background:var(--li);padding:clamp(20px,4vw,48px)} .idbox fieldset{border:0;margin:0 0 18px;padding:0;display:grid;gap:8px} .idbox legend{font-weight:800;font-size:17px;margin-bottom:8px;padding:0} .idbox label{display:flex;gap:10px;align-items:center;background:#FFFFFF;border:2px solid var(--ink);padding:12px 14px;font-weight:600;cursor:pointer;margin:0} .idbox input{width:auto;accent-color:var(--p);margin:0} .idbox label:has(input:checked){border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p)} .idres{background:var(--c,#FFFFFF);color:var(--t,#FFFFFF);padding:28px;min-height:280px;transition:background .3s} .idres .lbl{font-size:14px;font-weight:700;opacity:.9} .idres b{display:block;font-size:64px;font-weight:800;line-height:1;margin:4px 0 10px} .idres p{margin:0 0 12px;font-weight:600} .idres h4{margin:0 0 6px;font-size:15px} .idres ul{margin:0 0 12px;padding-inline-start:20px} .idres small{opacity:.85} @media (max-width:980px){.tools,.colors{grid-template-columns:1fr 1fr}.idbox{grid-template-columns:1fr}} @media (max-width:560px){.tools,.colors,.excuses{grid-template-columns:1fr}} /* ========================================================= VERSION B — "בשפת פוקוס" (Focus Masters site language, Saltoz colors) ========================================================= */ .t-focus{--disp:"Heebo","Assistant","Open Sans",system-ui,sans-serif;--body:"Heebo","Assistant","Open Sans",system-ui,sans-serif;--lat:"Montserrat","Heebo",sans-serif; --ink:#170B20;--pd:#5B0A80;--pl:#D9A6FF;--li:#F4ECFA;--cream:#FCF9FE;--line:#ECE2F4;--mu:#5E5566} .t-focus body{font-size:17.5px;line-height:1.7} .t-focus .topbar{display:block;background:#A810E0;color:#FFFFFF;font:600 13px/1 var(--lat)} .t-focus .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:7px} .t-focus .topbar a{text-decoration:none;color:#FFFFFF} .t-focus .soc{display:flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500} .t-focus .soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center} .t-focus .soc svg{width:15px;height:15px;fill:#FFFFFF} .t-focus .hd{background:rgba(255,255,255,.97)} .t-focus .nav{font-weight:700;font-size:15.5px} .t-focus .nav>a,.t-focus .dd>button{padding:10px 11px} .t-focus .nav a[aria-current="page"],.t-focus .dd.on>button{color:#A810E0} .t-focus .nav a[aria-current="page"]::after,.t-focus .dd.on>button::after{display:none} .t-focus .bar .en{border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:800} .t-focus .menu{border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 48px rgba(23,11,32,.14);padding:10px} .t-focus .menu a{border-radius:12px} .t-focus .btn{border-radius:999px;background:var(--ink);font:700 16px/1 var(--body);padding:15px 28px} .t-focus .btn:hover{background:#A810E0} .t-focus .btn.ghost{background:transparent;color:var(--pd);box-shadow:inset 0 0 0 1.5px #A810E0} .t-focus .btn.ghost:hover{background:#A810E0;color:#FFFFFF} .t-focus .btn.pur{background:var(--ink)} .t-focus .more{border:1.5px solid #A810E0;border-radius:999px;padding:11px 24px;color:var(--pd);font-weight:700;font-size:15.5px} .t-focus .more:hover{background:#A810E0;color:#FFFFFF} .t-focus .kick{font:700 12px/1 var(--lat);letter-spacing:.24em;text-transform:uppercase} .t-focus h1 br,.t-focus h2 br{display:none} .t-focus h1{font-weight:800;font-size:clamp(44px,5.4vw,70px);line-height:1.08;letter-spacing:-.02em} .t-focus h2{font-weight:800;font-size:clamp(32px,3.8vw,50px);line-height:1.15;letter-spacing:-.01em;margin-bottom:22px} .t-focus h2.s{font-size:clamp(30px,3.2vw,42px)} .t-focus h1 .p,.t-focus h2 .p{color:#A810E0} /* home hero */ .t-focus [data-page="home"]>.wrap:first-child{max-width:none;padding-inline:0;background:var(--cream)} .t-focus .hero{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px);align-items:center;padding-block:clamp(40px,6vw,88px);grid-template-columns:1fr 1fr} .t-focus .hero>div:first-child{display:flex;flex-direction:column;align-items:flex-start} .t-focus .eyebrow{display:none} .t-focus .hero .lead{order:-1;font-size:18px;font-weight:600;color:var(--mu);margin:0 0 14px;max-width:40ch} .t-focus .hero h1{margin-bottom:30px} .t-focus .hero h1 span.p{color:#A810E0} .t-focus .ph svg,.t-focus .ph .cap{display:none} .t-focus .ph img{border-radius:24px;aspect-ratio:4/3.4;box-shadow:-22px 22px 0 #5B0A80} .t-focus .facts{max-width:1240px;margin-inline:auto;padding:0 clamp(16px,4vw,48px) clamp(40px,5vw,64px);border:0;gap:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .t-focus .facts span{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;padding:16px 22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px} .t-focus .facts b{font-size:30px;font-weight:800} /* services -> cards */ .t-focus .svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .t-focus .svc li,.t-focus .svc li:last-child{border:0} .t-focus .svc a,.t-focus .svc li:nth-child(even) a{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--cream);transition:border-color .2s,transform .2s} .t-focus .svc a:hover{border-color:#A810E0;transform:translateY(-3px)} .t-focus .svc h3{font-weight:800;font-size:25px;line-height:1.2} .t-focus .svc h3 small{font-size:14px} .t-focus .svc p{flex:1;font-size:16.5px} .t-focus .svc .ar{justify-self:auto;font-size:15px;font-weight:700;color:#A810E0} .t-focus .svc .ar::before{content:"לפרטים "} /* illustrations & photos */ .t-focus .ill{border-radius:24px;box-shadow:-18px 18px 0 #A810E0} .t-focus .real .ill{box-shadow:none} /* REAL */ .t-focus .real{background:#1C0A28} .t-focus .mode{border-radius:16px;background:#291536} .t-focus .mode h3{font-size:26px;font-weight:800} .t-focus .mode .lat{font-family:var(--lat);font-weight:800} /* FM band */ .t-focus .fm{background:var(--cream)} .t-focus .fm blockquote{font-size:clamp(28px,3vw,40px);line-height:1.25;font-weight:800} .t-focus .fm h3{font-family:var(--body)!important;font-size:30px!important;font-weight:800} /* big quote -> testimonial band */ .t-focus .quote{display:block;text-align:center;background:var(--li);border-radius:28px;padding:clamp(28px,5vw,64px) clamp(20px,4vw,48px)} .t-focus .quote .qm{display:block;font-family:Georgia,serif;font-size:72px;line-height:.5;height:30px;color:#A810E0} .t-focus .quote p{font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.45;max-width:30ch;margin-inline:auto} .t-focus .quote cite{font-size:14px;letter-spacing:.08em;color:var(--pd)} .t-focus .qs figure{background:#FFFFFF;border:0;border-radius:20px;padding:26px;box-shadow:0 10px 36px rgba(23,11,32,.08)} .t-focus .qs figure::before{content:"“";font-family:Georgia,serif;font-size:48px;line-height:.6;color:#C77DF0;height:22px} .t-focus .qs figcaption b{font-weight:800} .t-focus .qs figcaption span{color:#A810E0;font-size:13.5px;letter-spacing:.04em} /* logos */ .t-focus .marq{display:none} .t-focus .lcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .t-focus .lcards div,.t-focus .lgrid div{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;height:88px;display:flex;align-items:center;justify-content:center;padding:14px} .t-focus .lcards img{max-height:46px;max-width:100%;object-fit:contain} .t-focus .lcards-more{display:block;text-align:center;margin:30px 0 0} .t-focus .rowhead{justify-content:center;text-align:center} .t-focus .rowhead .more{display:none} .t-focus .lgrid{gap:14px;border:0} .t-focus .cat h2{font-size:clamp(26px,2.6vw,34px)} /* inner pages */ .t-focus .phero{border-bottom:0} .t-focus .phero .tag{background:var(--li);color:var(--pd);border-radius:999px;padding:6px 14px;font-size:13px} .t-focus .steps{gap:16px;align-items:stretch} .t-focus .steps li{margin-top:0;border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--cream);height:100%} .t-focus .steps .n{font-size:44px;font-weight:800;line-height:1} .t-focus .pillars{gap:16px} .t-focus .pillars div{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--cream)} .t-focus .chips li{border:1px solid var(--line);border-radius:999px;background:#FFFFFF;font-weight:600} .t-focus .rel{gap:16px} .t-focus .rel a{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--cream)} .t-focus .rel a b{font-size:22px;font-weight:800} .t-focus .excuses li{border:1px solid var(--line);border-radius:18px 18px 18px 4px;background:var(--cream);font-weight:600} .t-focus .excuses li::after{display:none} .t-focus .tools article{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--cream)} .t-focus .abcl li{border-radius:12px;background:#FFFFFF} .t-focus .cbar div{border-radius:20px} .t-focus .colors article{border-radius:20px;overflow:hidden;border-width:1px} .t-focus .idbox{border-radius:28px} .t-focus .idbox label{border:1px solid var(--line);border-radius:14px} .t-focus .idres{border-radius:22px} .t-focus .abc div{border-radius:20px} .t-focus .abc{gap:14px} .t-focus .about img{border-radius:24px;box-shadow:-18px 18px 0 #F4EAFB} .t-focus .creds li{border-top:1px solid var(--line)} .t-focus form{border-radius:24px} .t-focus input,.t-focus textarea,.t-focus select{border:1px solid #D9CBE4;border-radius:12px} .t-focus input:focus-visible,.t-focus textarea:focus-visible,.t-focus select:focus-visible{outline:3px solid var(--p);outline-offset:2px;border-color:var(--p)} .chk input[type="checkbox"]{width:24px;height:24px;flex:none;accent-color:var(--p)} /* footer -> purple band */ .t-focus .ft{background:#A810E0} .t-focus .ft .ftcta h2 .p{color:var(--ink)} .t-focus .ft .btn.pur{background:var(--ink)} .t-focus .ft .btn.pur:hover{background:#FFFFFF;color:var(--ink)} .t-focus .map{border-top-color:rgba(255,255,255,.25)} .t-focus .map h3{color:#FBF3FF} .t-focus .map a{color:#FFFFFF} .t-focus .fb{border-top-color:rgba(255,255,255,.3);color:#FBF3FF} .t-focus .wa{display:grid;place-items:center;position:fixed;bottom:16px;inset-inline-end:16px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25A35A;box-shadow:0 8px 24px rgba(0,0,0,.25)} .t-focus .wa svg{width:28px;height:28px;fill:#FFFFFF} @media (max-width:980px){ .t-focus .hero{grid-template-columns:1fr} .t-focus .svc{grid-template-columns:1fr 1fr} .t-focus .lcards{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:560px){ .t-focus .svc{grid-template-columns:1fr} .t-focus .lcards{grid-template-columns:repeat(2,minmax(0,1fr))} .t-focus .topbar .soc{display:none} .vsw span{display:none} } /* ---------- round 4 ---------- */ .topbar{display:block;background:#0E0A12;color:#FFFFFF;font:600 13px/1 var(--body)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:7px} .topbar a{text-decoration:none;color:#FFFFFF} .soc{display:flex;align-items:center;gap:8px;font-weight:500} .soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:background .2s} .soc a:hover{background:#A810E0} .soc svg{width:15px;height:15px;fill:#FFFFFF} .wa{display:grid;place-items:center;position:fixed;bottom:16px;inset-inline-end:16px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25A35A;box-shadow:0 8px 24px rgba(0,0,0,.25)} .wa svg{width:28px;height:28px;fill:#FFFFFF} .skip{position:absolute;top:-60px;inset-inline-start:16px;z-index:100;background:#A810E0;color:#FFFFFF;border:0;padding:10px 16px;font:700 15px/1 var(--body);cursor:pointer} .skip:focus{top:8px} #main:focus{outline:none} .mode{padding:22px 24px} .mode .mt{display:block;font-family:var(--lat);font-weight:700;font-size:28px;letter-spacing:.14em;color:var(--c);margin-bottom:8px;text-align:right} .mode .is{font-size:21px;margin-bottom:6px} .mode .md{margin:0;color:#E4DCEA;font-size:16.5px;line-height:1.6} .cmatrix{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr 1fr;gap:8px;max-width:540px;width:100%} .cmatrix .ax{font-size:14px;font-weight:800;color:var(--mu);align-self:end;text-align:center;letter-spacing:.02em} .cmatrix .ay{align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);padding-inline:2px} .cmatrix div{background:var(--c);color:var(--t,#FFFFFF);aspect-ratio:1.25;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px} .cmatrix b{font-size:clamp(24px,2.6vw,34px);font-weight:800;line-height:1} .cmatrix em{font-style:normal;font-weight:700;font-size:14px} .cmatrix small{font-size:14.5px;font-weight:600;margin-top:6px;line-height:1.35} .t-focus .cmatrix div{border-radius:20px} .t-focus .topbar{background:#A810E0;font-family:var(--lat)} .t-focus .soc a{background:rgba(255,255,255,.2)} .t-focus .soc a:hover{background:#170B20} .t-focus .mode .mt{font-weight:800} @media (max-width:560px){.topbar .soc{display:none}.cmatrix small{display:none}} /* ---------- round 5 (version B final) ---------- */ .vsw{display:none!important} .abc{direction:ltr} .rra>li{direction:rtl;text-align:right} .abc>div{direction:rtl;text-align:right} .rel{grid-template-columns:repeat(3,minmax(0,1fr))!important} .steps.cubes{align-items:stretch} .t-focus .steps.cubes li{display:flex;flex-direction:column;gap:6px} @media (min-width:1181px){.t-focus .steps.cubes li{width:100%;min-height:clamp(230px,20vw,290px)}.t-focus .steps.cubes[style*="--n:3"] li{min-height:clamp(230px,22vw,320px)}.t-focus .steps.cubes.flat li{min-height:0}} .t-focus .steps.cubes[style*="--n:4"]{grid-template-columns:repeat(4,minmax(0,1fr))} .t-focus .steps.cubes[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .t-focus .steps.cubes h3{font-size:22px} .t-focus .steps.cubes p{font-size:16.5px} .t-focus .rra .n{font-family:var(--lat);font-size:24px;letter-spacing:.02em;margin-bottom:12px} .outcomes{list-style:none;margin:0;padding:0;display:grid;gap:10px} .outcomes li{background:var(--cream,#FCF9FE);border:1px solid var(--line,#ECE2F4);border-radius:16px;padding:14px 18px;font-weight:700;font-size:18px;display:flex;gap:12px;align-items:center} .outcomes li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#A810E0} .why4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .why4>div{background:var(--cream,#FCF9FE);border:1px solid var(--line,#ECE2F4);border-radius:20px;padding:24px} .why4 .dot{display:block;width:34px;height:34px;border-radius:10px;background:var(--c);margin-bottom:14px} .why4 h3{font-size:21px;font-weight:800;margin:0 0 8px;line-height:1.25} .why4 p{margin:0;font-size:16px;color:var(--mu)} /* mode switch */ .real .core{max-width:44ch} .msw{margin-top:40px} .msw-bar{display:grid;grid-template-columns:2fr 1fr;gap:12px;direction:ltr} .msw-dark,.msw-lit{position:relative;display:grid;gap:6px;padding:30px 6px 6px;border-radius:22px} .msw-dark{grid-template-columns:1fr 1fr;background:#120818;border:1px solid #3A2A47} .msw-lit{background:linear-gradient(135deg,#A810E0,#7A12B8);box-shadow:0 0 0 1px #C77DF0,0 12px 40px rgba(168,16,224,.45)} .msw-lbl{position:absolute;top:9px;inset-inline:0;text-align:center;font-size:13px;font-weight:700;color:#8C7C99} .msw-lit .msw-lbl{letter-spacing:.04em;font-size:13px;color:#F3E3FF;font-family:var(--body)} .msw-bar button{border:0;border-radius:16px;padding:18px 8px;font:800 clamp(16px,2vw,24px)/1 var(--lat);letter-spacing:.14em;cursor:pointer;background:transparent;color:#8C7C99;transition:background .25s,color .25s} .msw-dark button:hover{color:#D8CCE2} .msw-bar button[aria-selected="true"]{background:#2A1B36;color:#FFFFFF} .msw-lit button{color:#FFFFFF} .msw-lit button[aria-selected="true"]{background:rgba(255,255,255,.16)} .msw-defs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px;direction:ltr} .msw-defs>div{direction:rtl;text-align:right;padding:18px 20px;border-radius:18px;background:#1E1027;opacity:.75;transition:opacity .25s,background .25s} .msw-defs b{display:block;font-size:15px;letter-spacing:.16em;color:#CDB6DD;margin-bottom:6px;text-align:right} .msw-defs p{margin:0;color:#EDE4F3;font-size:16.5px;line-height:1.6} .msw[data-k="mute"] .msw-defs [data-k="mute"],.msw[data-k="shoot"] .msw-defs [data-k="shoot"],.msw[data-k="real"] .msw-defs [data-k="real"]{opacity:1;background:#2A1B36} .msw[data-k="real"] .msw-defs [data-k="real"]{background:#3A1650;box-shadow:inset 0 0 0 1px #A810E0} /* faq, legal, contact */ .faq details{border:1px solid var(--line,#ECE2F4);border-radius:18px;background:var(--cream,#FCF9FE);margin-bottom:12px;padding:0 22px} .faq summary{cursor:pointer;font-weight:800;font-size:19px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:#A810E0;font-size:24px;line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin:0 0 18px;color:var(--mu);max-width:70ch} .legal{max-width:820px;padding-block:40px 96px} .legal h1{font-size:clamp(36px,4vw,52px)!important;margin:0 0 24px} .legal h2{font-size:24px!important;margin:32px 0 10px} .legal p,.legal li{font-size:17.5px} .legal .upd{color:var(--mu);font-size:15px} .ct h1{font-size:clamp(40px,5vw,64px)} .wa-btn{background:#0E7A3E!important;margin-top:8px} .wa-btn:hover{background:#0A5F30!important} .cinfo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px} .cinfo>div{border:1px solid var(--line,#ECE2F4);border-radius:16px;padding:14px 16px;background:var(--cream,#FCF9FE);display:grid;gap:2px} .cinfo span{font-size:13px;color:var(--mu);font-weight:700} .cinfo a,.cinfo b{font-weight:700;text-decoration:none;font-size:16px} .hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0} .chk{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;font-size:15px!important;color:var(--mu)!important;cursor:pointer} .chk input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:#A810E0} input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#C8102E!important;background:#FFF6F7} .fmsg{margin:0;font-weight:700} .fmsg.err{color:#B00D26} .fmsg.ok{color:#1E7A45} .fnote a{color:#A810E0} @media (max-width:1180px){.why4{grid-template-columns:repeat(2,minmax(0,1fr))}.t-focus .steps.cubes[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:980px){.rel{grid-template-columns:1fr!important}.t-focus .steps.cubes[style*="--n:3"]{grid-template-columns:minmax(0,1fr)}.cinfo{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.cinfo{grid-template-columns:minmax(0,1fr)}} /* the colour quadrants: on a narrow phone the label must shrink, not spill */ @media (max-width:560px){.cmatrix div{aspect-ratio:auto;min-height:124px;padding:14px}.cmatrix b{font-size:clamp(18px,5.4vw,26px);overflow-wrap:anywhere}.cmatrix small{font-size:13px}.cmatrix em{font-size:13px}} @media (max-width:680px){ .msw-bar{grid-template-columns:1fr;direction:rtl} .msw-defs{grid-template-columns:1fr;direction:rtl} .why4,.t-focus .steps.cubes[style*="--n:4"]{grid-template-columns:minmax(0,1fr)} .t-focus .hero{padding-block:28px 40px} .t-focus .facts{grid-template-columns:minmax(0,1fr);align-items:stretch} .t-focus .ph img{box-shadow:-12px 12px 0 #5B0A80} .t-focus .ill{box-shadow:-10px 10px 0 #A810E0} .t-focus .about img{box-shadow:-10px 10px 0 #F4EAFB} .abc{direction:rtl} } /* media page */ .media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start} .media article{background:#FFFFFF;border:1px solid var(--ln);border-radius:18px;overflow:hidden} .media h2,.media h3{font-size:clamp(21px,2.2vw,27px);margin:20px 24px 8px;font-weight:800} .media p{margin:0 24px 24px;color:var(--mu);font-size:17px;line-height:1.65} .vid{position:relative;width:100%;aspect-ratio:16/9;background:#0E0A12} .vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#0E0A12} .pod{padding:28px 24px 24px;background:linear-gradient(160deg,#F7F0FC,#FFFFFF)} .pod h2,.pod p{margin-inline:0} .pod .btn{margin-top:8px} @media (max-width:820px){.media{grid-template-columns:1fr}} /* podcast row: the episode card plus two vertical clips (Hebrew site only) */ .reels{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start} .reels article{background:#FFFFFF;border:1px solid var(--ln);border-radius:18px;overflow:hidden} .reels h3{font-size:clamp(19px,1.9vw,23px);margin:18px 22px 8px;font-weight:800} .reels p{margin:0 22px 22px;color:var(--mu);font-size:16px;line-height:1.6} .vid.reel{aspect-ratio:9/16} /* two columns: the clips pair up and the episode card runs full width beneath them */ @media (max-width:980px) and (min-width:641px){.reels{grid-template-columns:1fr 1fr}.reels .ep{order:2;grid-column:1 / -1}} @media (max-width:640px){.reels{grid-template-columns:1fr}} /* client-materials embeds */ .embedwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .embedwrap *{max-width:100%} .embedwrap img{height:auto} h1,h2,h3{overflow-wrap:break-word} .t-focus h3{letter-spacing:-.01em} @media (max-width:680px){.phero,.phero.solo{grid-template-columns:minmax(0,1fr)}.phero>*{min-width:0}} /* wide data tables scroll in place instead of pushing the page sideways */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .tbl-scroll>table{min-width:560px} /* the fallback line inside